/* =============================================================================
 * markets-demo — paleta GLASS DARK + DOURADO/CREME, em sintonia com o resto do
 * site (mesma lógica de .scene/.card no styles.css, linhas 2183+).
 * ============================================================================= */

/* Tokens --md-* expostos no :root pra widgets que vivem FORA do `.markets-demo`
   (ex.: `.caderno-vivo__stage`, que é seção irmã do cubo, não descendente).
   A regra `.markets-demo` abaixo redeclara os mesmos valores no escopo do cubo
   pra preservar o comportamento existente — então não muda nada no cubo. */
:root{
  --md-radius: 16px;
  --md-bg-deep: rgba(14,10,6,.82);
  --md-bg-card: rgba(28,20,12,.72);
  --md-edge: rgba(212,168,87,.26);
  --md-edge-strong: rgba(212,168,87,.55);
  --md-creme: #f7eccd;
  --md-creme-bright: #fcf6df;
  --md-gold: #d4a857;
  --md-gold-bright: #e8c97a;
  --md-muted: rgba(247,236,205,.62);
}

/* Surface clara (calculado por luma da pintura em app.js::applyPintura) — inverte
   os tokens pra widgets fora do cubo ficarem legíveis em pinturas claras (Almond
   Blossoms, Friedrich Wanderer, etc.). NÃO afeta o cubo `.markets-demo`, que tem
   especificidade própria (define os tokens no próprio elemento). */
body[data-surface="light"]{
  --md-bg-deep: rgba(248,242,228,.88);
  --md-bg-card: rgba(238,232,218,.78);
  --md-edge: rgba(20,14,5,.18);
  --md-edge-strong: rgba(20,14,5,.42);
  --md-creme: #1a1410;
  --md-creme-bright: #0d0904;
  --md-gold: #8a5e1f;
  --md-gold-bright: #6b4818;
  --md-muted: rgba(20,14,5,.62);
}

/* Espelho light dos --ib-* do escopo .markets-demo (Norma 1). Os --ib-* são
   superfícies dos cards DENTRO da vitrine; em surface=light invertem pra cards
   claros sobre a face clara (--md-bg-deep light), mantendo o relevo. */
body[data-surface="light"] .markets-demo{
  /* Em pintura clara o CUBO INTEIRO clareia (face + cards), pra combinar com a
     pintura e não destoar — face creme + texto escuro (par casado), em vez de
     face escura com cards claros. */
  --md-bg-deep: rgba(248, 242, 228, 0.88);
  --md-bg-card: rgba(238, 232, 218, 0.78);
  --md-edge: rgba(20, 14, 5, 0.18);
  --md-edge-strong: rgba(20, 14, 5, 0.42);
  --md-creme: #1a1410;
  --md-creme-bright: #0d0904;
  --md-gold: #8a5e1f;
  --md-gold-bright: #6b4818;
  --md-muted: rgba(20, 14, 5, 0.62);
  --ib-surface: rgba(228, 218, 198, 0.96);
  --ib-surface-soft: rgba(218, 208, 188, 0.92);
  --ib-border: rgba(120, 80, 30, 0.45);
  --ib-border-soft: rgba(120, 80, 30, 0.28);
  --ib-text: #1a1410;
  --ib-muted: rgba(20, 14, 5, .62);
  --ib-accent: #8a5e1f;
  /* Frente do flashcard na pintura clara: papel claro + texto escuro (par casado).
     OPACO (sem alpha): a carta da frente tem que TAMPAR a de trás — antes o .98/.94
     deixava o título do card de baixo vazar por trás do de cima. */
  --stack-front-bg: linear-gradient(160deg, rgb(255,251,243), rgb(244,237,223));
  --stack-front-text: #1a1410;
}

/* =========================================================================
   SUPERFÍCIE SÓLIDA — body[data-surface-fill="solid"] (setado por app.js pra
   pinturas "barulhentas": gravuras, mapas de linha fina; classificadas offline
   em ops/busyness/). Opacifica as superfícies que carregam texto pra a textura
   da pintura não vazar atrás dele. Pintura SEM a flag = vidro (inalterado) —
   zero regressão. Cobre: face do cubo (--md-*), cards V3 do cubo (--ib-*) e o
   chrome hardcoded do caderno. (Telos fora do cubo é tratado em v3_iblocks.css.)
   ========================================================================= */
body[data-surface-fill="solid"]{
  --md-bg-deep: rgba(14,10,6,.99);
  --md-bg-card: rgba(28,20,12,.98);
}
body[data-surface="light"][data-surface-fill="solid"]{
  --md-bg-deep: rgba(248,242,228,.99);
  --md-bg-card: rgba(238,232,218,.98);
}
body[data-surface-fill="solid"] .markets-demo{
  --ib-surface: rgba(58,42,24,1);
  --ib-surface-soft: rgba(44,32,18,1);
}
body[data-surface="light"][data-surface-fill="solid"] .markets-demo{
  --ib-surface: rgba(228,218,198,1);
  --ib-surface-soft: rgba(218,208,188,1);
}
/* Chrome do caderno: fundos hardcoded translúcidos -> opacos (o caderno fica
   escuro mesmo em pintura clara — decisão de skin — mas sem textura vazando). */
body[data-surface-fill="solid"] .w-notebook__passage{ background: rgba(20,14,8,.98); }
body[data-surface-fill="solid"] .w-notebook__caderno{ background: rgba(14,10,6,.98); }
body[data-surface-fill="solid"] .w-notebook__menu{ background: rgba(14,10,6,1); }
body[data-surface-fill="solid"] .w-notebook__fake-textarea{ background: rgba(20,14,8,1); }

