:root {
    /* metal quente: quase preto + dourado/ambar/bronze. Nada de azul eletrico. */
    --bg:#070605;
    --gold:#c9a44d;
    --gold-2:#e8b855;
    --gold-l:#f5d98b;
    --bronze:#8a6a2a;
    --ink:#e8e0d0; --ink-2:#b0a890; --ink-3:#8a8272;
    --line:#3a3020;
    --warn:#e0a45c;
    --stop:#e58a8a;
    --focus:#e8b855;
    --ok:#9fbf7f;
    --font-sans:ui-rounded,'Segoe UI',system-ui,-apple-system,sans-serif;
    --font-mono:ui-monospace,'SF Mono',Consolas,monospace;
    --r:999px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0; min-height: 100dvh; color: var(--ink); font-family: var(--font-sans);
    background:
      radial-gradient(1200px 800px at 50% -10%, #1a1408 0%, #0b0a08 55%, #060606 100%);
    display: flex; flex-direction: column; align-items: center;
    padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
  }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
  .orb:focus-visible { outline-offset: 8px; border-radius: 50%; }

  /* ---------- header minimo ---------- */
  header {
    width: min(720px, 100%); display: flex; align-items: center; gap: 10px;
    padding: 2px 6px 0; flex: 0 0 auto; min-height: 36px;
  }
  header h1 {
    font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold); margin: 0;
  }
  #modolbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3); }
  #status { flex: 1 1 auto; text-align: right; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; }
  body.on #status { color: var(--gold-2); }
  #evtoggle { flex: 0 0 auto; background: transparent; border: 1px solid var(--line); color: var(--ink-3);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    border-radius: var(--r); padding: 0 12px; cursor: pointer; height: 32px; min-height: 32px; }
  #evtoggle.on { color: var(--gold-2); border-color: var(--bronze); }

  /* ---------- folhas de tela cheia (registros, cérebros): fora da tela principal ---------- */
  .sheet { position: fixed; inset: 0; z-index: 60; background: rgba(10,8,6,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); animation: rise .22s ease both; }
  .sheet[hidden] { display: none; }
  .sheetbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 10px 20px; border-bottom: 1px solid #241d10; flex: 0 0 auto; }
  .sheetbar span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
  .sheetx { background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
  #evlist, #worklist { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #evlist::-webkit-scrollbar, #chat::-webkit-scrollbar { width: 5px; }
  #evlist::-webkit-scrollbar-thumb, #chat::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  #worklist { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink); }
  #worklist .row { padding: 12px 14px; border: 1px solid #241d10; border-radius: var(--r); background: rgba(26,20,10,.6); white-space: pre-wrap; word-break: break-word; }
  #worklist .t { color: var(--gold-l); display: block; margin-bottom: 4px; letter-spacing: .08em; }
  #worklist .p { color: var(--ink-2); }
  #worklist .vazio { color: var(--ink-3); text-align: center; margin-top: 30vh; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
  /* chip no header: só existe enquanto algum cérebro trabalha; toque abre a folha */
  #workchip { flex: 0 0 auto; background: transparent; border: 1px solid var(--bronze); color: var(--gold-2); font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r); padding: 0 10px; height: 32px; min-height: 32px; white-space: nowrap; }
  #workchip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l); margin-right: 7px; vertical-align: 1px; animation: corepulse 1.4s ease-in-out infinite; }
  #workchip[hidden] { display: none; }
  .controls .chip2 { display: none; }
  #atalhosrow .dica, #orbrow .dica { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); }

  /* ---------- DESKTOP (>= 1100px): dois palcos, orb maior, atalhos ----------
     Decisão do Hibra 12/09/2026: a tela larga tinha 70% vazio, o visual lateral cobria a
     conversa e, no limpo, tampava os botões. Coluna da conversa à esquerda (--col), palco do
     visual à direita quando há visual; sem visual a coluna centraliza como antes. */
  @media (min-width: 1100px) {
    body { --col: 600px; --esq: max(3vw, calc(50% - 640px)); }
    header { width: min(1280px, 100%); }
    #chat, #sayform, #settings { width: var(--col); }
    /* orb maior: 132px no normal, ~210px no limpo */
    body .orb-wrap { --os: 2; width: 400px; height: 400px; margin: 1vh 0 0; }
    body.v-limpo.v-limpo .orb-wrap { --os: 3.2; width: min(70vmin, 640px); height: min(70vmin, 640px); max-height: 70dvh; }
    body.v-foco.v-foco .orb-wrap { --os: 4; width: min(90vmin, 800px); height: min(90vmin, 800px); }
    /* com visual na tela (e fora do foco), tudo da conversa desliza pra coluna da esquerda */
    body.hy-up:not(.v-foco):not(.hy-full) > .orb-wrap,
    body.hy-up:not(.v-foco):not(.hy-full) > #chat,
    body.hy-up:not(.v-foco):not(.hy-full) > #sayform,
    body.hy-up:not(.v-foco):not(.hy-full) > .controls,
    body.hy-up:not(.v-foco):not(.hy-full) > #settings { align-self: flex-start; margin-left: var(--esq); width: var(--col); }
    body.hy-up:not(.v-foco):not(.hy-full) > .orb-wrap { width: var(--col); } /* orb centrado na coluna */
    body.hy-up:not(.v-foco):not(.hy-full) > .controls { justify-content: center; }
    /* o palco da direita: do fim da coluna até a borda, centrado na vertical */
    body.hy-up:not(.v-foco):not(.hy-full) #hyover {
      left: calc(var(--esq) + var(--col) + 3vw) !important; right: 3vw !important; top: 50% !important; bottom: auto !important;
      transform: translateY(-50%) !important; width: auto !important; max-width: none !important; }
    /* o orb não precisa mais fugir do painel: ele já tem palco próprio */
    body.hy-up:not(.hy-full).v-limpo .orb-wrap { transform: none !important; }
    body.hy-up.hy-full .orb-wrap, body.hy-up.hy-full.v-limpo .orb-wrap { transform: translate(-42vw, 38vh) scale(.18) !important; opacity: .5; } /* marca d’água em qualquer modo */
    .hy { max-height: 86dvh; }
    /* chip dos cérebros também perto dos controles, que no desktop ficam longe do header */
    .controls .chip2:not([hidden]) { display: inline-flex; align-items: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      background: transparent; border: 1px solid var(--bronze); color: var(--gold-2); font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r); padding: 0 10px; height: 32px; white-space: nowrap; }
    .controls .chip2::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l); margin-right: 7px; animation: corepulse 1.4s ease-in-out infinite; }
    .controls { position: relative; width: var(--col); }
    #atalhosrow { display: flex; }
    #atalhosrow[hidden] { display: none; }
  }

  /* ---------- orb ---------- */
  .orb-wrap { position: relative; width: 200px; height: 200px; margin: 2.5vh 0 2vh;
    display: grid; place-items: center; z-index: 2; flex: 0 0 auto;
    transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .orb-wrap.live { transform: scale(1.04); }
  .orb-glow {
    position: absolute; width: 160px; height: 160px; border-radius: 50%;
    background:
      radial-gradient(28% 28% at 50% 48%, rgba(245,217,139,.55), transparent 60%),
      radial-gradient(44% 44% at 50% 50%, rgba(232,184,85,.45), transparent 72%),
      radial-gradient(62% 62% at 50% 52%, rgba(184,134,46,.22), transparent 80%);
    filter: blur(28px); opacity: .5; transition: opacity .12s linear;
  }
  #viz { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 4; }
  /* Liquid Orb (WebGPU): quando disponivel, substitui o orb CSS. O .orb continua
     por cima como alvo de clique, so que invisivel; sem WebGPU nada muda. */
  #orbgpu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
    pointer-events: none; display: none; }
  body.gpuorb #orbgpu { display: block; }
  body.gpuorb .orb { background: transparent; box-shadow: none; animation: none; }
  body.gpuorb .orb-liquid, body.gpuorb .orb-core { display: none; }
  body.gpuorb .orb-glow { opacity: .22 !important; }
  body.gpuorb #viz { display: none; }
  .orb {
    position: relative; width: 66px; height: 66px; cursor: pointer; z-index: 3;
    border-radius: 46% 54% 57% 43% / 52% 44% 56% 48%;
    background: radial-gradient(circle at 50% 42%, rgba(245,217,139,.9), rgba(184,134,46,.55) 58%, rgba(70,48,14,.3) 85%);
    box-shadow:
      0 0 34px 6px rgba(201,164,77,.45),
      0 0 0 1px rgba(232,184,85,.5),
      inset 0 2px 18px rgba(245,217,139,.45);
    animation: blob 9s ease-in-out infinite, float 7.5s ease-in-out infinite;
    animation-play-state: paused; /* parado no idle; body.viva (voz) solta */
    transition: box-shadow .4s ease, transform .4s ease;
  }
  body.viva .orb, body.viva .orb-core { animation-play-state: running; }
  .orb:active { transform: scale(.97); }
  .orb-liquid {
    position: absolute; inset: -8%; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at 42% 38%, rgba(245,217,139,.92), rgba(232,184,85,.5) 46%, rgba(184,134,46,.22) 72%, transparent 84%);
    filter: url(#liquid) blur(2px);
    mix-blend-mode: screen; opacity: .85; z-index: 3;
  }
  .orb-core {
    position: absolute; inset: 22%; border-radius: 50%; z-index: 4;
    background: radial-gradient(circle, rgba(255,248,230,.95), rgba(245,217,139,.55) 42%, rgba(201,164,77,.18) 70%, transparent 82%);
    filter: blur(4px); mix-blend-mode: screen;
    animation: corepulse 4s ease-in-out infinite;
    animation-play-state: paused;
  }
  .orb.speaking {
    box-shadow:
      0 0 56px 14px rgba(232,184,85,.7),
      0 0 0 1px rgba(245,217,139,.72),
      inset 0 2px 20px rgba(255,248,230,.6);
  }
  @keyframes float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
  @keyframes blob {
    0%,100% { border-radius: 46% 54% 57% 43% / 52% 44% 56% 48%; }
    25% { border-radius: 58% 42% 48% 52% / 44% 56% 44% 56%; }
    50% { border-radius: 43% 57% 53% 47% / 56% 47% 53% 44%; }
    75% { border-radius: 53% 47% 42% 58% / 47% 53% 57% 43%; }
  }
  @keyframes corepulse { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

  /* ---------- feed da conversa ---------- */
  #chat {
    width: min(720px, 100%); flex: 1 1 auto; min-height: 120px; overflow-y: auto; z-index: 2;
    display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 8px 8px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 100%);
  }
  .msg { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.5;
    animation: rise .34s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .msg .who { flex: 0 0 58px; text-align: right; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; color: var(--ink-3); }
  .msg .txt { flex: 1 1 auto; word-break: break-word; }
  .msg.u .txt { color: var(--gold-l); } .msg.u .who { color: var(--bronze); }
  .msg.a .txt { color: var(--ink); } .msg.a .who { color: var(--gold); }
  .msg.t .txt { color: var(--ink-2); font-family: var(--font-mono); font-size: 12.5px; } .msg.t .who { color: var(--bronze); }
  .msg.s { opacity: .6; }
  .msg.s .txt { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
  /* cartao de resultado de cerebro: pra LER, nao pra escutar */
  .msg.r { background: #14100acc; border: 1px solid #2e2717; border-radius: 10px; padding: 8px 10px; }
  .msg.r .txt { color: var(--ink); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
  .msg.r .who { color: var(--ok); }
  .msg code { background: #1c1710; border-radius: 4px; padding: 0 4px; font-family: var(--font-mono); font-size: .92em; }

  /* ---------- caixa de texto ---------- */
  #sayform { flex: 0 0 auto; display: flex; gap: 8px; width: min(720px, 100%); padding: 0 2px; margin: 6px 0 10px; }
  #say { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.045);
    border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
    color: var(--ink); font-family: inherit; font-size: 16px; /* 16px: abaixo disso o Safari do iPhone da zoom sozinho */
    outline: none; min-height: 46px; transition: border-color .18s ease, background .18s ease; }
  #say::placeholder { color: var(--ink-3); font-size: 14px; }
  #say:focus { border-color: var(--gold); background: rgba(255,255,255,.07); }
  #say:disabled { opacity: .45; }
  #saybtn { flex: 0 0 auto; width: 46px; min-height: 46px; display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid var(--line); border-radius: 12px;
    color: var(--gold-2); transition: border-color .18s ease, color .18s ease; }
  #saybtn svg { width: 18px; height: 18px; }
  #saybtn:disabled { opacity: .45; cursor: default; }

  /* ---------- controles ---------- */
  .controls { display: flex; gap: 16px; align-items: center; justify-content: center; z-index: 2;
    flex-wrap: wrap; flex: 0 0 auto; padding-bottom: 4px; }
  button { font-family: var(--font-sans); font-weight: 500; font-size: 14px; cursor: pointer; }
  .controls button { width: 54px; height: 54px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; background: rgba(40,30,12,.5); border: 1px solid var(--line); color: var(--gold-2);
    transition: all .16s ease; }
  .controls button svg { width: 23px; height: 23px; display: block; }
  .controls button:active { transform: scale(.95); }
  .controls button:disabled { opacity: .45; cursor: default; transform: none; }
  #btn { background: linear-gradient(180deg, var(--gold-2), var(--bronze)); color: #241a06; border-color: transparent;
    box-shadow: 0 6px 22px rgba(201,164,77,.3); }
  #btn.on { background: rgba(224,110,110,.14); color: var(--stop); border: 1px solid #6b3030; box-shadow: none; }
  #mic.muted { color: var(--warn); border-color: #6b4a1f; position: relative; }
  #mic.muted::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: 26px; height: 2.5px; border-radius: 2px; background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg); }
  #gear.on { color: var(--gold-l); border-color: var(--bronze); background: rgba(201,164,77,.12); }

  /* ---------- ajustes ---------- */
  #settings { display: none; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px;
    z-index: 2; width: min(360px, 92vw); flex: 0 0 auto;
    background: #0e0c09cc; border: 1px solid #2a2418; border-radius: 14px; padding: 14px; }
  #settings.open { display: flex; animation: rise .28s cubic-bezier(.2,.7,.2,1) both; }
  .setrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .setrow .hint { color: var(--ink-3); opacity: .7; text-transform: none; letter-spacing: .04em; }
  .segbtn, #model, #voz {
    background: #171310; color: #d8cfb8; border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 14px; font-size: 13px; font-family: var(--font-sans); cursor: pointer; min-height: 40px;
  }
  #model { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
  .segbtn.ativo { border-color: var(--gold); color: var(--gold-l); }
  input[type="range"] { -webkit-appearance: none; appearance: none; width: 150px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--bronze), var(--gold-2)); outline: none; cursor: pointer; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--gold-l); box-shadow: 0 0 10px rgba(232,184,85,.7); cursor: pointer; border: none; }
  input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
    background: var(--gold-l); box-shadow: 0 0 10px rgba(232,184,85,.7); cursor: pointer; border: none; }
  input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
  #speedval, #sensval, #hyscaleval { color: var(--gold-2); min-width: 46px; }

  .aviso { width: min(560px, 92vw); font-size: 11px; color: #6e6858; margin: 8px 0 2px;
    text-align: center; flex: 0 0 auto; }

  /* ---------- modos de visão: normal / limpo (sem texto, orb maior) / foco (só o orb) ---------- */
  /* O orb WebGPU se redimensiona sozinho pelo clientWidth; o orb CSS de fallback
     e o viz 2D escalam por zoom (--os). */
  body.v-limpo #chat, body.v-limpo #sayform, body.v-limpo #events, body.v-limpo #work,
  body.v-limpo #aviso { display: none !important; }
  body.v-limpo .orb-wrap { --os: 1.9; width: min(62vmin, 400px); height: min(62vmin, 400px);
    flex: 0 0 auto; margin: auto 0; max-height: 60dvh; } /* margin auto: orb no meio, controles ficam na base como no normal */
  body.v-foco header, body.v-foco .controls, body.v-foco #settings { display: none !important; }
  body.v-foco .orb-wrap { --os: 2.6; width: min(84vmin, 560px); height: min(84vmin, 560px);
    max-height: none; }
  /* escala NATIVA (nada de zoom/transform: no iPhone o orb CSS e o canvas do
     espectro viravam bitmap esticado e ficavam borrados). Tudo cresce por --os. */
  .orb-wrap { --os: 1; }
  .orb-wrap .orb { width: calc(66px * var(--os)); height: calc(66px * var(--os)); }
  .orb-wrap .orb-glow { width: calc(160px * var(--os)); height: calc(160px * var(--os));
    filter: blur(calc(28px * var(--os))); }
  .orb-wrap #viz { width: calc(200px * var(--os)) !important; height: calc(200px * var(--os)) !important; }
  .orb-wrap .orb-core { filter: blur(calc(4px * var(--os))); }
  .orb-wrap .orb-liquid { filter: url(#liquid) blur(calc(2px * var(--os))); }
  /* o X de sair aparece nos dois modos (limpo e foco); Esc e toque fora também voltam */
  body.v-limpo #focoexit { display: grid; place-items: center; }
  /* no limpo o header continua visível: o X vai pro canto de baixo pra não colidir com LOG */
  body.v-limpo:not(.v-foco) #focoexit { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
  #view.on { color: var(--gold-l); border-color: var(--bronze); background: rgba(201,164,77,.12); }
  #focoexit { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 40;
    display: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    background: rgba(40,30,12,.35); border: 1px solid #2a2418; color: var(--ink-3);
    opacity: .28; transition: opacity .25s ease; }
  #focoexit svg { width: 16px; height: 16px; display: block; margin: auto; }
  #focoexit:hover, #focoexit:focus-visible { opacity: .9; }
  body.v-foco #focoexit { display: grid; place-items: center; }


  /* ---------- /hyper: camada de visuais ao vivo (experimento 11/09/2026) ----------
     Palco com VAGAS (place: baixo | centro | esquerda | direita) e TAMANHOS
     (size: s | m | l | full). O agente escolhe por props; sem props, a tela decide
     pelo formato (larga = lateral direita em l; alta = baixo em m). A tipografia
     usa unidades de contêiner (cqi): cresce junto com a vaga, sem pixel fixo. */
  #hyover { position: fixed; z-index: 30; pointer-events: none; display: grid; place-items: center;
    container-type: inline-size; transition: width .45s cubic-bezier(.2,.8,.2,1), left .45s, right .45s, top .45s, bottom .45s, transform .45s; }
  /* tamanhos (largura da vaga) */
  /* --hys = escala escolhida pelo Hibra no slider (ajustes > visual), multiplica a vaga;
     a tipografia em cqi cresce junto, então um slider só escala tudo */
  body { --hys: 1; --hysv: 1; } /* --hysv = min(escala, 1), calculado no JS (WebKit não resolve min() aninhado com var) */
  /* largura final calculada no JS (--hy-w): WebKit não resolve min(calc(var), calc(var)) */
  body.hy-s #hyover { width: var(--hy-w, min(320px, 80vw)); }
  body.hy-m #hyover { width: var(--hy-w, min(560px, 92vw)); }
  body.hy-l #hyover { width: var(--hy-w, min(820px, 96vw)); }
  body.hy-full #hyover { width: 96vw; }
  body.hy-full .hy-prose, body.hy-full .hy-html { font-size: calc(clamp(15px, 3cqi, 40px) * var(--hys)); }
  body.hy-full .hy-card .hy-title { font-size: calc(min(34vh, 28cqi) * var(--hys)); }
  body.hy-full .hy-stat .hy-value { font-size: calc(min(36vh, 26cqi) * var(--hys)); }
  /* laterais nunca passam de metade da tela, senão cobrem o orb */
  body.hy-esquerda #hyover, body.hy-direita #hyover { max-width: 46vw; }
  /* vagas */
  body.hy-baixo #hyover { left: 50%; bottom: var(--hy-bottom, max(14vh, 96px)); transform: translateX(-50%); }
  body.hy-baixo.v-limpo #hyover { bottom: var(--hy-bottom, max(40vh, 320px)); }
  body.hy-baixo.v-foco #hyover { bottom: max(12vh, 80px); }
  body.hy-centro #hyover { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  body.hy-esquerda #hyover { left: 4vw; top: 50%; transform: translateY(-50%); }
  body.hy-direita #hyover { right: 4vw; top: 50%; transform: translateY(-50%); }
  body.hy-full #hyover { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none;
    height: min(88dvh, 100%); }
  body.hy-full .hy-wrap, body.hy-full .hy { height: 100%; }
  body.hy-full .hy { display: grid; place-items: center; text-align: center;
    background: linear-gradient(180deg, rgba(20,16,9,.985), rgba(10,8,6,.99)); }
  /* em full, o que fica embaixo do painel some (controles e header voltam ao limpar) */
  body.hy-up.hy-full header, body.hy-up.hy-full .controls, body.hy-up.hy-full #settings { opacity: 0; pointer-events: none; transition: opacity .3s; }
  /* em full o teto de fonte e a altura da tela, nao px: um caractere ocupa a tela */
  body.hy-full .hy-card .hy-title { font-size: min(34vh, 28cqi); line-height: 1.05; }
  body.hy-full .hy-card .hy-body { font-size: min(6vh, 3.6cqi); margin-top: 3vh; }
  body.hy-full .hy-stat .hy-value { font-size: min(36vh, 26cqi); }
  body.hy-full .hy-stat .hy-label { font-size: min(5vh, 3cqi); }
  body.hy-full .hy-list li { font-size: min(6vh, 4.4cqi); }
  /* o orb cede palco conforme a vaga (só nos modos limpo/foco; no normal o chat já ocupa) */
  .orb-wrap { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
  body.hy-up.hy-baixo.v-limpo .orb-wrap { transform: translateY(-6vh) scale(.82); }
  /* celular em pé com painel grande (gráfico/tabela): o orb recua mais pra não ser tampado */
  @media (max-width: 720px) { body.hy-up.hy-baixo.hy-l.v-limpo .orb-wrap { transform: translateY(-16vh) scale(.55); } }
  /* painel nunca passa da tela: título gigante rola dentro em vez de estourar por cima do header */
  .hy { max-height: 82dvh; overflow: auto; scrollbar-width: thin; }
  body.hy-baixo #hyover { max-height: calc(100dvh - 120px); }
  .hy-card .hy-title.hy-longo { font-size: clamp(18px, 4.2cqi, 64px); line-height: 1.25; }
  .hy-title.hy-fit, .hy-value.hy-fit { white-space: nowrap; }
  @media (max-width: 520px) { #modolbl { display: none; } }
  body.hy-up.hy-centro.v-limpo .orb-wrap { transform: translateY(-30vh) scale(.45); }
  body.hy-up.hy-esquerda.v-limpo .orb-wrap { transform: translateX(24vw) scale(.9); }
  body.hy-up.hy-direita.v-limpo .orb-wrap { transform: translateX(-24vw) scale(.9); }
  body.hy-up.hy-full .orb-wrap { transform: translate(-40vw, 36vh) scale(.2); opacity: .5; } /* marca d’água em qualquer modo: no normal o orb ficava em cima da tag do cartão */
  body.hy-up.hy-full .orb-wrap { z-index: 31; } /* marca d'agua por cima do painel */

  .hy-wrap { grid-area: 1 / 1; width: 100%; display: grid; place-items: center;
    animation: hyin .42s cubic-bezier(.2,.8,.2,1) both; }
  .hy-wrap.hy-out { animation: hyout .3s ease both; pointer-events: none; }
  @keyframes hyin { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px); }
                    to { opacity: 1; transform: none; filter: none; } }
  @keyframes hyout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(.98); } }
  .hy { pointer-events: auto; background: linear-gradient(180deg, rgba(26,20,10,.965), rgba(12,10,7,.975));
    border: 1px solid rgba(201,164,77,.35); border-radius: clamp(14px, 3cqi, 28px); padding: clamp(14px, 3.6cqi, 48px) clamp(18px, 4.4cqi, 56px);
    box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(232,184,85,.08) inset, 0 0 40px rgba(201,164,77,.12);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); max-width: 100%; width: 100%; }
  .hy-tag { font-family: var(--font-mono); font-size: clamp(10px, 1.9cqi, 22px); letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold); margin-bottom: clamp(6px, 1.4cqi, 16px); }
  .hy-card .hy-title { font-size: clamp(22px, 9cqi, 200px); font-weight: 600; letter-spacing: -.01em;
    color: var(--gold-l); line-height: 1.12; word-break: break-word; }
  .hy-card .hy-body { margin-top: clamp(8px, 1.6cqi, 20px); font-size: clamp(14px, 3.2cqi, 44px); color: var(--ink-2); line-height: 1.45; }
  .hy-list ol { margin: 0; padding: 0 0 0 1.2em; display: flex; flex-direction: column; gap: clamp(6px, 1.2cqi, 16px); }
  .hy-list li { font-size: clamp(15px, 4cqi, 48px); line-height: 1.35; color: var(--ink); animation: hyin .36s ease both; }
  .hy-list li::marker { color: var(--gold); font-family: var(--font-mono); font-size: .7em; }
  .hy-stat { text-align: center; }
  .hy-stat .hy-value { font-size: clamp(40px, 22cqi, 340px); font-weight: 700; letter-spacing: -.03em; white-space: nowrap;
    color: var(--gold-l); line-height: 1; text-shadow: 0 0 30px rgba(232,184,85,.35); }
  .hy-stat .hy-label { margin-top: clamp(8px, 1.6cqi, 20px); font-size: clamp(14px, 3cqi, 40px); letter-spacing: .06em; color: var(--ink-2); }
  .hy-stat .hy-hint { margin-top: 4px; font-family: var(--font-mono); font-size: clamp(11px, 2cqi, 24px); color: var(--ink-3); }
  .hy-timer .hy-value { font-variant-numeric: tabular-nums; }
  .hy-bar { margin: clamp(12px, 2.4cqi, 28px) auto 0; width: 70%; height: clamp(3px, .5cqi, 6px); border-radius: 3px; background: rgba(201,164,77,.18); overflow: hidden; }
  .hy-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--gold-l)); transition: width .25s linear; }
  .hy-timer.hy-done .hy-value { color: var(--ok); text-shadow: 0 0 30px rgba(159,191,127,.45); }
  /* ---- arsenal ---- */
  .hy-prose { line-height: 1.45; color: var(--ink); font-size: clamp(15px, 3cqi, 40px); }
  .hy-prose > :first-child { margin-top: 0; } .hy-prose > :last-child { margin-bottom: 0; }
  .hy-prose h1 { font-size: clamp(30px, 9cqi, 180px); line-height: 1.08; margin: 0 0 .25em; color: var(--gold-l); font-weight: 600; letter-spacing: -.01em; }
  .hy-prose h2 { font-size: clamp(24px, 6cqi, 110px); line-height: 1.12; margin: .3em 0 .2em; color: var(--gold-2); font-weight: 600; }
  .hy-prose h3 { font-size: clamp(18px, 4cqi, 70px); line-height: 1.2; margin: .4em 0 .2em; color: var(--gold); font-weight: 600; }
  .hy-prose h4, .hy-prose h5, .hy-prose h6 { font-size: clamp(14px, 2.6cqi, 40px); margin: .5em 0 .2em; color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); font-weight: 500; }
  .hy-prose p { margin: .35em 0; } .hy-prose strong { color: var(--gold-l); } .hy-prose em { color: var(--ink-2); }
  .hy-prose a { color: var(--gold-2); text-decoration: underline; text-decoration-color: rgba(232,184,85,.45); text-underline-offset: .15em; } .hy-prose a:hover { color: var(--gold-l); }
  .hy-prose ul, .hy-prose ol { margin: .3em 0; padding-left: 1.3em; } .hy-prose li { margin: .18em 0; } .hy-prose li::marker { color: var(--gold); }
  .hy-prose code { background: #1c1710; border-radius: 6px; padding: .05em .35em; font-family: var(--font-mono); font-size: .9em; color: var(--gold-l); }
  .hy-prose pre { background: #100d08; border: 1px solid #2a2418; border-radius: 12px; padding: .8em 1em; overflow-x: auto; font-size: .85em; }
  .hy-prose pre code { background: none; padding: 0; color: var(--ink); }
  .hy-prose blockquote { margin: .4em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--bronze); color: var(--ink-2); }
  .hy-prose hr { border: 0; border-top: 1px solid var(--line); margin: .6em 0; }
  .hy-prose table, .hy-table table { border-collapse: collapse; width: 100%; font-size: clamp(14px, 2.8cqi, 36px); }
  .hy-prose th, .hy-table th { text-align: left; font-family: var(--font-mono); font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding: .4em .7em; border-bottom: 1px solid var(--bronze); }
  .hy-prose td, .hy-table td { padding: .45em .7em; border-bottom: 1px solid #241d10; color: var(--ink); }
  .hy-table tr:last-child td { border-bottom: 0; } .hy-table tbody tr { animation: hyin .36s ease both; }
  .hy-table td:not(:first-child), .hy-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  .hy-prose .katex-display { margin: .5em 0; } .hy-prose .katex { font-size: 1.15em; color: var(--gold-l); }
  .hy-math { text-align: center; } .hy-math .hy-formula .katex-display { margin: 0; } .hy-math .katex { font-size: clamp(26px, 6.5cqi, 120px); color: var(--gold-l); }
  .hy-math .hy-label { margin-top: clamp(8px, 1.6cqi, 20px); font-size: clamp(14px, 3cqi, 40px); color: var(--ink-2); }
  .hy-code pre { margin: 0; font-family: var(--font-mono); font-size: clamp(12px, 2.4cqi, 30px); line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
  .hy-image { text-align: center; } .hy-image img { max-width: 100%; max-height: 70dvh; border-radius: 12px; display: block; margin: 0 auto; }
  .hy-image .hy-label { margin-top: 8px; font-size: clamp(13px, 2.6cqi, 32px); color: var(--ink-2); }
  .hy-chart svg { display: block; width: 100%; height: auto; max-height: 72dvh; }
  .hy-bar-anim { animation: hybar .7s cubic-bezier(.2,.8,.2,1) both; }
  rect.hy-bar-anim { transform-box: fill-box; }
  @keyframes hybar { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
  .hy-line-anim { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: hyline 1.2s ease-out forwards; }
  @keyframes hyline { to { stroke-dashoffset: 0; } }
  .hy-html { font-size: clamp(15px, 3cqi, 40px); line-height: 1.4; }
  .hy-html * { max-width: 100%; }
  /* contain:paint faz o painel ser o bloco-contêiner de position:fixed/absolute:
     HTML do cérebro nunca escapa do cartão nem tampa a tela */
  .hy-html, .hy-md { contain: paint; position: relative; overflow: auto; max-height: 82dvh; }
  @media (prefers-reduced-motion: reduce) { .hy-bar-anim, .hy-line-anim, .hy-table tbody tr { animation: none !important; stroke-dashoffset: 0; } }
  #hytag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--warn); opacity: .8; white-space: nowrap; flex: 0 0 auto; }
  #reload { background: transparent; border: 1px solid var(--line); color: var(--ink-3); border-radius: var(--r); height: 32px; min-height: 32px; width: 44px; display: grid; place-items: center; padding: 0; flex: 0 0 auto; }
  #reload:hover { color: var(--gold); }
  #hydemo { background: transparent; border: 1px solid var(--line); color: var(--ink-3); font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r); padding: 6px 12px; min-height: 32px; }

  /* ---------- responsivo ---------- */
  @media (max-width: 520px) {
    .orb-wrap { width: 176px; height: 176px; margin: 1vh 0; }
    .controls { gap: 14px; }
    .setrow { font-size: 10.5px; }
  }
  @media (max-height: 620px) {
    .orb-wrap { margin: .6vh 0; width: 160px; height: 160px; }
    #chat { min-height: 90px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .orb, .orb-glow, .orb-core { animation: none !important; }
    .orb-liquid { display: none; }
    .orb-wrap, .orb, .msg, #settings.open { transition: none; animation: none; }
  }

  /* ---------- portao de senha (modo classico, acesso remoto) ---------- */
  #gate {
    position: fixed; inset: 0; z-index: 50; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background:
      radial-gradient(50% 40% at 50% 42%, rgba(201,164,77,.12), transparent 70%),
      var(--bg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  #gate.show { display: flex; }
  .gate-card { width: min(360px, 92vw); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .gate-mark { font-family: var(--font-mono); font-size: 13px; letter-spacing: .5em;
    text-transform: uppercase; color: var(--gold-2); text-shadow: 0 0 18px rgba(201,164,77,.6); }
  .gate-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--ink-3); margin-top: -8px; }
  #gate form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 6px; }
  #gatepass {
    font-family: var(--font-sans); font-size: 16px; text-align: center; color: var(--ink);
    background: rgba(30,22,10,.6); border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px 20px; outline: none; transition: border-color .16s ease, box-shadow .16s ease;
  }
  #gatepass::placeholder { color: var(--ink-3); letter-spacing: .04em; }
  #gatepass:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,77,.16); }
  #gatebtn {
    background: linear-gradient(180deg, var(--gold-2), var(--bronze)); color: #241a06;
    box-shadow: 0 6px 22px rgba(201,164,77,.3); font-size: 15px; padding: 13px 26px; border-radius: var(--r);
    border: none; min-height: 48px;
  }
  #gatebtn:disabled { opacity: .5; cursor: default; }
  #gateerr { min-height: 16px; font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: .06em; color: var(--stop); }

  /* 07/10 (QA de layout, ordem de 16/09): */
  /* cartão cheio: o filho da grade não cresce com o título em nowrap; assim o caber() enxerga o estouro e encolhe */
  body.hy-full .hy > *, .hy-card .hy-title { min-width: 0; max-width: 100%; }
  /* tela baixa (celular deitado): o título cheio a 34vh passava da largura */
  @media (max-height: 520px) { body.hy-full .hy-card .hy-title { font-size: min(24vh, 20cqi); } }
  /* marca d'água do orb no cartão cheio vence a regra da vaga centro do modo limpo (no deitado o orb ficava em cima do cartão) */
  body.hy-up.hy-full.hy-centro.v-limpo .orb-wrap, body.hy-up.hy-full.v-limpo .orb-wrap { transform: translate(-40vw, 36vh) scale(.2); opacity: .5; }
  /* letra mínima do cartão: rótulo e cabeçalho de tabela saem de 10px pra 11px */
  .hy-tag { font-size: clamp(11px, 1.9cqi, 22px); }
  .hy-prose th, .hy-table th { font-size: max(11px, .72em); }
  /* foco de teclado visível na caixa de texto */
  #say:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
  /* alvo de toque de 44px no dedo; o desenho continua o mesmo */
  @media (pointer: coarse) {
    .orb-hint { min-height: 44px; }
    .ci { min-height: 44px; }
    .cseg button { min-height: 44px; }
    .cesc input { height: 44px; }
    .hy-cb { position: relative; }
    .hy-cb::after { content: ""; position: absolute; inset: -6px; }
  }
  /* controle de escala: a trilha de 3px era difícil de pegar com o mouse */
  .cesc input { min-height: 24px; }
  /* a caixa do controle cresce pro dedo/mouse, mas a linha desenhada continua com 3px no meio */
  .cesc input { background: linear-gradient(90deg, var(--bronze), var(--gold-2)) center / 100% 3px no-repeat; border-radius: 0; }