.markets-demo{
  /* Face do "cubo visual". Como agora não é cubo geométrico real (faces são
     camadas independentes), não tem ampliação por perspective — o tamanho real
     da face é o que aparece. Pode ocupar mais largura útil do wrap. */
  --md-face-w: 1200px;
  --md-face-h: 620px;
  --md-prism-rx: 600px;
  --md-prism-ry: 310px;
  --md-z-back: -600px;
  --md-gap: 12px;
  --md-radius: 16px;

  /* Bg da face um pouco menos opaco que antes (.94 → .82) pra respirar com a
     pintura por trás sem perder legibilidade. */
  --md-bg-deep: rgba(14,10,6,.82);
  --md-bg-card: rgba(28,20,12,.72);
  --md-edge: rgba(212,168,87,.26);
  --md-edge-strong: rgba(212,168,87,.55);
  --md-creme: #f7eccd;
  --md-creme-bright: #fcf6df;
  --md-gold: #d4a857;
  --md-gold-bright: #e8c97a;
  --md-muted: rgba(247,236,205,.62);

  /* Override do --ib-surface no escopo da vitrine: o tema telos canônico usa
     rgba(28,20,12,.82) — quase igual ao --md-bg-deep da face — daí os cards
     ficavam "esmaecidos" sobre a face (baixo contraste). Aqui clareamos +
     opaciamos pra cards ressaltarem como camada acima da face. Outras pessoas
     usando data-theme="telos" fora da vitrine seguem com a paleta default. */
  --ib-surface: rgba(58, 42, 24, 0.96);
  --ib-surface-soft: rgba(44, 32, 18, 0.92);
  --ib-border: rgba(212, 168, 87, 0.45);
  --ib-border-soft: rgba(212, 168, 87, 0.28);

  /* Declaração formal dos tokens cor de TEXTO do tema V3 iblocks (Norma 2).
     Os v3_iblocks normalmente definem em `web/amandaemo_v3/assets/v3_iblocks.css`
     fora do scope dessa landing; declaramos aqui no escopo `.markets-demo`
     pra que slots V3 embedados na vitrine herdem cor coerente com a face. */
  --ib-text: #f7eccd;
  --ib-muted: rgba(247, 236, 205, .62);
  --ib-accent: #d4a857;

  /* Flashcard (stack_flip): a FRENTE é uma "lousa" escura. Tokenizada pra poder
     inverter no surface=light — sem isso o fundo preto ficava FIXO enquanto o
     texto invertia pra escuro, dando "preto-no-preto" ilegível na pintura clara.
     Valores aqui = dark atual (modo escuro fica idêntico); espelho light em
     body[data-surface="light"] .markets-demo. */
  /* OPACO e mais claro que o fundo escuro da prática (#05070f/#0b1024): a carta
     da frente tampa a de trás E lê-se como carta (antes era quase preto-no-preto,
     além de translúcida). */
  --stack-front-bg: linear-gradient(160deg, #2a2013, #1c1409);
  --stack-front-text: var(--md-creme-bright);

  position: relative;
}

/* Cabeçalho da seção: caixa glass clara só atrás do texto (variante do
   .hero-v2__slogan-card). Centralizada, abraça só o conteúdo. */
.markets-demo__head{
  /* Superfície PADRÃO do sistema (igual aos outros cabeçalhos): clareia na
     pintura clara e fica sólida na barulhenta, em vez do cinza-escuro fixo. */
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 14px 28px;
  margin: 0 auto 14px;
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  text-align: center;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.markets-demo__title{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 4.6vmin, 56px);
  line-height: 1.05;
  color: var(--md-creme-bright);
  margin: 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.markets-demo__title em{
  font-style: italic;padding-left:.18em;padding-right:.18em;margin-left:-.18em;margin-right:-.18em;
  background: linear-gradient(120deg, #fbe8b4 0%, var(--md-gold-bright) 50%, var(--md-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--md-gold);
}


/* Stage — perspective pras animações de transição entre faces. Chamariz agora
   ficam no cube-wrap (não no stage), então o padding só precisa abrigar as
   chamariz que ficam em offset negativo da cube-wrap (~38px) + folga. */
.markets-stage{
  position: relative;
  width: 100%;
  perspective: 4000px;
  perspective-origin: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 56px 56px;
  box-sizing: border-box;
}

/* Wrapper do cubo: tamanho fixo igual à face. Chamariz são absolute em offset
   negativo (-38px) — overflow:visible pra elas não serem clipadas. */
.markets-cube-wrap{
  position: relative;
  width: var(--md-face-w);
  height: var(--md-face-h);
  transform-style: preserve-3d;
  overflow: visible;
}

/* "Parece cubo, mas não é cubo." As 6 faces são camadas independentes
   empilhadas em z=0; apenas a ativa fica visível. A transição entre faces é
   uma animação Web API que faz cada face rodar com transform-origin POSICIONADO
   ATRÁS da própria face (no z=-face_w/2 ou -face_h/2 — onde seria o centro
   virtual do cubo). Por isso o movimento parece cubo girando: a face sai pelo
   lado e a nova vem do outro lado, ao invés de "card flip" pelo próprio centro.
   Mas como cada face é independente, o conteúdo sempre fica upright. */
.markets-prism{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.market-face{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--md-bg-deep);
  border: 1px solid var(--md-edge);
  border-radius: var(--md-radius);
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,237,180,.06);
  display: flex;
  flex-direction: column;
  color: var(--md-creme);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.market-face[data-active="true"]{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ====== Chamariz nas 4 bordas — FORA do cube-wrap, no padding do stage ====== */
.market-edge{
  position: absolute;
  z-index: 20;
  /* Cor pela cor GLOBAL do sistema (--surface-*), que acompanha a pintura
     esteja a barra dentro ou fora do cubo: pintura clara -> barra creme + texto
     escuro; escura -> barra escura + texto creme; barulhenta -> sólida. Nunca
     fica escrita na mão, então nunca vira rabinho preto. */
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  color: var(--surface-ink);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 14px;
  box-sizing: border-box;
}
.market-edge:hover{
  background: linear-gradient(135deg, var(--md-gold-bright), var(--md-gold));
  color: #1a1410;
  border-color: transparent;
}
/* Borda piscando durante a "ameaça de giro" — só cor/brilho, sem mexer no
   transform de posicionamento (left/right usam rotate/translate próprios). */
.market-edge.is-teasing{
  animation: md-edge-tease .9s ease-in-out;
}
/* Mouse sobre um iframe de jogo/cena: a aura de fora congelaria na borda, então
   some com ela (o iframe desenha a própria aura por dentro). */
html.md-over-iframe .cursor-aura{ opacity: 0 !important; }
@keyframes md-edge-tease{
  0%,100%{ background: var(--surface-bg); color: var(--surface-ink); border-color: var(--surface-border); box-shadow: none; }
  45%    { background: linear-gradient(135deg, var(--md-gold-bright), var(--md-gold)); color: #1a1410; border-color: transparent; box-shadow: 0 0 18px var(--md-gold-bright); }
}
/* Chamariz posicionadas em relação ao CUBE-WRAP (não ao stage), com offset
   negativo — ficam ANCORADAS na borda do cubo, a uma distância constante,
   independente do tamanho do viewport. Antes o cube ficava centralizado no
   stage e as chamariz nos cantos do stage, deixando "30 km" de gap em
   viewports largos. Agora elas sempre acompanham o cubo. */
.market-edge--top{
  top: -38px; left: 50%; transform: translateX(-50%);
  min-width: 200px; max-width: 60%; height: 28px;
  border-radius: 999px;
}
.market-edge--top:hover{ transform: translateX(-50%) translateY(-2px); }
.market-edge--bottom{
  bottom: -38px; left: 50%; transform: translateX(-50%);
  min-width: 200px; max-width: 60%; height: 28px;
  border-radius: 999px;
}
.market-edge--bottom:hover{ transform: translateX(-50%) translateY(2px); }
/* Verticais com writing-mode */
.market-edge--left{
  left: -38px; top: 50%;
  width: 28px; min-height: 200px; max-height: 60%;
  border-radius: 999px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%) rotate(180deg);
  padding: 12px 0;
}
.market-edge--left:hover{ transform: translateY(-50%) rotate(180deg) translateY(-2px); }
.market-edge--right{
  right: -38px; top: 50%;
  width: 28px; min-height: 200px; max-height: 60%;
  border-radius: 999px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%);
  padding: 12px 0;
}
.market-edge--right:hover{ transform: translateY(-50%) translateX(2px); }
.market-face[data-state="active"]{
  opacity: 1;
}

/* Layout 1 big + 4 mini: 1 widget grande à esquerda (ocupa 70% da largura,
   altura inteira) + 4 thumbnails empilhadas à direita (30% largura, 4 linhas).
   Click numa mini troca de lugar com o big (CSS grid-area faz o reposicionamento). */
.market-face__grid{
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: repeat(4, 1fr);
  gap: var(--md-gap);
  min-height: 0;
  flex: 1;
}

.slot[data-slot-pos="big"]{
  grid-column: 1;
  grid-row: 1 / -1;
}
.slot[data-slot-pos="mini-1"]{ grid-column: 2; grid-row: 1; }
.slot[data-slot-pos="mini-2"]{ grid-column: 2; grid-row: 2; }
.slot[data-slot-pos="mini-3"]{ grid-column: 2; grid-row: 3; }
.slot[data-slot-pos="mini-4"]{ grid-column: 2; grid-row: 4; }

/* Mini-thumbnails: visual compacto. Esconde subtitle/pulse pra reduzir ruído,
   título único linha, body do widget escondido (Fase C trará SVGs fiéis).
   Click vira big. */
.slot[data-slot-pos^="mini-"]{
  cursor: pointer;
  padding: 8px 12px;
  gap: 2px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.slot[data-slot-pos^="mini-"]:hover{
  border-color: var(--md-edge-strong);
  background: rgba(28,20,12,.88);
  transform: translateX(-2px);
}
.slot[data-slot-pos^="mini-"] .slot__subtitle,
.slot[data-slot-pos^="mini-"] .slot__pulse{
  display: none;
}
.slot[data-slot-pos^="mini-"] .slot__title{
  font-size: 22px;
  font-weight: 600;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  color: var(--md-creme);
  margin: 0;
}
.slot[data-slot-pos^="mini-"] .slot__body{
  display: none;
}

/* Mini-preview: SVG fiel do widget aparece SÓ quando slot está mini. No big,
   esconde (porque a visualização principal já tá renderizada no slot__body). */
.slot__mini-preview{
  display: none;
}
.slot[data-slot-pos^="mini-"] .slot__mini-preview{
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  overflow: hidden;
}
.slot__mini-preview svg{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Animações dos mini-SVGs — micro-loops suaves (~2.4s) pra dar sensação de
   "vivo" sem distrair. Cada elemento dentro do SVG usa uma classe .ms-* que
   define qual animação aplicar. */
.slot__mini-preview .ms-pulse,
.slot__mini-preview .ms-pulse-a,
.slot__mini-preview .ms-pulse-b,
.slot__mini-preview .ms-pulse-c{
  animation: ms-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
.slot__mini-preview .ms-pulse-a{ animation-delay: 0s; }
.slot__mini-preview .ms-pulse-b{ animation-delay: .25s; }
.slot__mini-preview .ms-pulse-c{ animation-delay: .5s; }

.slot__mini-preview .ms-slide-x{
  animation: ms-slide-x 3.2s ease-in-out infinite;
}
.slot__mini-preview .ms-bounce{
  animation: ms-bounce 1.8s ease-in-out infinite;
  transform-origin: center;
}
.slot__mini-preview .ms-rotate{
  animation: ms-rotate 6s linear infinite;
}
.slot__mini-preview .ms-rotate-slow{
  animation: ms-rotate 14s linear infinite;
}
.slot__mini-preview .ms-flip-front{
  animation: ms-flip 4s ease-in-out infinite;
  transform-origin: center;
}
.slot__mini-preview .ms-flip-text{
  animation: ms-flip-text 4s ease-in-out infinite;
}
.slot__mini-preview .ms-cursor-blink{
  animation: ms-cursor-blink 1.1s steps(2) infinite;
}
.slot__mini-preview .ms-wave-a{
  animation: ms-wave 1.8s ease-in-out infinite;
}
.slot__mini-preview .ms-wave-b{
  animation: ms-wave 1.8s ease-in-out infinite;
  animation-delay: .3s;
}
.slot__mini-preview .ms-projectile{
  animation: ms-projectile 3.4s ease-in-out infinite;
}
.slot__mini-preview .ms-note-drop{
  animation: ms-note-drop 2.6s linear infinite;
}
.slot__mini-preview .ms-row-cycle-a,
.slot__mini-preview .ms-row-cycle-b,
.slot__mini-preview .ms-row-cycle-c{
  animation: ms-row-cycle 3s ease-in-out infinite;
  stroke-width: .8;
}
.slot__mini-preview .ms-row-cycle-a{ animation-delay: 0s; }
.slot__mini-preview .ms-row-cycle-b{ animation-delay: 1s; }
.slot__mini-preview .ms-row-cycle-c{ animation-delay: 2s; }

@keyframes ms-pulse{
  0%, 100%{ opacity: .55; }
  50%     { opacity: 1; }
}
@keyframes ms-slide-x{
  0%, 100%{ transform: translateX(-12px); }
  50%     { transform: translateX(12px); }
}
@keyframes ms-bounce{
  0%, 100%{ transform: scale(1) translateY(0); }
  50%     { transform: scale(1.06) translateY(-1px); }
}
@keyframes ms-rotate{
  to{ transform: rotate(360deg); }
}
@keyframes ms-flip{
  0%, 40%, 100%{ transform: rotateY(0); }
  60%, 90%    { transform: rotateY(180deg); }
}
@keyframes ms-flip-text{
  0%, 40%, 100%{ opacity: 1; }
  50%, 80%    { opacity: 0; }
}
@keyframes ms-cursor-blink{
  0%, 100%{ opacity: 1; }
  50%     { opacity: 0; }
}
@keyframes ms-wave{
  0%, 100%{ opacity: .25; transform: scaleX(.85); }
  50%     { opacity: 1;   transform: scaleX(1.1); }
}
@keyframes ms-projectile{
  0%   { offset-distance: 0%; transform: translate(0, 0); }
  50%  { transform: translate(0, 0); }
  100% { transform: translate(40px, 24px); }
}
@keyframes ms-note-drop{
  0%   { transform: translateY(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(18px); opacity: 0; }
}
@keyframes ms-row-cycle{
  0%, 100%{ opacity: .3; stroke-width: .6; }
  50%     { opacity: 1;  stroke-width: 1.2; }
}

/* Big: cursor default (não é clicável pra trocar — só os minis abrem) */
.slot[data-slot-pos="big"]{
  cursor: default;
}
.slot[data-slot-pos="big"] .slot__title{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
}
.slot[data-slot-pos="big"] .slot__subtitle{
  font-size: 16px;
  margin-bottom: 4px;
}

/* Slot genérico — overflow STRITAMENTE contido pra widget não vazar */
.slot{
  position: relative;
  background: var(--md-bg-card);
  border: 1px solid var(--md-edge);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;            /* trinca tudo dentro do slot */
  min-height: 0; min-width: 0;
  color: var(--md-creme);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.slot__title{
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  line-height: 1.15;
  color: var(--md-creme-bright);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot__subtitle{
  font-size: 16px;
  color: var(--md-muted);
  margin: 0;
}
.slot__body{ flex: 1; min-height: 0; min-width: 0; position: relative; overflow: hidden; }

.slot__pulse{
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--md-gold);
  box-shadow: 0 0 0 0 rgba(212,168,87,.7);
  animation: slot-pulse 1.8s ease-out infinite;
  z-index: 4;
}
@keyframes slot-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(212,168,87,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(212,168,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,168,87,0); }
}

/* Vitrine fora da tela (classe md-offview posta pelo vigia de visibilidade do
   markets-demo.js): pausa as animações infinitas que ninguém está vendo — a
   bolinha pulsante dos slots e os micro-loops dos mini-SVGs. Ao voltar pra
   tela a classe sai e tudo retoma de onde estava. A raiz sempre tem a classe
   .markets-demo (cubo, face única e mobile), então cobre os três shells. */
.markets-demo.md-offview .slot__pulse{
  animation-play-state: paused;
}
.markets-demo.md-offview .slot__mini-preview *{
  animation-play-state: paused !important;
}

/* Navegação inferior — dots + label do mercado atual */
.markets-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.markets-nav__current{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: var(--md-gold-bright);
  letter-spacing: .005em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  user-select: none;
}
.markets-nav__btn{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--md-edge);
  background: var(--md-bg-card);
  color: var(--md-creme);
  cursor: pointer;
  font-size: 16px;
  display: grid; place-items: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.markets-nav__btn:hover{ background: rgba(20,14,8,.78); border-color: var(--md-edge-strong); transform: translateY(-1px); }
.markets-nav__dots{ display: flex; gap: 7px; }
.markets-nav__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(212,168,87,.30);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.markets-nav__dot:hover{ background: rgba(212,168,87,.55); }
.markets-nav__dot.is-active{
  background: var(--md-gold-bright);
  transform: scale(1.25);
}

/* ============================================================================
 * WIDGETS — Fase 1: jurídico
 * ============================================================================ */

/* ---- kelsen-pyramid: lista hierárquica vertical, hierarquia via border-left dourada ----- */
.w-kelsen{
  display: flex; flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 2px 0;
  justify-content: space-around;
}
.w-kelsen__level{
  position: relative;
  background: rgba(14,10,6,.55);
  border: 1px solid var(--md-edge);
  border-left: 4px solid var(--md-gold);
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--md-creme);
  text-align: left;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hierarquia: border-left mais grossa nos níveis superiores */
.w-kelsen__level[data-pos="0"]{ border-left-width: 6px; }
.w-kelsen__level[data-pos="1"]{ border-left-width: 5px; }
.w-kelsen__level[data-pos="2"]{ border-left-width: 4px; }
.w-kelsen__level[data-pos="3"]{ border-left-width: 3px; }
.w-kelsen__level[data-pos="4"]{ border-left-width: 2px; }

.w-kelsen__level[data-active="true"]{
  background: linear-gradient(145deg, var(--md-gold-bright), var(--md-gold));
  color: #1a1410;
  border-color: transparent;
  border-left-color: #8a5e1f;
  transform: translateX(2px);
}
.w-kelsen__hint{ display: none; }

/* ---- prescription-timeline ----- */
.w-timeline{
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  justify-content: space-around;
  padding: 0 4px;
}
.w-timeline__track{
  position: relative;
  height: 5px;
  background: rgba(212,168,87,.16);
  border-radius: 999px;
}
.w-timeline__fill{
  position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--w-pos, 0%);
  background: linear-gradient(90deg, var(--md-gold-bright), var(--md-gold));
  border-radius: 999px;
  transition: width .08s linear;
}
.w-timeline__mark{
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: var(--md-bg-deep);
  border: 2px solid var(--md-creme);
  border-radius: 50%;
}
.w-timeline__mark[data-hit="true"]{
  background: var(--md-gold);
  border-color: #8a5e1f;
}
.w-timeline__handle{
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  background: linear-gradient(145deg, var(--md-gold-bright), var(--md-gold));
  border: 2px solid #8a5e1f;
  border-radius: 50%;
  left: var(--w-pos, 0%);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
  transition: left .08s linear;
}
.w-timeline__legend{
  display: flex; justify-content: space-between;
  font-size: 16px; color: var(--md-muted);
}
.w-timeline__result{
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--md-creme-bright);
  min-height: 1.4em;
}
.w-timeline__result[data-state="hit"]{ color: #fca5a5; }

/* ---- stack-flip ----- */
.w-stack{
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.w-stack__card{
  position: absolute;
  width: 80%;
  height: 80%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.7,.05,.2,1), opacity .4s ease;
  cursor: pointer;
}
.w-stack__face{
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  backface-visibility: hidden;
  border: 1px solid var(--md-edge);
}
.w-stack__front{
  background: var(--stack-front-bg);
  color: var(--stack-front-text);
  font-family: "Cormorant Garamond", serif;
  /* Escala com o slot: nunca menor que 20px nem maior que 30px; entre isso,
     5vmin acompanha a viewport. "Mandado de Segurança" cabe no mini sem
     ficar minúsculo nem estourar. */
  font-size: clamp(20px, 5vmin, 30px);
  line-height: 1.18;
  font-weight: 700;
}
.w-stack__front-label{ padding: 0 6px; }
.w-stack__hint{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Caveat, cursive;
  font-size: 16px;
  font-weight: 500;
  color: var(--md-gold-bright);
  opacity: .8;
  white-space: nowrap;
}
.w-stack__back{
  /* Dourado de destaque FIXO (não tematizado): a resposta destaca em dourado no
     escuro E no claro. var(--md-gold) invertia pra marrom escuro no surface=light,
     deixando verso escuro com texto escuro. O dourado fixo = exatamente o valor
     dark atual (--md-gold dark é #d4a857), então o modo escuro não muda. */
  background: linear-gradient(160deg, #d4a857, #8a5e1f);
  color: #1a1410;
  /* Mesma filosofia do front: clamp pra ser legível no mini sem estourar.
     Verso tem texto mais longo (definição completa), então range é menor
     que o do front pra caber 2-3 linhas confortavelmente. */
  font-size: clamp(16px, 2.2vmin, 17px);
  line-height: 1.4;
  transform: rotateY(180deg);
  font-weight: 600;
  /* Verso vira flex column pra texto ocupar o miolo e a barra SRS fixar embaixo,
     sem sobrepor o texto. padding-bottom dá folga visual pros 4 botões. */
  justify-content: space-between;
  padding-bottom: 42px;
}
.w-stack__back-text{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* Barra de auto-avaliação SRS (Anki-style: Errei / Difícil / Médio / Fácil).
   Opcional — visitante pode só virar pra próxima carta sem clicar. Aparece só
   no verso (porque tá DENTRO de .w-stack__back), some quando o card volta pra
   frente. Sem persistência: efêmero por design, como o resto da vitrine. */
.w-stack__rate{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  /* minmax(0,1fr) (não o "1fr" = minmax(auto,1fr)): trilhas ENCOLHEM por igual em
     vez de vazar pelo min-content quando a carta é estreita. Sem isso os 4 botões
     somam mais largura que a barra e transbordam — e como o verso tem rotateY(180),
     o transbordo à direita aparecia espelhado À ESQUERDA. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  z-index: 2;
}
.w-stack__rate-btn{
  padding: 5px 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 6px;
  border: 1px solid;
  background: rgba(14,10,6,.55);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.w-stack__rate-btn[data-rate="errei"]   { color: #fca5a5; border-color: rgba(239,68,68,.55); }
.w-stack__rate-btn[data-rate="dificil"] { color: #fdba74; border-color: rgba(249,115,22,.55); }
.w-stack__rate-btn[data-rate="medio"]   { color: #fde68a; border-color: rgba(234,179,8,.55); }
.w-stack__rate-btn[data-rate="facil"]   { color: #86efac; border-color: rgba(34,197,94,.55); }
.w-stack__rate-btn:hover{
  transform: translateY(-1px);
  background: rgba(14,10,6,.75);
}
.w-stack__rate-btn[data-rate="errei"]:hover  { box-shadow: 0 0 0 1px rgba(239,68,68,.6); }
.w-stack__rate-btn[data-rate="dificil"]:hover{ box-shadow: 0 0 0 1px rgba(249,115,22,.6); }
.w-stack__rate-btn[data-rate="medio"]:hover  { box-shadow: 0 0 0 1px rgba(234,179,8,.6); }
.w-stack__rate-btn[data-rate="facil"]:hover  { box-shadow: 0 0 0 1px rgba(34,197,94,.6); }
.w-stack__rate-btn.is-picked[data-rate="errei"]  { background: #ef4444; color: #fff; border-color: #ef4444; }
.w-stack__rate-btn.is-picked[data-rate="dificil"]{ background: #f97316; color: #1a1410; border-color: #f97316; }
.w-stack__rate-btn.is-picked[data-rate="medio"]  { background: #eab308; color: #1a1410; border-color: #eab308; }
.w-stack__rate-btn.is-picked[data-rate="facil"]  { background: #22c55e; color: #052e16; border-color: #22c55e; }

.w-stack__card[data-flipped="true"]{ transform: rotateY(180deg); }
.w-stack__card[data-stack-pos="0"]{ z-index: 4; transform: translateY(0) scale(1) rotateY(var(--flip, 0deg)); }
.w-stack__card[data-stack-pos="1"]{ z-index: 3; transform: translateY(7px) scale(.96); opacity: .75; }
.w-stack__card[data-stack-pos="2"]{ z-index: 2; transform: translateY(14px) scale(.92); opacity: .5; }
.w-stack__card[data-stack-pos="3"]{ z-index: 1; transform: translateY(21px) scale(.88); opacity: .28; }
.w-stack__card[data-flipped="true"][data-stack-pos="0"]{ transform: translateY(0) scale(1) rotateY(180deg); }

/* Slot big — carta ocupa mais área e tipografia escala junto. Sem isso o card
   continua dimensionado pro mini (80%×80%, fontes 12-22px), nadando no espaço
   maior do big. Aqui a carta cresce pra ~92%×88% e fontes ganham clamp() em
   vmin pra acompanhar o viewport. */
.slot[data-slot-pos="big"] .w-stack__card{
  width: 92%;
  height: 88%;
}
.slot[data-slot-pos="big"] .w-stack__face{
  padding: clamp(20px, 2.6vmin, 32px);
  border-radius: 14px;
}
.slot[data-slot-pos="big"] .w-stack__front{
  font-size: clamp(26px, 4.2vmin, 40px);
  line-height: 1.15;
}
.slot[data-slot-pos="big"] .w-stack__back{
  font-size: clamp(16px, 2.1vmin, 20px);
  line-height: 1.45;
  padding-bottom: clamp(48px, 6vmin, 64px);
}
.slot[data-slot-pos="big"] .w-stack__hint{
  font-size: clamp(16px, 1.7vmin, 17px);
  bottom: 14px;
}
.slot[data-slot-pos="big"] .w-stack__rate{
  bottom: clamp(10px, 1.4vmin, 16px);
  left: clamp(10px, 1.4vmin, 16px);
  right: clamp(10px, 1.4vmin, 16px);
  gap: 6px;
}
.slot[data-slot-pos="big"] .w-stack__rate-btn{
  font-size: clamp(16px, 1.5vmin, 16px);
  padding: clamp(8px, 1.1vmin, 12px) clamp(6px, .8vmin, 10px);
  border-radius: 8px;
}

/* Navegação do stack: setas ‹› + contador */
.w-stack__nav{
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--md-bg-deep);
  border: 1px solid var(--md-edge);
  border-radius: 999px;
  padding: 2px 4px;
  z-index: 10;
}
.w-stack__nav-btn{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-creme);
  font-size: 16px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.w-stack__nav-btn:hover{ background: rgba(212,168,87,.22); color: var(--md-gold-bright); }
.w-stack__counter{
  font-size: 16px;
  font-weight: 700;
  color: var(--md-muted);
  min-width: 28px;
  text-align: center;
  font-family: Inter, sans-serif;
}

/* ---- notebook-passage (interativo) ----- */
.w-notebook{
  /* O caderno é um CONTEXTO DE SUPERFÍCIE PRÓPRIO (chrome escuro fixo: passage,
     menu, caixa de resumo). Sua letra deve derivar DESSE fundo escuro, não da
     pintura. Como o caderno fica FORA de .markets-demo, ele herdava os --md-*
     do body[data-surface="light"] — que flipam pra ESCURO em pintura clara e
     deixavam texto preto-sobre-preto (toolbar/resumo invisíveis). Re-fixar a
     paleta escura aqui imuniza o caderno inteiro contra o flip (skins claras,
     ex. pergaminho, redefinem a própria letra escura por cima — bonded pair). */
  --md-bg-deep: rgba(14,10,6,.82);
  --md-bg-card: rgba(28,20,12,.72);
  --md-edge: rgba(212,168,87,.26);
  --md-edge-strong: rgba(212,168,87,.55);
  --md-creme: #f7eccd;
  --md-creme-bright: #fcf6df;
  --md-gold: #d4a857;
  --md-gold-bright: #e8c97a;
  --md-muted: rgba(247,236,205,.62);

  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
  height: 100%;
  min-height: 0;
  position: relative;
}
.w-notebook__passage{
  background: rgba(20,14,8,.62);
  border: 1px solid var(--md-edge);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.55;
  /* Painel é fixo escuro rgba(20,14,8,.62) — texto fica fixo creme pra contraste,
     não adapta via --md-creme (que vira escuro em surface=light e causaria
     cinza-sobre-cinza ilegível). */
  color: #f7eccd;
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
/* <p> herdam regra global `p{color:#4a6181}` (azul) — passage é painel fixo
   escuro, então <p> tem que herdar a cor creme do .w-notebook__passage. */
.w-notebook__passage p{ margin: 0 0 .65em; color: inherit; }
.w-notebook__passage p:last-child{ margin-bottom: 0; }
/* <em> usa --md-creme-bright que vira preto em surface=light. Painel é fixo
   escuro, em tem que ficar creme-brilhante fixo (igual à cor do passage). */
.w-notebook__passage em{ font-style: italic; color: #fcf6df; }
.w-notebook__caderno{
  background: rgba(14,10,6,.66);
  border: 1px solid var(--md-edge);
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: Georgia, "Times New Roman", serif;
  min-height: 0;
  overflow: hidden;
}
.w-notebook__caderno-head{
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--md-creme-bright);
  font-style: italic;
  border-bottom: 1px solid var(--md-edge);
  padding-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.w-notebook__caderno-title{ flex: 0 0 auto; }
.w-notebook__caderno-head-actions{
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.w-notebook__caderno-clear{
  background: transparent;
  border: none;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  font-style: normal;
}
.w-notebook__caderno-clear:hover{ color: var(--md-gold-bright); }

/* ---- Skin picker — 4 bolinhas no header com a cor de cada estética ----- */
.w-notebook__caderno-skins{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--md-edge);
}
.w-notebook__caderno-skin{
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--md-edge-strong);
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: inline-grid; place-items: center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.w-notebook__caderno-skin > span{
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.w-notebook__caderno-skin[data-skin-id="constelacao"] > span{ background: radial-gradient(circle at 30% 30%, #fff 0%, #fff 8%, transparent 9%), radial-gradient(circle at 75% 70%, #ffe9a8 0%, #ffe9a8 12%, transparent 13%), linear-gradient(135deg, #050308 0%, #1a1230 100%); }
.w-notebook__caderno-skin[data-skin-id="pergaminho"]  > span{ background: linear-gradient(135deg, #e8d8b8 0%, #8a6a3a 100%); }
.w-notebook__caderno-skin[data-skin-id="mesa"]        > span{ background: radial-gradient(circle at 50% 50%, #d4a857 0%, #6b3f1c 60%, #2a1a0c 100%); }
.w-notebook__caderno-skin[data-skin-id="trilhos"]     > span{ background: linear-gradient(180deg, #1a0e0a 0%, #2a1a0c 50%, #6a4e3a 100%); }
.w-notebook__caderno-skin:hover{ transform: scale(1.15); }
.w-notebook__caderno-skin[data-active="1"]{
  border-color: var(--md-gold-bright);
  box-shadow: 0 0 0 1.5px rgba(232,201,122,.35), 0 0 0 3px rgba(232,201,122,.18);
}

/* ---- Stats bar — totais de acerto/erro/percentual/streak ----- */
.w-notebook__caderno-stats{
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  color: var(--md-creme);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--md-edge);
  letter-spacing: .01em;
}
.w-notebook__caderno-stats[hidden]{ display: none; }
.w-notebook__caderno-stats__item{
  display: inline-flex; align-items: baseline; gap: 3px;
}
.w-notebook__caderno-stats__icon{
  font-size: 16px;
  line-height: 1;
}
.w-notebook__caderno-stats__item--ok  { color: #8fd07a; }
.w-notebook__caderno-stats__item--err { color: #e08a6e; }
.w-notebook__caderno-stats__item--pct { color: var(--md-creme-bright); }
.w-notebook__caderno-stats__pct-mark{
  font-size: 16px; margin-left: 1px; opacity: .8;
}
.w-notebook__caderno-stats__pct-label,
.w-notebook__caderno-stats__streak-label{
  font-size: 16px;
  font-weight: 500;
  color: var(--md-muted);
  margin-left: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.w-notebook__caderno-stats__item--streak{
  color: var(--md-muted);
  transition: color .18s ease, transform .18s ease;
}
.w-notebook__caderno-stats[data-streak-active="1"] .w-notebook__caderno-stats__item--streak{
  color: #ffb454;
  transform: scale(1.04);
}
.w-notebook__caderno-stats__sep{
  color: var(--md-muted);
  opacity: .5;
}

/* ---- Chip de átomo na entry de questão — identifica o "tema" ao qual a
   questão pertence. Correlação entre átomos é trabalho futuro. ----- */
.w-notebook__entry-atomo{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(212,168,87,.16);
  border: 1px solid rgba(212,168,87,.32);
  color: var(--md-gold-bright);
  font-size: 16px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================================
 * Estéticas (skins) do caderno — 4 variantes pareadas com os 4 onboardings que
 * o user gostou (A constelação, C pergaminho, D mesa, F trilhos). Cada skin
 * "ecoa" o onboarding correspondente. A escolha persiste em localStorage.
 * Não há fallback: JS valida o id antes de aplicar.
 * ============================================================================= */

/* Skin: constelacao (padrão) — eco do onboarding A. Fundo cósmico escuro com
   estrelas brancas pulsantes + accent dourado. Herda a paleta base do caderno
   e adiciona pontos via ::before/::after pra remeter ao céu noturno. */
.w-notebook__caderno[data-skin="constelacao"]{
  position: relative;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(106,18,26,.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 85%, rgba(40,30,90,.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,5,12,.78) 0%, rgba(14,10,6,.66) 100%);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow: hidden;
}
.w-notebook__caderno[data-skin="constelacao"]::before{
  /* Camada de "estrelas" — pontos brancos finos espalhados, com brilho dourado
     em algumas pra remeter ao accent. Não interativo, pointer-events none. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 43% 25%, rgba(232,201,122,.9), transparent 55%),
    radial-gradient(1px 1px at 58% 88%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(232,201,122,.75), transparent 55%),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 8% 92%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 50%, rgba(232,201,122,.6), transparent 55%);
  opacity: .85;
  z-index: 0;
}
.w-notebook__caderno[data-skin="constelacao"] > *{ position: relative; z-index: 1; }

/* Skin: pergaminho — papel sépia envelhecido, manuscrito acadêmico. */
.w-notebook__caderno[data-skin="pergaminho"]{
  /* Pergaminho é a skin CLARA do caderno -> par casado: card claro + tinta
     ESCURA. Re-pina os --md-* aqui (tinta escura) pra TODO elemento da skin
     ficar legível de uma vez, não só os que têm override por-elemento abaixo
     (era isso que deixava abas/SEGUIDOS em creme-sobre-creme = sumindo). */
  --md-creme: #2a1c08;
  --md-creme-bright: #1a1206;
  --md-gold: #6b4818;
  --md-gold-bright: #5a3a10;
  --md-muted: rgba(58,40,16,.7);
  --md-edge: rgba(120,80,30,.42);
  --md-edge-strong: rgba(120,80,30,.62);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,238,200,.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(120,80,30,.18), transparent 55%),
    linear-gradient(160deg, #e9d6b0 0%, #d8c094 50%, #c8a974 100%);
  border: 1px solid rgba(120,80,30,.42);
  box-shadow: inset 0 0 24px rgba(120,80,30,.22), inset 0 0 0 1px rgba(255,250,230,.18);
  color: #3a2810;
  font-family: "Cormorant Garamond", "Charter", Georgia, serif;
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-head{
  color: #2a1c08;
  border-bottom-color: rgba(120,80,30,.32);
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-list{ color: #3a2810; }
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-empty{ color: rgba(58,40,16,.6); }
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__entry{
  background: rgba(255,245,220,.42);
  border-left-color: #8a5e1f;
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__entry-type{ color: #6b4818; }
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__entry-text{ color: #2a1c08; }
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-stats{
  background: rgba(255,245,220,.4);
  border-color: rgba(120,80,30,.32);
  color: #3a2810;
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-stats__item--pct{ color: #2a1c08; }
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-stats__pct-label,
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-stats__streak-label{
  color: rgba(58,40,16,.62);
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__entry-atomo{
  background: rgba(120,80,30,.18);
  border-color: rgba(120,80,30,.4);
  color: #5a3a10;
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-clear,
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-add-afeto{
  color: rgba(58,40,16,.7);
}
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-clear:hover,
.w-notebook__caderno[data-skin="pergaminho"] .w-notebook__caderno-add-afeto:hover{
  color: #6b4818;
  background: rgba(120,80,30,.12);
}

/* Skin: mesa — eco do onboarding D. Superfície de madeira marrom com glow
   dourado central (luz da luminária do estudante). Texto creme, fonte Cormorant. */
.w-notebook__caderno[data-skin="mesa"]{
  background:
    radial-gradient(ellipse at 50% 35%, rgba(212,168,87,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,.45) 0%, transparent 70%),
    linear-gradient(180deg, #3a2818 0%, #2a1a0c 60%, #1a0e08 100%);
  border: 1px solid rgba(212,168,87,.3);
  box-shadow: inset 0 1px 0 rgba(255,237,180,.08), 0 4px 14px rgba(0,0,0,.32);
  color: var(--md-creme);
  font-family: "Cormorant Garamond", Georgia, serif;
}
.w-notebook__caderno[data-skin="mesa"] .w-notebook__caderno-head{
  color: var(--md-creme-bright);
  border-bottom-color: rgba(212,168,87,.32);
}
.w-notebook__caderno[data-skin="mesa"] .w-notebook__caderno-list{ color: var(--md-creme); }
.w-notebook__caderno[data-skin="mesa"] .w-notebook__caderno-empty{ color: var(--md-muted); }
.w-notebook__caderno[data-skin="mesa"] .w-notebook__entry{
  background: rgba(245,233,208,.06);
  border-left-color: var(--md-gold);
}
.w-notebook__caderno[data-skin="mesa"] .w-notebook__entry-type{ color: var(--md-gold-bright); }
.w-notebook__caderno[data-skin="mesa"] .w-notebook__entry-text{ color: var(--md-creme); }
.w-notebook__caderno[data-skin="mesa"] .w-notebook__caderno-stats{
  background: rgba(245,233,208,.06);
  border-color: rgba(212,168,87,.3);
  color: var(--md-creme);
}
.w-notebook__caderno[data-skin="mesa"] .w-notebook__caderno-stats__item--pct{ color: var(--md-creme-bright); }
.w-notebook__caderno[data-skin="mesa"] .w-notebook__entry-atomo{
  background: rgba(212,168,87,.18);
  border-color: rgba(212,168,87,.4);
  color: var(--md-gold-bright);
}

/* Skin: trilhos — eco do onboarding F. Escuro ferroviário com linhas
   perspectivas convergindo (vanishing point central). Texto sépia/creme. */
.w-notebook__caderno[data-skin="trilhos"]{
  background:
    /* Trilhos diagonais convergindo no topo (vanishing point) — feitos com
       4 linhas em gradiente que aparecem só nas bordas escuras. */
    linear-gradient(85deg,  transparent 49%, rgba(212,168,87,.22) 50%, transparent 51%) left/52% 100% no-repeat,
    linear-gradient(95deg,  transparent 49%, rgba(212,168,87,.22) 50%, transparent 51%) right/52% 100% no-repeat,
    linear-gradient(78deg,  transparent 49%, rgba(212,168,87,.10) 50%, transparent 51%) left/52% 100% no-repeat,
    linear-gradient(102deg, transparent 49%, rgba(212,168,87,.10) 50%, transparent 51%) right/52% 100% no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(212,168,87,.16) 0%, transparent 35%),
    linear-gradient(180deg, #0a0608 0%, #050304 100%);
  border: 1px solid rgba(212,168,87,.28);
  box-shadow: inset 0 0 22px rgba(0,0,0,.5);
  color: var(--md-creme);
  font-family: "Cormorant Garamond", Georgia, serif;
}
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__caderno-head{
  color: var(--md-creme-bright);
  border-bottom-color: rgba(212,168,87,.28);
}
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__caderno-list{ color: var(--md-creme); }
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__caderno-empty{ color: var(--md-muted); }
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__entry{
  background: rgba(15,8,6,.6);
  border-left-color: var(--md-gold);
}
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__entry-type{ color: var(--md-gold-bright); }
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__entry-text{ color: var(--md-creme); }
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__caderno-stats{
  background: rgba(15,8,6,.65);
  border-color: rgba(212,168,87,.28);
  color: var(--md-creme);
}
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__caderno-stats__item--pct{ color: var(--md-creme-bright); }
.w-notebook__caderno[data-skin="trilhos"] .w-notebook__entry-atomo{
  background: rgba(212,168,87,.16);
  border-color: rgba(212,168,87,.36);
  color: var(--md-gold-bright);
}
.w-notebook__caderno-list{
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 16px;
  color: var(--md-creme);
}
.w-notebook__caderno-empty{
  color: var(--md-muted);
  font-style: italic;
  text-align: center;
  margin: auto 0;
  font-size: 16px;
}

/* Menu flutuante de marcação */
.w-notebook__menu{
  position: absolute;
  display: flex;
  gap: 3px;
  background: rgba(14,10,6,.96);
  border: 1px solid var(--md-edge-strong);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(-50%, -100%) translateY(-6px);
  white-space: nowrap;
}
.w-notebook__menu[hidden]{ display: none; }
/* quando o trecho está colado no topo e o menu não cabe ACIMA dele, positionMenu
   (markets-demo.js) marca is-below: o menu vira pra BAIXO da seleção em vez de
   subir pra fora da tela. */
.w-notebook__menu.is-below{ transform: translate(-50%, 0) translateY(6px); }
.w-notebook__menu-btn{
  background: transparent;
  border: none;
  color: var(--md-creme);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 16px;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 3px;
  transition: background .12s ease, color .12s ease;
}
.w-notebook__menu-btn:hover{ background: rgba(212,168,87,.18); color: var(--md-gold-bright); }

/* Highlights inline — 4 tipos */
.w-notebook .study-highlight{
  background: rgba(253, 230, 138, .25);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--md-creme-bright);
  cursor: pointer;
}
.w-notebook .study-highlight[data-study-type="nota"]{
  background: rgba(165, 243, 252, .22);
  text-decoration-color: #0891b2;
}
.w-notebook .study-highlight[data-study-type="resumo"]{
  background: rgba(245, 208, 254, .22);
  text-decoration-color: #c026d3;
}
.w-notebook .study-highlight[data-study-type="reescrita"]{
  background: rgba(217, 249, 157, .22);
  text-decoration-color: #65a30d;
}
/* Resumo/reescrita aplicados in-line: o trecho original é substituído pelo
   texto novo. Estilo mais saturado (não é só "destaque", é "substituição"),
   sem sublinhado wavy (não é grifo). Tooltip nativo (title=) mostra o
   original; clicar restaura. */
.w-notebook .study-replaced{
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 4px;
  font-style: italic;
  color: var(--md-creme-bright);
  cursor: help;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.w-notebook .study-replaced[data-study-type="resumo"]{
  background: rgba(232, 121, 249, .22);
  border: 1px dashed rgba(232, 121, 249, .55);
}
.w-notebook .study-replaced[data-study-type="reescrita"]{
  background: rgba(163, 230, 53, .18);
  border: 1px dashed rgba(163, 230, 53, .55);
}
.w-notebook .study-replaced::before{
  content: attr(data-glyph) " ";
  font-style: normal;
  font-weight: 700;
  opacity: .7;
  margin-right: 1px;
}

/* Animação "voa pro caderno" */
@keyframes notebook-fly{
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: var(--fly-to) scale(.6); opacity: 0; }
}
.w-notebook__flyer{
  position: absolute;
  z-index: 9;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 16px;
  white-space: nowrap;
  background: rgba(253,230,138,.4);
  border: 1px solid var(--md-edge);
  color: var(--md-creme-bright);
  animation: notebook-fly .6s cubic-bezier(.5,0,.3,1) forwards;
}

.w-notebook__entry{
  border-left: 3px solid var(--md-gold);
  padding: 4px 6px 4px 8px;
  background: rgba(20,14,8,.5);
  border-radius: 0 6px 6px 0;
}
/* Animation só em entries criadas por ação do user. Entries seed (ghosts da
   cfg.marks) nascem no estado final estático — se animassem, body[data-offscreen]
   pausa antes de completar e trava em opacity:0 (frame inicial da keyframe). */
.w-notebook__entry:not(.is-seed){
  animation: notebook-entry-in .35s ease-out both;
}
@keyframes notebook-entry-in{
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.w-notebook__entry-type{
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--md-gold-bright);
  font-family: Inter, sans-serif;
  font-style: normal;
  margin-bottom: 2px;
}
.w-notebook__entry-text{
  font-size: 16px;
  font-family: Georgia, serif;
  color: var(--md-creme);
}

/* Dica visual sutil pra primeiro uso */
.w-notebook__hint{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Caveat, cursive;
  font-size: 16px;
  color: var(--md-gold-bright);
  pointer-events: none;
  white-space: nowrap;
  background: rgba(14,10,6,.85);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--md-edge);
  opacity: .85;
}

/* ---- sort-3col ----- */
.w-sort{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  height: 100%;
}
.w-sort__pool{
  display: flex; flex-wrap: wrap; gap: 5px;
  min-height: 28px;
  align-content: flex-start;
}
.w-sort__cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.w-sort__col{
  background: rgba(14,10,6,.55);
  border: 1px dashed var(--md-edge);
  border-radius: 7px;
  padding: 5px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 70px;
}
.w-sort__col-head{
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--md-gold-bright);
  text-align: center;
}
.w-sort__chip{
  background: rgba(20,14,8,.78);
  border: 1px solid var(--md-edge);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--md-creme);
  cursor: grab;
  transition: transform .5s cubic-bezier(.7,.05,.2,1), opacity .3s ease, background .3s ease;
  white-space: nowrap;
}
.w-sort__chip[data-state="flying"]{ z-index: 5; }
.w-sort__chip[data-state="placed"]{
  background: linear-gradient(145deg, var(--md-gold-bright), var(--md-gold));
  border-color: transparent;
  color: #1a1410;
  cursor: default;
}
.w-sort__chip[data-state="wrong"]{
  background: linear-gradient(145deg, #fca5a5, #dc2626);
  border-color: transparent;
  color: #1a1410;
  cursor: default;
}
.w-sort__chip:active{ cursor: grabbing; }

/* ---- compare-matrix ----- */
.w-compare{
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.w-compare__table{
  width: 100%; border-collapse: collapse;
  font-size: 16px;
  flex: 1;
  color: var(--md-creme);
  table-layout: fixed;
}
.w-compare__table th,
.w-compare__table td{
  padding: 3px 4px;
  border-bottom: 1px solid var(--md-edge);
  text-align: left;
  word-break: break-word;
  line-height: 1.25;
}
.w-compare__table thead th{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
  color: var(--md-gold-bright);
  background: rgba(14,10,6,.55);
}
.w-compare__table tbody tr{ transition: background .35s ease; }
.w-compare__table tbody tr[data-active="true"]{
  background: linear-gradient(90deg, rgba(232,201,122,.22) 0%, transparent 100%);
}
.w-compare__row-label{
  font-weight: 800;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: var(--md-creme-bright);
  width: 22%;
}

/* ============================================================================
 * Responsivo — face grande no desktop, encolhe via media quando viewport aperta
 * ============================================================================ */
@media (max-width: 1380px){
  .markets-demo{
    --md-face-w: 1080px;
    --md-face-h: 620px;
    --md-prism-rx: 540px;
    --md-prism-ry: 310px;
    --md-z-back: -540px;
  }
}

@media (max-width: 1220px){
  .markets-demo{
    --md-face-w: 960px;
    --md-face-h: 620px;
    --md-prism-rx: 480px;
    --md-prism-ry: 310px;
    --md-z-back: -480px;
  }
}

@media (max-width: 1100px){
  .markets-demo{
    --md-face-w: 840px;
    --md-face-h: 640px;
    --md-prism-rx: 420px;
    --md-prism-ry: 320px;
    --md-z-back: -420px;
  }
}

@media (max-width: 980px){
  .markets-demo{
    --md-face-w: 700px;
    --md-face-h: 560px;
    --md-prism-rx: 350px;
    --md-prism-ry: 280px;
    --md-z-back: -350px;
  }
  .market-face__grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 620px){
  .markets-demo{
    --md-face-w: 92vw;
    --md-face-h: 760px;
    --md-prism-rx: 46vw;
    --md-prism-ry: 380px;
    --md-z-back: -46vw;
  }
  .markets-demo__head{ max-width: calc(100% - 24px); padding: 10px 18px; }
  .market-face{ padding: 12px; }
  .market-face__grid{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, minmax(110px, 1fr));
  }
  .w-notebook{
    grid-template-columns: 1fr;
    grid-template-rows: 1.4fr 1fr;
  }
}

/* ============================================================================
 * SLOT: v3_iblock — wrapper pros .ib-block REAIS do AmandaEmo V3 dentro do card.
 *
 * O CSS canônico dos blocos vive em web/amandaemo_v3/assets/v3_iblocks*.css
 * (carregado lazy pelo markets-demo.js). Aqui só restringimos a escala/clipping
 * pro bloco caber numa célula 3×2 da face do cubo sem vazar nem virar bagunça.
 * ============================================================================ */
/* Tema "telos" oficial dos widgets V3 — vive em web/amandaemo_v3/assets/v3_iblocks.css
   sob `[data-theme="telos"]` (junto com `[data-theme="dark"]`). Aqui na vitrine
   só ativamos: o body já tem `data-theme="telos"` aplicado no index.html, e
   todos os componentes V3 (.ib-block, .ib-card, .ib-btn, .ib-chip, inputs, etc)
   usam `var(--ib-*)` no default — então mudar as vars dispara o tema sem
   precisar override por componente. Outras pessoas embeddando V3 conseguem o
   mesmo skin com `<body data-theme="telos">`.
   Específico da vitrine: SVGs do V3 hardcodam #334155/#64748b (slate); repinta. */
.slot--v3_iblock svg text{ fill: var(--ib-text); }
.slot--v3_iblock svg line[stroke="#334155"]{ stroke: var(--ib-text); }
.slot--v3_iblock svg line[stroke="#64748b"]{ stroke: var(--ib-muted); }
.slot--v3_iblock .ib-draggable[data-state="placed"],
.slot--v3_iblock .ib-token[data-state="placed"]{
  background: var(--ib-accent);
  color: #1a1410;
  border-color: var(--ib-accent);
}

/* --------------------------------------------------------------------------
 * Tema dos widgets de física / química / biologia DENTRO da vitrine.
 * Esses add-ons (projectile_motion, equation_balancer, genetic_cross) pintam
 * painéis em `white` e texto escuro na mão — invisível/destoante sobre a pintura
 * escura. Aqui remapeamos pros tokens --ib-* (a vitrine define-os por superfície
 * clara/escura), então funciona nos dois fundos sem depender de [data-theme].
 * Escopo .slot--v3_iblock = só a vitrine; páginas de átomo seguem intactas.
 * -------------------------------------------------------------------------- */
/* Geometria — na vitrine é demo: tira o cabeçalho "Fórmulas vivas" e o botão
   "Minimizar" (chrome que só faz sentido no material) e deixa as fórmulas
   subirem, sem o usuário precisar pensar em como mexer. */
.slot--v3_iblock .ib-geometry-panel-head{ display: none; }

/* Física — lançamento oblíquo */
.slot--v3_iblock .ib-projectile{ flex-direction: column; }
.slot--v3_iblock .ib-projectile-controls label{ color: var(--ib-text); }
.slot--v3_iblock .ib-projectile-readout,
.slot--v3_iblock .ib-projectile-task{
  background: var(--ib-surface-soft);
  color: var(--ib-text);
  border-color: var(--ib-border);
}
.slot--v3_iblock .ib-projectile-task *{ color: var(--ib-text); }
/* Céu do oblíquo adaptado ao tema. O canvas é transparente (o JS faz clearRect);
   quem pinta o "céu" é este background. No escuro vira um céu noturno que combina
   com a pintura; no claro volta ao azul-céu. O texto desenhado DENTRO do canvas
   herda esta `color` (v3_iblocks_physics.js lê getComputedStyle(canvas).color). */
.slot--v3_iblock .ib-projectile-canvas{
  background: linear-gradient(180deg, #0c1733 0%, #2a4576 92%);
  color: var(--ib-text);
  border-color: var(--ib-border);
}
body[data-surface="light"] .slot--v3_iblock .ib-projectile-canvas{
  background: linear-gradient(180deg, #bfdbfe 0%, #ffffff 80%);
  color: #1f2937;
}
/* Oblíquo como tela dominante (slot BIG): o canvas cresce o máximo possível MAS
   limitado pela ALTURA, pra sobrar espaço pros controles + leitura + tarefa
   embaixo — assim o bloco inteiro CABE no painel, sem nada vazar pra fora. */
.slot[data-slot-pos="big"].slot--v3_iblock .ib-projectile{
  height: 100%;
  justify-content: flex-start;
  gap: 6px;
}
.slot[data-slot-pos="big"].slot--v3_iblock .ib-projectile-canvas{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 66%;
  flex: 0 0 auto;
}

/* Química — balanceamento de equações */
.slot--v3_iblock .ib-eqbal-unbalanced,
.slot--v3_iblock .ib-eqbal-form{
  background: var(--ib-surface-soft);
  color: var(--ib-text);
  border-color: var(--ib-border);
}
.slot--v3_iblock .ib-eqbal-formula{ color: var(--ib-text); }
.slot--v3_iblock .ib-eqbal-species input{
  background: var(--ib-surface);
  color: var(--ib-text);
  border-color: var(--ib-border);
}
.slot--v3_iblock .ib-eqbal-count-table td{
  background: var(--ib-surface);
  color: var(--ib-text);
}

/* Biologia — cruzamento / tabela de Punnett */
.slot--v3_iblock .ib-gencross-parent{
  background: var(--ib-surface);
  color: var(--ib-text);
  border-color: var(--ib-border);
  font-size: 16px;
}
.slot--v3_iblock .ib-gencross-parent small{ color: var(--ib-muted); font-size: 16px; }
.slot--v3_iblock .ib-gencross-punnett{ background: transparent; }
.slot--v3_iblock .ib-gencross-punnett th,
.slot--v3_iblock .ib-gencross-punnett td{ color: var(--ib-text); }
.slot--v3_iblock .ib-gencross-punnett thead th{ color: #fff; } /* sobre verde forte */
.slot--v3_iblock .ib-gencross-punnett tbody tr th{ color: #14210f; } /* sobre verde claro */
.slot--v3_iblock .ib-gencross-cell{
  background: var(--ib-surface) !important;
  color: var(--ib-text) !important;
  border-color: var(--ib-border);
}
.slot--v3_iblock .ib-gencross-cell.ib-gencross-ok{
  background: color-mix(in srgb, #16a34a 30%, var(--ib-surface)) !important;
}
.slot--v3_iblock .ib-gencross-cell.ib-gencross-fail{
  background: color-mix(in srgb, #dc2626 30%, var(--ib-surface)) !important;
}
.slot--v3_iblock .ib-gencross-ratios{
  background: var(--ib-surface-soft);
  color: var(--ib-text);
  border-color: var(--ib-border);
}
/* Caixa de resultado começa vazia — só aparece quando tem conteúdo (depois de
   Conferir). Sem isso, fica um retângulo marrom vazio embaixo dos botões. */
.slot--v3_iblock .ib-gencross-ratios:empty{ display: none; }

/* LEGIBILIDADE no modo escuro da vitrine: os VALORES das fórmulas
   (.ib-math-token / .ib-result-term) usam var(--ink) no motor, que aqui resolve
   pra azul-marinho escuro → some no fundo escuro. Os operadores já usam
   var(--ib-text) (que a vitrine adapta: creme no escuro, escuro no claro), então
   alinhamos os valores à mesma cor adaptativa. `:not(.hidden)` preserva o estado
   "preencha a lacuna" (pílula própria). Escopo só na vitrine — o motor (páginas
   de átomo) fica intacto. */
.slot--v3_iblock .ib-math-token:not(.hidden){ color: var(--ib-text); }
/* EXCEÇÃO: o token da variável ATIVA ganha fundo pastel CLARO (--ib-accent-soft).
   Aí o creme do --ib-text some (claro no claro). Como esse fundo é sempre claro
   em qualquer tema, fixamos o texto em escuro pra ficar legível (era a "caixinha
   branca" da geometria, tanto na vitrine normal quanto na do escrevente). */
.slot--v3_iblock .ib-math-token.is-active{ color:#17324f; }

/* PISO 16px nos rótulos do gráfico da geometria (eixos, x/y, lados a/b/c). No
   gerador são font-size 10–13 em unidades do SVG (mexer lá afeta as páginas de
   átomo); aqui subimos por CSS só na vitrine. Testado: não estoura, não colide. */
.slot--v3_iblock [data-ib-type="geometry_explorer"] svg text{ font-size: 16px; }

/* Rótulos dentro dos MINIS de pré-visualização: subidos ao MÁXIMO que NÃO quebra
   (achado por busca medida — estouro/colisão no navegador). Os valores diferem
   porque cada desenho tem folga diferente:
   - F=ma (slot--stack_flip): folga grande → chega a 16.
   - joguinho A/B/C/D (slot--game_live): aperta acima de 11.
   - Mendel AA/Aa (data-slot=slot4): aperta acima de 11.
   - geometria-mini (slot1, a²+b²): já no limite, NÃO sobe — por isso o seletor do
     Mendel é por data-slot, pra não pegar a geometria-mini junto. */
.slot--stack_flip .slot__mini-preview svg text{ font-size: 16px; }
.slot--game_live .slot__mini-preview svg text{ font-size: 11px; }
.slot[data-slot="slot4"] .slot__mini-preview svg text{ font-size: 11px; }

/* "Modo vitrine" pros slots V3 — esconde tudo que vem de fora do widget
   (título/chip duplicados que o slot já tem, controles de resposta, feedback,
   enunciados longos) e deixa SÓ a visualização principal centralizada,
   ocupando toda a área do slot. Pra landing isso é exatamente o que importa:
   o gráfico/trilho/widget VIVO sem o overhead de UI de exercício. */
.slot--v3_iblock .slot__body{
  /* Scroll não é mais necessário aqui: attachSlotFit (markets-demo.js) aplica
     transform:scale<1 em runtime quando o widget é maior que o slot, garantindo
     que nada vaze visualmente. overflow:hidden corta qualquer pixel residual. */
  overflow: hidden;
  padding: 2px;
}

/* Instrução curta acima do widget (injetada por mountV3IBlock pra widgets
   sem pergunta natural). Discreta, italic, dourado claro. */
.slot__hint{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--md-gold-bright);
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.slot--v3_iblock .ib-block{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--md-creme);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.slot--v3_iblock .ib-block.ib-error{ color: #ff8a8a; font-size: 16px; }

/* Esconde APENAS metadados redundantes (título do widget já está no .slot__title
   acima; meta-chips de dificuldade/categoria são internos do gerador). Tudo que
   é ENUNCIADO, PERGUNTA, INSTRUÇÃO, CONTROLE PRINCIPAL fica visível — sem isso
   o usuário não entende o que cada widget faz na vitrine. Feedback de resposta
   também esconde (não é vitrine, é exercício). Modais escondem (são overlays). */
.slot--v3_iblock .ib-head,
.slot--v3_iblock .ib-chip,
.slot--v3_iblock .ib-meta,
.slot--v3_iblock .ib-difficulty,
.slot--v3_iblock .ib-tag,
.slot--v3_iblock .ib-mode-chip,
.slot--v3_iblock .ib-concept-modal,
.slot--v3_iblock .ib-feedback,
.slot--v3_iblock .ib-pedagogical-goal,
.slot--v3_iblock .ib-block > h2,
.slot--v3_iblock .ib-block > h3,
.slot--v3_iblock .ib-body > h2,
.slot--v3_iblock .ib-body > h3{
  display: none !important;
}

/* .ib-body centraliza a visualização principal e ocupa todo o espaço.
   A regra é genérica — overrides por widget (ex: classification_sorter logo
   abaixo) ajustam onde a centralização não cabe. */
.slot--v3_iblock .ib-body{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.slot--v3_iblock .ib-body > *{
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}
/* classification_sorter — MODO VITRINE.
 *
 * Template do widget V3 (literal, de mock_clean.html):
 *   .ib-body
 *     .ib-card-grid
 *       .ib-card           (pool de items — primeiro filho, "Itens")
 *       .ib-dropzone[*N]   (uma por categoria)
 *     .ib-actions          (botão Conferir)
 *
 * Layout vitrine (slot estreito não comporta 3+ colunas de tamanho usável):
 *   ┌──────────────┬──────────────┐
 *   │              │  Dropzone 1  │
 *   │    Itens     ├──────────────┤
 *   │              │  Dropzone 2  │
 *   │              ├──────────────┤
 *   │              │  Dropzone N  │
 *   └──────────────┴──────────────┘
 *   ┌────── Conferir ─────────┐
 *
 * Pool ocupa a coluna esquerda inteira (todas as rows); dropzones empilham
 * verticalmente à direita. Conferir embaixo, separado. Tudo ocupa altura
 * total via .ib-card-grid { flex: 1 } — elimina faixa vazia. */
.slot--v3_iblock .ib-classification_sorter .ib-body{
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 10px;
}
.slot--v3_iblock .ib-classification_sorter .ib-card-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  /* rows EXPLÍCITAS (não grid-auto-rows): só assim o `grid-row: 1 / -1` do pool
     consegue esticar pela altura toda — `-1` ignora rows implícitas. Sem isto a
     dropzone encolhia pro tamanho do <h4> (~40px), virando um rótulo minúsculo
     cercado de vão morto, e o alvo de drop ficava do tamanho da letrinha. Com
     rows explícitas + align-items:stretch, cada dropzone vira um RETÂNGULO cheio
     (1fr da altura) onde dá pra soltar o item em qualquer ponto. O nº de
     categorias varia (2 a 4), então ajustamos a contagem de rows conforme
     quantas dropzones existem (a 1ª linha é a default; :has cobre 3 e 4). */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  flex: 1;
  min-height: 0;
}
/* 3 dropzones => 4 filhos (pool + 3); 4 dropzones => 5 filhos. */
.slot--v3_iblock .ib-classification_sorter .ib-card-grid:has(> :nth-child(4)){
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.slot--v3_iblock .ib-classification_sorter .ib-card-grid:has(> :nth-child(5)){
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
/* Pool de items: coluna esquerda, span de todas as rows da grid. */
.slot--v3_iblock .ib-classification_sorter .ib-card-grid > .ib-card{
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  /* nowrap: a pilha NÃO quebra pro lado. Sem isto, em coluna+wrap a palavra
     "Itens" (flex 1 0 100% = 100% da altura) ocupava a coluna inteira e os
     itens vazavam pra uma 2ª coluna à direita, espremidos e cortados. */
  flex-wrap: nowrap;
  gap: 6px;
  overflow: auto;
  min-height: 0;
}
.slot--v3_iblock .ib-classification_sorter .ib-card-grid > .ib-card h4{
  font-size: 16px;
  margin: 0 0 4px;
  /* altura natural (o motor deixa 100% da altura, que empurrava os itens pro
     lado). Assim "Itens" fica só no topo e os itens empilham embaixo. */
  flex: 0 0 auto;
}
.slot--v3_iblock .ib-classification_sorter .ib-card-grid > .ib-card .ib-draggable{
  margin: 0;
  font-size: 16px;
  padding: 6px 8px;
  /* O motor deixa o cartão `width:auto` (cresce do tamanho do texto numa linha
     só); item longo passava da coluna e era cortado na direita ("...proces").
     width:100% + min-width:0 (cartão é flex item, e flex item não encolhe
     abaixo do conteúdo sem min-width:0) faz o cartão ocupar a coluna inteira e
     o texto QUEBRAR LINHA em vez de vazar. box-sizing pra largura contar o padding. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
/* Dropzones: coluna direita, empilhadas (fluxo natural na grid). */
.slot--v3_iblock .ib-classification_sorter .ib-card-grid > .ib-dropzone{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}
.slot--v3_iblock .ib-classification_sorter .ib-card-grid > .ib-dropzone h4{
  font-size: 16px;
  margin: 0 0 4px;
  flex-shrink: 0;
}
.slot--v3_iblock .ib-classification_sorter .ib-card-grid > .ib-dropzone .ib-draggable{
  font-size: 16px;
  padding: 5px 7px;
  margin: 3px 0;
}
.slot--v3_iblock .ib-classification_sorter .ib-actions{
  justify-content: center;
  flex-shrink: 0;
}

/* venn_diagram_lab — MODO VITRINE.
 *
 * Template do widget V3 (literal, de mock_clean.html):
 *   .ib-body
 *     div > p                  (prompt/enunciado)
 *     .ib-venn-operation       (Operação: A ∩ B)
 *     .ib-venn-legend          (Não selecionado / Selecionado / Correta / Incorreta)
 *     .ib-venn-wrap > svg      (diagrama)
 *     .ib-venn-legend-note     (instrução textual)
 *     .ib-region-selected      (status: "Nenhuma região selecionada")
 *     .ib-actions              (Conferir região / Limpar)
 *
 * Layout vitrine — grid 2 colunas: texto/UI à esquerda, SVG do Venn à direita
 * spans todas as rows. Slot landscape (≈840×520 no big) comporta isso bem;
 * no mini o slot__mini-preview já tem SVG estático separado, esse override
 * NÃO se aplica. */
.slot--v3_iblock .ib-venn_diagram_lab .ib-body{
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 6px 14px;
  align-items: center;
  height: 100%;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-body > *{
  grid-column: 1;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-venn-wrap{
  grid-column: 2 !important;
  grid-row: 1 / 99 !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-venn-wrap svg{
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-body > div:first-child p{
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-venn-operation{
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-venn-legend{
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  font-size: 16px;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-venn-legend-note{
  font-size: 16px;
  font-style: italic;
  opacity: .85;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-region-selected{
  font-size: 16px;
  font-weight: 600;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-actions{
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-start;
}
.slot--v3_iblock .ib-venn_diagram_lab .ib-actions .ib-btn{
  font-size: 16px;
  padding: 6px 10px;
}

/* flowchart_decision — MODO VITRINE.
 *
 * Template do widget V3 (hydrateFlow em v3_iblocks.js:1675-1777):
 *   .ib-body
 *     .ib-flow-layout
 *       .ib-flow-history [data-flow-tree]
 *         strong.ib-flow-column-title "Perguntas"
 *         button.ib-flow-step[*]
 *         div.ib-flow-current-question
 *       .ib-flow-node
 *         button.ib-flow-back
 *         button.ib-flow-answer-step[*]
 *         strong.ib-flow-column-title "Escolha a resposta..."
 *         .ib-flow-options > button.ib-btn[*]
 *         OU .ib-flow-result
 *
 * Estende o flow-layout pra preencher altura toda do slot (sem faixa vazia)
 * e calibra tipografia pro slot big. */
.slot--v3_iblock .ib-flowchart_decision .ib-flow-layout{
  width: 100%;
  height: 100%;
  /* quando a Conclusão é longa (ex.: "Não use crase. Não há fusão de
     preposição + artigo."), o conteúdo passava da altura do slot e era CORTADO
     (o carrossel tem overflow-y:hidden) — a resposta final sumia embaixo da
     borda. Deixar rolar POR DENTRO faz o final ficar sempre alcançável, sem
     encolher fonte. No estado inicial (cabe) isto é inócuo. */
  overflow-y: auto;
  min-height: 0;
}
.slot--v3_iblock .ib-flowchart_decision .ib-flow-current-question{
  font-size: clamp(16px, 1.8vmin, 18px);
  line-height: 1.4;
  font-weight: 600;
}
.slot--v3_iblock .ib-flowchart_decision .ib-flow-column-title{
  font-size: clamp(16px, 1.4vmin, 16px);
}
.slot--v3_iblock .ib-flowchart_decision .ib-flow-step,
.slot--v3_iblock .ib-flowchart_decision .ib-flow-answer-step{
  font-size: clamp(16px, 1.3vmin, 16px);
}
.slot--v3_iblock .ib-flowchart_decision .ib-flow-options{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.slot--v3_iblock .ib-flowchart_decision .ib-flow-options .ib-btn{
  font-size: clamp(16px, 1.5vmin, 16px);
  padding: 8px 16px;
  min-width: 100px;
}
.slot--v3_iblock .ib-flowchart_decision .ib-flow-result{
  font-size: clamp(16px, 1.6vmin, 16px);
  line-height: 1.45;
}
/* Feedback visual nos itens depois de "Conferir": o JS do hydrateSorter
   aplica .ok/.no nos .ib-draggable, mas o CSS canônico do AmandaEmo nunca
   pintou essas classes (e ainda tem um override com !important pra .ib-draggable
   em dark/telos). Aqui escopamos pra vitrine e usamos !important + .ok/.no
   pra superar a especificidade do override do canônico. Verde pra correto,
   vermelho pra errado — mantém legibilidade no fundo escuro do tema telos. */
.slot--v3_iblock .ib-draggable.ok{
  background: color-mix(in srgb, #059669 26%, var(--ib-surface)) !important;
  border-color: #34d399 !important;
  color: var(--md-creme-bright) !important;
}
.slot--v3_iblock .ib-draggable.no{
  background: color-mix(in srgb, #dc2626 26%, var(--ib-surface)) !important;
  border-color: #f87171 !important;
  color: var(--md-creme-bright) !important;
}
/* SVGs do widget se ajustam ao slot mantendo proporção (todos os widgets V3
   usam preserveAspectRatio="xMidYMid meet" no SVG, padrão CSS). */
.slot--v3_iblock svg{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
/* Wrappers dos widgets V3 (ex: .ib-concept, .ib-number-line, .ib-venn) que
   contêm SVG: ocupar 100% mas sem força width/height pra não distorcer. */
.slot--v3_iblock .ib-concept,
.slot--v3_iblock .ib-number-line,
.slot--v3_iblock .ib-venn,
.slot--v3_iblock .ib-projectile,
.slot--v3_iblock .ib-graph-explorer,
.slot--v3_iblock .ib-concept-map,
.slot--v3_iblock .ib-periodic-table,
.slot--v3_iblock .ib-molecule-3d,
.slot--v3_iblock .ib-equation-balancer{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/* ============================================================================
 * SLOT: game_live — iframe lazy do jogo, criado só quando a face fica ativa
 * ============================================================================ */
.slot--game_live .slot__body{
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
.w-game-live{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.w-game-live__shell{
  flex: 1;
  position: relative;
  min-height: 0;
  background: #0a0a12;
  overflow: hidden;
}
.w-game-live__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.w-game-live__placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  grid-auto-flow: row;
  color: var(--md-muted);
  font-size: 16px;
  pointer-events: none;
}
.w-game-live__spinner{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(212,168,87,.25);
  border-top-color: var(--md-gold);
  animation: w-game-spin .9s linear infinite;
}
@keyframes w-game-spin{ to { transform: rotate(360deg); } }
/* Fica na FAIXA abaixo do jogo, nunca por cima dele: flutuando no canto ele
   tapava o texto da atividade (a última tarefa da cena 3D, a lista de partes). */
.w-game-live__fullscreen{
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 4px 6px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(212,168,87,.4);
  color: var(--md-gold-bright);
  font-size: 16px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(4px);
}
.w-game-live__fullscreen:hover{
  background: rgba(0,0,0,.75);
  color: #fff;
}

/* CELULAR: pôster do jogo (abre em tela cheia ao tocar). Preenche a caixinha do
   carrossel; capa de fundo + véu pra legibilidade + botão de play + título/CTA. */
.w-game-live--poster{ height: 100%; }
.w-game-live__poster{
  position: relative; display: block; width: 100%; height: 100%;
  text-decoration: none; color: #fff; overflow: hidden; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 18%, rgba(40,30,64,.95), rgba(8,8,18,.98));
}
.w-game-live__poster-cover{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.w-game-live__poster-veil{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,6,14,.36) 0%, rgba(6,6,14,.18) 42%, rgba(6,6,14,.82) 100%);
}
.w-game-live__poster-play{
  position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%);
  width: 66px; height: 66px; display: grid; place-items: center;
  border-radius: 50%; font-size: 26px; line-height: 1; padding-left: 4px;
  color: #1a1206; background: linear-gradient(135deg, var(--md-gold-bright,#fff6da), var(--md-gold,#e8c477));
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 6px rgba(232,196,119,.18);
}
.w-game-live__poster:active .w-game-live__poster-play{ transform: translate(-50%,-50%) scale(.94); }
.w-game-live__poster-meta{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px;
}
.w-game-live__poster-title{ font: 700 18px/1.2 var(--md-font, Inter, system-ui, sans-serif); color: #fff; }
.w-game-live__poster-cta{
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 6px; padding: 6px 12px; border-radius: 999px;
  font: 600 16px/1 var(--md-font, Inter, system-ui, sans-serif);
  color: #1a1206; background: linear-gradient(135deg, var(--md-gold-bright,#fff6da), var(--md-gold,#e8c477));
}

/* ============================================================================
 * Mascote no notebook — pequeno overlay no canto, sem competir com o caderno
 * ============================================================================ */
.w-notebook__mascote{
  position: absolute;
  top: 4px; right: 4px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  z-index: 3;
  opacity: .9;
  pointer-events: none;
}
.w-notebook{ position: relative; }

/* ============================================================================
 * Demo animada do caderno vivo — cursor fake, overlay de seleção, balão da
 * mascote. Coreografia toda em JS (markets-demo.js → runDemoSequence). Os
 * elementos abaixo são puramente visuais; pointer-events:none pra não atrapalhar
 * a interação real do widget quando a animação termina ou é interrompida.
 * ============================================================================ */
.w-notebook__fake-cursor{
  position: absolute;
  top: 0; left: 0;
  width: 22px;
  height: 28px;
  z-index: 12;
  pointer-events: none;
  transform: translate(-9999px, -9999px);
  transition: opacity .25s ease;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.w-notebook__fake-cursor[data-visible="1"]{ opacity: 1; }
.w-notebook__fake-cursor[data-clicking="1"]{
  transform-origin: 4px 4px;
}
.w-notebook__fake-cursor svg{ width: 100%; height: 100%; display: block; }

/* Pulso curto no cursor ao "clicar" — onda concêntrica saindo do ponto. */
.w-notebook__fake-cursor::after{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 2px solid var(--md-gold-bright);
  opacity: 0;
  pointer-events: none;
}
.w-notebook__fake-cursor[data-clicking="1"]::after{
  animation: fake-cursor-click .35s ease-out;
}
@keyframes fake-cursor-click{
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Overlay de "seleção" — pintado linha a linha sobre cada client-rect do range.
   Reproduz visual da seleção nativa do browser, mas sem disparar selectionchange
   (o que dispararia o menu real fora de hora). */
.w-notebook__demo-selection{
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: rgba(124, 175, 255, .32);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .18s ease, width .25s cubic-bezier(.5,0,.3,1);
}
.w-notebook__demo-selection[data-on="1"]{ opacity: 1; }

/* Balão da gata-juíza pra quando o visitante interrompe a demo. Estilo HQ:
   fundo claro, borda preta grossa, setinha apontando PRA BAIXO em direção à
   mascote (que fica no canto superior direito do widget). O balão fica ACIMA
   do widget (top negativo) — gato fala de baixo, balão flutua em cima. */
.w-notebook__demo-balloon{
  position: absolute;
  bottom: calc(100% + 10px);
  right: -140px;
  max-width: 260px;
  z-index: 14;
  background: #fdf6e3;
  border: 2.5px solid #1a1208;
  border-radius: 22px;
  padding: 14px 18px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  color: #1a1208;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.w-notebook__demo-balloon[data-visible="1"]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Cauda do balão: triângulo apontando pra baixo onde a mascote fica.
   Usamos dois pseudos pra obter contorno (preto fora + creme dentro). */
.w-notebook__demo-balloon::before,
.w-notebook__demo-balloon::after{
  content: "";
  position: absolute;
  right: 36px;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
.w-notebook__demo-balloon::before{
  bottom: -18px;
  border-top: 18px solid #1a1208;
}
.w-notebook__demo-balloon::after{
  bottom: -13px;
  border-top: 16px solid #fdf6e3;
}
.w-notebook__demo-balloon__text{
  margin: 0 0 10px;
  font-weight: 500;
}
.w-notebook__demo-balloon__btn{
  background: #1a1208;
  color: #fdf6e3;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.w-notebook__demo-balloon__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* CTA permanente pra retomar a demo. Vive no canto inferior direito da stage,
   aparece quando a demo é interrompida OU termina naturalmente, e persiste
   até a pessoa clicar (re-roda do zero). Estilo dark casando com a interface
   do widget — não compete com o balão da gata.

   Sem fade-in (display:none → flex direto): em browsers que pausam transitions
   em background tab o CTA ficaria preso em opacity:0, invisível. Aparece
   instantâneo, some natural junto com o clear/restart. */
.w-notebook__demo-replay-cta{
  position: absolute;
  /* Padrão: logo abaixo da mascote pequena (48x48 ancorada em top:4 / right:4).
     translateX(50%) centra a CTA no eixo horizontal da mascote. */
  top: 60px;
  right: 28px;
  transform: translateX(50%);
  z-index: 13;
  background: rgba(20,14,8,.94);
  border: 1px solid var(--md-edge-strong);
  border-radius: 999px;
  color: var(--md-creme-bright);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.w-notebook__demo-replay-cta[data-visible="1"]{
  display: inline-flex;
}
.w-notebook__demo-replay-cta:hover{
  background: rgba(212,168,87,.18);
  color: var(--md-gold-bright);
  transform: translateY(-1px);
}

/* Durante a demo, o passage não deixa selecionar texto de verdade — evita que
   o cursor real do user dispare selectionchange e abra o menu real por cima
   da nossa coreografia. JS remove o atributo quando a demo termina/é abortada. */
.w-notebook[data-demo-running="1"] .w-notebook__passage{
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* Textarea fake — caixinha que sai do trecho recém-marcado pra simular o
   campo de input do produto real (aluno.js: "Síntese do átomo, com suas
   palavras." etc). Cursor entra dentro e digita letra a letra. */
.w-notebook__fake-textarea{
  position: absolute;
  z-index: 11;
  background: rgba(20,14,8,.96);
  border: 1px solid var(--md-edge-strong);
  border-radius: 10px;
  padding: 8px 10px 38px;
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 260px;
  max-width: 380px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.w-notebook__fake-textarea[data-visible="1"]{
  opacity: 1;
  transform: translateY(0);
}
.w-notebook__fake-textarea__label{
  display: block;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--md-gold-bright);
  margin-bottom: 4px;
}
.w-notebook__fake-textarea__body{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--md-creme);
  min-height: 36px;
  white-space: pre-wrap;
  word-break: break-word;
}
.w-notebook__fake-textarea__caret{
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--md-gold-bright);
  vertical-align: -2px;
  margin-left: 1px;
  animation: caret-blink .85s steps(2, start) infinite;
}
@keyframes caret-blink{
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.w-notebook__fake-textarea__save{
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  color: #1a1208;
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  cursor: pointer;
}

/* Botão +afeto no header do caderno — sempre visível enquanto a demo roda,
   pra coreografia clicar nele sem precisar de seleção de trecho. */
.w-notebook__caderno-add-afeto{
  background: transparent;
  border: 1px dashed var(--md-edge-strong);
  color: var(--md-muted);
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  font-style: normal;
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 6px;
}
.w-notebook__caderno-add-afeto:hover{
  color: var(--md-gold-bright);
  border-color: var(--md-gold);
}

/* Quiz overlay — substitui visualmente o passage quando entra o step de
   questão. enunciado + 4 alternativas + feedback (✓/✗) com a estética do
   feedback real do aluno.js (renderQuizHtml). */
/* Quiz agora vive abaixo do widget (não é mais overlay sobre o passage) — a
   pessoa vê texto + caderno + pergunta ao mesmo tempo, e a pergunta FICA
   visível após o feedback pra ela ler com calma e entender o erro. */
.w-notebook__quiz{
  flex: 0 0 auto;
  background: rgba(20,14,8,.78);
  border: 1px solid var(--md-edge);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.5,0,.3,1), opacity .25s ease, padding .35s ease;
}
.w-notebook__quiz[hidden]{ display: none; }
.w-notebook__quiz[data-visible="1"]{
  max-height: 360px;
  opacity: 1;
}
/* Quiz é painel fixo escuro rgba(20,14,8,.78) — todas as cores internas
   travadas em creme/dourado fixos pra não virarem escuro em surface=light. */
.w-notebook__quiz__num{
  font-family: Inter, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #e8c97a;
}
.w-notebook__quiz__stem{
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  color: #fcf6df;
}
.w-notebook__quiz__opts{
  display: flex; flex-direction: column; gap: 5px;
}
.w-notebook__quiz__opt{
  display: flex; align-items: flex-start; gap: 6px;
  background: rgba(14,10,6,.66);
  border: 1px solid var(--md-edge);
  border-radius: 6px;
  padding: 6px 9px;
  font-family: Georgia, serif;
  font-size: 16px;
  color: #f7eccd;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.w-notebook__quiz__opt-letter{
  font-weight: 800;
  color: #e8c97a;
  min-width: 14px;
}
.w-notebook__quiz__opt[data-state="picked-wrong"]{
  background: rgba(220,90,90,.18);
  border-color: rgba(220,90,90,.7);
  color: #ffd0d0;
}
.w-notebook__quiz__opt[data-state="picked-correct"],
.w-notebook__quiz__opt[data-state="correct"]{
  background: rgba(120,200,120,.16);
  border-color: rgba(120,200,120,.6);
  color: #d3f5d3;
}
.w-notebook__quiz__feedback{
  font-family: Georgia, serif;
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(14,10,6,.5);
  border-left: 3px solid var(--md-gold);
  color: #f7eccd;
  opacity: 0;
  transition: opacity .25s ease;
}
.w-notebook__quiz__feedback[data-visible="1"]{ opacity: 1; }
.w-notebook__quiz__feedback[data-state="wrong"]{ border-left-color: #dc5a5a; }
.w-notebook__quiz__feedback[data-state="correct"]{ border-left-color: #78c878; }
.w-notebook__quiz__save{
  align-self: flex-end;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  color: #1a1208;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.w-notebook__quiz__save[data-visible="1"]{ opacity: 1; }

/* Tipos de entry novos: afeto + questão. Cor da barra lateral varia
   conforme o tipo, casando com a paleta dos highlights do passage. */
.w-notebook__entry[data-entry-tipo="afeto"]{
  border-left-color: #d97757;
}
.w-notebook__entry[data-entry-tipo="questao"]{
  border-left-color: #78c878;
}
.w-notebook__entry[data-entry-tipo="questao"][data-correct="false"]{
  border-left-color: #dc5a5a;
}
.w-notebook__entry-veredito{
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  font-family: Inter, sans-serif;
  margin-right: 5px;
  vertical-align: 1px;
}
.w-notebook__entry-veredito[data-state="correct"]{ color: #78c878; }
.w-notebook__entry-veredito[data-state="wrong"]{ color: #dc5a5a; }

/* ============================================================================
 * Caderno vivo — section dedicada (fora do cubo), demonstração full do
 * widget de marcação/anotação. Ocupa 100dvh, com headline + widget centralizado.
 * ============================================================================ */
/* Cabeçalho do caderno-vivo: caixa glass clara só atrás do título — mesma
   estética de `.markets-demo__head`. Centralizada, abraça só o conteúdo. */
.caderno-vivo__head{
  /* Superfície PADRÃO do sistema (mesma dos outros cabeçalhos). */
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 14px 28px;
  margin: 0 auto clamp(20px, 3.5vh, 40px);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  text-align: center;
  width: max-content;
  max-width: calc(100% - 24px);
}
.caderno-vivo__title{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 4.6vmin, 56px);
  line-height: 1.05;
  color: var(--md-creme-bright);
  margin: 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.caderno-vivo__title em{
  font-style: italic;padding-left:.18em;padding-right:.18em;margin-left:-.18em;margin-right:-.18em;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--md-gold);
}
.caderno-vivo__stage{
  background: var(--md-bg-deep);
  border: 1px solid var(--md-edge);
  border-radius: var(--md-radius);
  padding: 24px;
  max-width: 1080px;
  margin: 0 auto;
  min-height: clamp(420px, 55vh, 560px);
  box-shadow: 0 28px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,237,180,.08);
  position: relative;
  color: var(--md-creme);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.caderno-vivo__stage .w-notebook{
  flex: 1 1 auto;
  min-height: 280px;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.caderno-vivo__stage .w-notebook__passage{
  font-size: 16px;
  line-height: 1.65;
  padding: 18px 22px;
}
/* Homes de subdomínio (body[data-nicho]): fonte maior no caderno — o texto é
   curto e cabe folgado. Escopado pra NÃO mexer na home generalista. */
body[data-nicho] .caderno-vivo__stage .w-notebook__passage{
  font-size: 18.5px;
  line-height: 1.7;
}
body[data-nicho] .caderno-vivo__stage .w-notebook__caderno-list{
  font-size: 16px;
}
.caderno-vivo__stage .w-notebook__caderno{
  padding: 14px;
}
.caderno-vivo__stage .w-notebook__caderno-head{
  font-size: 18px;
}
.caderno-vivo__stage .w-notebook__caderno-list{
  font-size: 16px;
}
.caderno-vivo__stage .w-notebook__caderno-empty{
  font-size: 16px;
}
.caderno-vivo__stage .w-notebook__hint{
  font-size: 16px;
  bottom: 14px;
}
.caderno-vivo__stage .w-notebook__mascote{
  width: 140px;
  height: 140px;
  top: -10px;
  right: -160px;
  opacity: 1;
}
/* Na stage a mascote é grande e fica fora do widget (right:-160).
   A CTA acompanha — centrada horizontalmente no eixo da gata, logo abaixo dela.
   right:-90px = mesmo eixo X do centro da mascote (right:-160 + 140/2).
   top:150px = mascote bottom (-10 + 140 = 130) + 20px de respiro. */
.caderno-vivo__stage .w-notebook__demo-replay-cta{
  top: 150px;
  right: -90px;
}

/* =========================================================================
   CADERNO GLOBAL — 3 estados (inline / mini / open)
   O painel `.w-notebook__caderno` ganha .w-notebook__caderno--global e é
   reparentado pro <body> (fixed) quando você sai da seção do caderno. Estados
   controlados por data-mode (setado no JS em setupGlobalCaderno).
   ========================================================================= */

/* Carrega o fix de paleta concorrente pra cá: reparentado ao body, o caderno
   sai de `.w-notebook` e perderia os --md-* re-fixados lá (texto preto-sobre-
   preto em pintura clara). Replicamos os mesmos valores nos estados de body.
   O bloco surface-fill="solid" já mira `.w-notebook__caderno` direto, então
   continua valendo sem depender de `.markets-demo`. */
.w-notebook__caderno--global[data-mode="mini"],
.w-notebook__caderno--global[data-mode="open"]{
  --md-bg-deep: rgba(14,10,6,.82);
  --md-bg-card: rgba(28,20,12,.72);
  --md-edge: rgba(212,168,87,.26);
  --md-edge-strong: rgba(212,168,87,.55);
  --md-creme: #f7eccd;
  --md-creme-bright: #fcf6df;
  --md-gold: #d4a857;
  --md-gold-bright: #e8c97a;
  --md-muted: rgba(247,236,205,.62);
}

/* ---- MINI: lançador no canto inferior direito ---- */
.w-notebook__caderno--global[data-mode="mini"]{
  position: fixed;
  right: 22px;
  bottom: 48px;  /* sobe um pouco pra não cobrir o tradutor (PT), que fica em bottom:8px */
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  z-index: 1200;
}
/* em mini só o lançador aparece */
.w-notebook__caderno--global[data-mode="mini"] > *:not(.w-notebook__caderno-launcher){ display: none !important; }
/* o lançador aparece DESDE O INÍCIO (decisão do dono). Quando vazio, só esconde a
   bolinha de contagem (some o "0") — ver .w-notebook__caderno-launcher__count[data-empty]. */
.w-notebook__caderno-launcher__count[data-empty="1"]{ display: none; }

/* ---- OPEN: gaveta deslizando da direita ---- */
.w-notebook__caderno--global[data-mode="open"]{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  height: 100dvh;
  padding: 14px;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--md-edge-strong);
  box-shadow: -26px 0 64px rgba(0,0,0,.52);
  overflow: hidden;
  z-index: 1200;
  animation: cadDrawerIn .34s cubic-bezier(.4,0,.2,1);
  /* Base sólida ATRÁS do gradiente do skin: a gaveta flutua sobre QUALQUER
     seção, então não pode ser translúcida (o skin "constelação" é .66/.78 e
     deixava a página vazar). Longhand background-color fica sob o background-
     image do skin — skin claro (pergaminho, opaco) cobre; escuro preenche a
     folga. Em surface-fill="solid" a regra de lá (mais específica) assume. */
  background-color: rgba(12, 8, 4, .975);
}
/* Só slide — sem animar opacity. Se a animação não rodar (reduced-motion,
   aba oculta, throttle), o estado de repouso continua OPACO e legível em vez
   de uma gaveta translúcida vazando a página atrás. */
@keyframes cadDrawerIn{
  from{ transform: translateX(42px); }
  to{ transform: translateX(0); }
}
.w-notebook__caderno--global[data-mode="open"] .w-notebook__caderno-list{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.w-notebook__caderno--global[data-mode="open"] .w-notebook__caderno-launcher{ display: none; }

/* ---- INLINE: volta a ser a 2ª coluna; esconde cromo de página ---- */
.w-notebook__caderno--global[data-mode="inline"] .w-notebook__caderno-launcher,
.w-notebook__caderno--global[data-mode="inline"] .w-notebook__caderno-close{ display: none; }

/* ---- Lançador (a "face" do estado mini) ---- */
.w-notebook__caderno-launcher{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30,22,13,.97), rgba(14,10,6,.97));
  border: 1px solid var(--md-edge-strong);
  box-shadow: 0 14px 38px rgba(0,0,0,.52);
  color: var(--md-creme-bright);
  cursor: pointer;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  transition: transform .2s ease, box-shadow .2s ease;
}
.w-notebook__caderno-launcher:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.62);
}
.w-notebook__caderno-launcher__face{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--md-gold);
  flex: 0 0 auto;
}
.w-notebook__caderno-launcher__count{
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--md-gold);
  color: #1a1208;
  font: 700 16px/1 Inter, system-ui, sans-serif;
  font-style: normal;
}
.w-notebook__caderno-launcher[data-pulse="1"]{ animation: cadLauncherPulse .62s ease; }
@keyframes cadLauncherPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.16); }
  100%{ transform: scale(1); }
}

/* ---- Botão fechar (estado open) ---- */
.w-notebook__caderno-close{
  background: none;
  border: none;
  color: var(--md-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.w-notebook__caderno-close:hover{ color: var(--md-gold-bright); }

/* ---- Abas de filtro (área de erros = "Questões") ---- */
.w-notebook__caderno-tabs{
  display: flex;
  gap: 4px;
  margin: 2px 0 5px;
}
.w-notebook__caderno-tab{
  flex: 1 1 0;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(212,168,87,.07);
  border: 1px solid transparent;
  color: var(--md-muted);
  font: 600 16px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.w-notebook__caderno-tab:hover{ color: var(--md-creme); }
.w-notebook__caderno-tab[data-active="1"]{
  color: var(--md-creme-bright);
  border-color: var(--md-edge);
  background: rgba(212,168,87,.16);
}
.w-notebook__caderno-list[data-filter="marcacoes"] .w-notebook__entry[data-entry-tipo="questao"]{ display: none; }
.w-notebook__caderno-list[data-filter="questoes"] .w-notebook__entry:not([data-entry-tipo="questao"]){ display: none; }

/* ---- Flyer "soft landing" (cubo/flashcard -> lançador) ---- */
.w-notebook__flyer--global{
  position: fixed;
  z-index: 1300;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--md-gold, #d4a857);
  color: #1a1208;
  font: 700 16px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  pointer-events: none;
  white-space: nowrap;
  animation: cadFlyGlobal .76s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cadFlyGlobal{
  0%{ transform: translate(0,0) scale(1); opacity: 0; }
  14%{ opacity: 1; }
  100%{ transform: var(--fly-to) scale(.38); opacity: 0; }
}

/* Abaixo de 1100 px a página empilha em uma coluna só e o conteúdo passa a
   ocupar a largura inteira, então o lançador deitado (133 px com a palavra
   "Caderno") cobria cartão e link. Aqui ele fica só com a face redonda: a
   mesma função, um quarto da área. Acima de 1100 px nada muda. */
@media (max-width: 1100px){
  .w-notebook__caderno--global[data-mode="mini"]{ right: 8px; }
  .w-notebook__caderno-launcher{ padding: 6px; gap: 0; }
  .w-notebook__caderno-launcher__txt{ display: none; }
  .w-notebook__caderno-launcher__count{ position: absolute; top: -4px; right: -4px; }
  .w-notebook__caderno--global[data-mode="mini"] .w-notebook__caderno-launcher{ position: relative; }
}

/* Em telas estreitas a gaveta ocupa quase tudo e o lançador encolhe um toque. */
@media (max-width: 560px){
  .w-notebook__caderno-launcher{ font-size: 16px; padding: 6px; }
  .w-notebook__caderno-launcher__face{ width: 36px; height: 36px; }
}

/* Teor da questão dentro da ficha (vindo dos jogos). Texto inteiro, sem corte. */
.w-notebook__entry-enunciado{
  font-size: 16px;
  line-height: 1.4;
  color: var(--md-creme);
  opacity: .85;
  margin: 3px 0 4px;
}