.mv { --mv-paper: #f4efe5; --mv-card: #fffaf0; --mv-ink: #211b16; --mv-soft: #675f56; --mv-line: rgba(33, 27, 22, 0.14); --mv-bronze: #98601f; --mv-bronze-light: #dbb65c; --mv-night: #0b0e17; --mv-night-2: #151b2b; --mv-night-3: #1c2438; --mv-cream: #f7f8fc; --mv-ouro: #ffd166; --mv-ouro-2: #ffe29a; --mv-serif: "Fraunces", Georgia, serif; --mv-sans: "Manrope", sans-serif; --mv-mao: "Patrick Hand", "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive; --mv-hud: rgba(11, 14, 23, 0.78); --mv-hud-line: rgba(255, 255, 255, 0.16); --mv-hud-ink: #f7f8fc; --mv-hud-soft: rgba(247, 248, 252, 0.66); --mv-painel-w: min(380px, 44%); }
.mv { display: flex; flex-direction: column; gap: 14px; container: mv / inline-size; font-family: var(--mv-sans); color: var(--mv-ink); line-height: 1.55; }
.mv[data-modo="gaveta"] { --mv-paper: var(--bg-alt, #14110d); --mv-card: var(--panel, rgba(20, 17, 13, 0.82)); --mv-ink: var(--text, #efe9dd); --mv-soft: var(--muted, #97907f); --mv-line: var(--border, rgba(239, 233, 221, 0.18)); --mv-bronze: var(--accent, #c99a52); --mv-bronze-light: var(--accent-2, #dbb06a); --mv-serif: var(--display, Georgia, serif); --mv-sans: var(--sans, sans-serif); }
.mv * { box-sizing: border-box; }
.mv [hidden] { display: none !important; }
.mv-area-picker { max-width: 100%; min-height: 44px; font: inherit; padding: 8px 14px; color: var(--mv-ink); background: var(--mv-card); border: 1px solid var(--mv-line); border-radius: 12px; }
.mv button:focus-visible, .mv a:focus-visible, .mv select:focus-visible, .mv textarea:focus-visible { outline: 3px solid var(--mv-bronze); outline-offset: 3px; }
.mv-caixa { font-size: 1rem; }
.mv-painel .mv-botoes { gap: 10px; }
.mv.mv-writing .mv-barra { display: none; }
@media (max-width: 860px) {
  .mv.aberto .mv-palco, .mv[data-vista="pagina"].aberto .mv-palco { height: auto; min-height: 0; }
  .mv.aberto .mv-cena { height: 200px; }
  .mv.aberto .mv-painel { position: relative; inset: auto; width: auto; max-height: none; margin: 8px; }
  .mv.mv-writing .mv-cena { display: none; }
  .mv.mv-overlay.aberto { overflow: auto; }
  .mv.mv-overlay.aberto .mv-palco { overflow: visible; height: auto; min-height: 100dvh; }
  .mv-painel-fechar { min-width: 44px; min-height: 44px; }
  .mv-painel .mv-botoes > * { min-height: 44px; }
}
/* actions row */
.mv-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mv-acoes button, .mv-acoes summary, .mv-acoes a { font: inherit; font-weight: 800; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mv-bronze); background: transparent; color: var(--mv-bronze); cursor: pointer; text-decoration: none; }
.mv-acoes button:hover, .mv-acoes summary:hover, .mv-acoes a:hover { background: rgba(152, 96, 31, 0.1); }
.mv-acoes .mv-pagina-link { margin-left: auto; border-color: transparent; }
.mv-como { position: relative; } .mv-como summary { list-style: none; } .mv-como summary::-webkit-details-marker { display: none; }
.mv-como[open] > div { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; width: min(420px, 90vw); background: var(--mv-card); border: 1px solid var(--mv-line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); font-size: 0.92rem; color: var(--mv-soft); }
.mv-como p { margin: 0 0 8px; } .mv-como p:last-child { margin: 0; }
/* stage */
.mv-palco { position: relative; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, var(--mv-night-3) 0%, var(--mv-night-2) 42%, var(--mv-night) 100%); box-shadow: 0 30px 80px rgba(10, 14, 30, 0.35), inset 0 0 90px rgba(0, 0, 0, 0.35); height: clamp(560px, calc(100vh - 100px), 860px); scroll-margin-top: 84px; }
.mv[data-vista="pagina"] .mv-palco { height: clamp(600px, calc(100vh - 150px), 980px); }
.mv-cena { position: relative; height: 100%; }
.mv-cena svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab; }
.mv-cena svg.a-arrastar { cursor: grabbing; }
.mv-lado { position: absolute; left: 14px; top: 14px; bottom: 14px; width: 224px; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; scrollbar-width: thin; }
.mv-lado-fase { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mv-hud-soft); margin: 8px 0 1px 4px; font-weight: 700; }
.mv-lado-fase:first-child { margin-top: 0; }
.mv-chip { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--mv-hud-line); background: var(--mv-hud); color: var(--mv-hud-ink); font: inherit; font-weight: 700; font-size: 0.84rem; line-height: 1.2; cursor: pointer; text-align: left; backdrop-filter: blur(6px); transition: border-color 0.15s, background 0.15s; }
.mv-chip:hover { border-color: var(--cor); }
.mv-chip .cor { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 8px var(--cor); }
.mv-chip .nome { flex: 1; min-width: 0; }
.mv-chip .n { font-size: 0.68rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--mv-hud-soft); }
.mv-chip.com-guardadas .n { background: var(--mv-ouro); color: #1a1208; }
.mv-chip[aria-pressed="true"] { border-color: var(--cor); background: rgba(255, 255, 255, 0.14); }
.mv-dica { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); max-width: min(420px, calc(100% - 28px)); text-align: center; font-size: 0.8rem; color: var(--mv-hud-soft); background: var(--mv-hud); border: 1px solid var(--mv-hud-line); padding: 6px 14px; border-radius: 16px; pointer-events: none; transition: opacity 0.4s; }
.mv-cena.tocado .mv-dica { opacity: 0; }
.mv-barra { position: absolute; left: 252px; right: 290px; bottom: 14px; display: flex; justify-content: center; pointer-events: none; }
.mv-barra-pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 6px 6px 16px; border-radius: 28px; border: 1px solid var(--mv-ouro); background: var(--mv-hud); color: var(--mv-hud-ink); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.mv-barra-texto { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 4px 6px 4px 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mv-barra-texto em { font-family: var(--mv-serif); font-style: italic; font-size: 1rem; line-height: 1.3; }
.mv-barra-texto small { font-size: 0.7rem; color: var(--mv-hud-soft); letter-spacing: 0.04em; }
.mv-barra-outra, .mv-barra-escrever { flex: none; font: inherit; font-weight: 800; height: 36px; min-width: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--mv-ouro); background: transparent; color: var(--mv-ouro); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.mv-barra-escrever { background: var(--mv-ouro); color: #1a1208; }
.mv-barra-outra.girar { animation: mv-girar 0.5s ease-out; }
@keyframes mv-girar { to { transform: rotate(360deg); } }
.mv-tools { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; }
.mv-tools button, .mv-fechar-ecra { height: 36px; min-width: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.3); background: var(--mv-hud); color: var(--mv-hud-ink); font: inherit; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.mv-tools button:hover, .mv-fechar-ecra:hover { border-color: var(--mv-ouro); }
.mv-tools .mv-estilo { border-color: var(--mv-ouro); color: var(--mv-ouro); } .mv.rascunho .mv-tools .mv-estilo { color: #222; border-color: #444; background: #fff; }
.mv-fechar-ecra { position: absolute; right: 14px; top: 14px; height: 40px; }
.mv.aberto .mv-tools { right: calc(var(--mv-painel-w) + 28px); }
.mv.aberto .mv-barra { right: calc(var(--mv-painel-w) + 28px); }
/* map drawing */
.mv .estrelas circle { fill: #fff; pointer-events: none; }
.mv .foco { pointer-events: none; }
.mv .ligacao { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; fill: none; }
.mv .ligacao-marco { stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.8; fill: none; }
.mv .centro circle { fill: var(--mv-ouro); filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.55)); }
.mv .centro text { fill: #1a1208; font-family: var(--mv-serif); font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mv .cara { display: none; pointer-events: none; } .mv .cara circle { fill: #2a2a2a; } .mv .cara path { fill: none; stroke: #2a2a2a; stroke-width: 1.3; stroke-linecap: round; }
.mv .celula { cursor: pointer; } .mv .celula:focus-visible, .mv .marco:focus-visible { outline: none; }
.mv .celula .nucleo { fill: var(--cor, #e8c38b); opacity: 0.95; filter: drop-shadow(0 0 10px var(--cor, #e8c38b)); transition: opacity 0.3s; }
.mv .celula .halo { fill: none; stroke: var(--cor, #e8c38b); stroke-width: 1; opacity: 0.3; }
.mv .celula .etiqueta { pointer-events: none; transition: opacity 0.3s; }
.mv .celula .etiqueta rect { fill: rgba(11, 14, 23, 0.82); stroke: var(--cor, #e8c38b); stroke-width: 1; }
.mv .celula .nome { fill: var(--mv-cream); font-size: 13px; font-weight: 700; }
.mv .celula .conta { fill: var(--mv-ouro); font-weight: 800; }
.mv .celula.hover .nucleo, .mv .celula.ativa .nucleo, .mv .celula:focus-visible .nucleo { opacity: 1; filter: drop-shadow(0 0 18px var(--cor, #e8c38b)); }
.mv .celula.hover .halo, .mv .celula.ativa .halo { opacity: 0.9; stroke-width: 1.6; }
.mv .celula.hover .marco .ponto { fill: var(--cor, #e8c38b); }
.mv .celula.apagada { opacity: 0.2; transition: opacity 0.4s; } .mv .celula.apagada .etiqueta { opacity: 0; }
.mv .celula.ativa .etiqueta, .mv .celula.hover.perto .etiqueta { opacity: 0; }
.mv .marco { cursor: pointer; }
.mv .marco .ponto { fill: var(--mv-night); stroke: var(--cor, #e8c38b); stroke-width: 1.5; transition: fill 0.25s; }
.mv .marco .brilho { fill: var(--cor, #e8c38b); opacity: 0.16; }
.mv .marco.cheio .ponto { fill: var(--mv-ouro); stroke: var(--mv-ouro); }
.mv .marco.fechado .ponto { stroke-dasharray: 3 2.5; }
.mv .marco:hover .ponto, .mv .marco.ativo .ponto, .mv .marco:focus-visible .ponto { fill: var(--mv-cream); stroke-width: 2; }
.mv .marco.ativo .brilho { opacity: 0.5; }
.mv .marco .rotulo { fill: var(--mv-cream); font-size: 9.5px; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity 0.3s; paint-order: stroke; stroke: rgba(11, 14, 23, 0.9); stroke-width: 3px; stroke-linejoin: round; }
.mv .marco .rotulo-fundo { fill: rgba(11, 14, 23, 0.9); stroke: var(--cor, #e8c38b); stroke-width: 1; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mv .celula.ativa .rotulo, .mv .celula.hover.perto .rotulo { opacity: 1; } .mv .celula.ativa .rotulo { font-size: 11px; }
.mv .celula.ativa .marco.ativo .rotulo-fundo { opacity: 1; } .mv .celula.ativa .marco.ativo .rotulo { stroke: none; font-weight: 800; }
/* floating panel */
.mv-painel { --mv-card: #151b2b; --mv-paper: #1b2236; --mv-ink: #f7f8fc; --mv-soft: #aab2c8; --mv-line: rgba(255, 255, 255, 0.14); --mv-bronze: #ffd166; --mv-bronze-light: #ffe29a; position: absolute; right: 14px; top: 14px; width: var(--mv-painel-w); max-height: calc(100% - 28px); overflow: auto; scrollbar-width: thin; background: rgba(11, 14, 23, 0.9); backdrop-filter: blur(12px); border: 1px solid var(--mv-line); border-radius: 18px; padding: 18px 18px 16px; color: var(--mv-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.mv-painel[hidden] { display: none; }
.mv-painel-fechar { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--mv-line); background: transparent; color: var(--mv-soft); font: inherit; font-size: 0.9rem; cursor: pointer; }
.mv-painel-fechar:hover { color: var(--mv-ink); border-color: var(--mv-bronze); }
.mv-eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mv-bronze); font-weight: 800; margin: 0 0 6px; }
.mv-painel h3 { font-family: var(--mv-serif); font-weight: 600; font-size: 1.4rem; margin: 0 24px 4px 0; line-height: 1.2; }
.mv-painel h3 .cor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.mv-painel p { margin: 0 0 10px; color: var(--mv-soft); }
.mv-pergunta { margin: 12px 0 8px; padding: 14px 16px; border-radius: 14px; background: var(--mv-paper); border: 1px solid var(--mv-line); border-left: 3px solid var(--cor, var(--mv-bronze)); }
.mv-pergunta .mv-eyebrow { margin-bottom: 4px; }
.mv-pergunta strong { display: block; font-family: var(--mv-serif); font-weight: 500; font-size: 1.05rem; color: var(--mv-ink); margin: 0 0 2px; }
.mv-pergunta em { display: block; font-family: var(--mv-serif); font-style: normal; font-size: 1.25rem; line-height: 1.35; color: var(--mv-ink); margin: 0 0 12px; }
.mv-caixa { display: block; width: 100%; min-height: 104px; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.5; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mv-line); background: var(--mv-card); color: var(--mv-ink); margin: 0 0 10px; }
.mv-caixa::placeholder { color: var(--mv-soft); } .mv-caixa:focus { outline: 2px solid var(--mv-bronze); outline-offset: 1px; border-color: transparent; }
.mv-estado a { color: var(--mv-bronze); font-weight: 700; }
.mv-partilhar { font: inherit; font-size: 0.86rem; font-weight: 700; background: none; border: 1px solid var(--mv-line); color: var(--mv-soft); border-radius: 999px; padding: 6px 12px; margin-top: 12px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-partilhar:hover { color: var(--mv-ink); border-color: var(--mv-bronze); }
.mv-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-botoes a, .mv-botoes button { font: inherit; font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; text-decoration: none; cursor: pointer; border: 1px solid var(--mv-bronze); }
.mv-botoes .primario { background: var(--mv-bronze); color: #1a1208; } .mv-botoes .secundario { background: transparent; color: var(--mv-bronze); }
.mv-botoes .primario:hover { filter: brightness(1.08); } .mv-botoes .secundario:hover { background: rgba(255, 209, 102, 0.12); }
.mv-estado { font-size: 0.86rem; color: var(--mv-soft); margin: 6px 0 0; }
.mv-exemplos blockquote { margin: 6px 0 0; padding: 10px 14px; border-left: 3px solid var(--cor, var(--mv-bronze)); background: var(--mv-paper); border-radius: 0 12px 12px 0; font-family: var(--mv-serif); font-size: 1rem; line-height: 1.45; color: var(--mv-ink); }
.mv-lista { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.mv-lista button { width: 100%; text-align: left; font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--mv-line); background: var(--mv-paper); color: var(--mv-ink); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mv-lista button[aria-pressed="true"] { border-color: var(--mv-bronze); }
.mv-lista small { color: var(--mv-soft); white-space: nowrap; font-size: 0.78rem; } .mv-lista .guardada { color: var(--mv-bronze); font-weight: 700; }
.mv-voltar { font: inherit; font-weight: 700; background: none; border: 0; color: var(--mv-bronze); cursor: pointer; padding: 0; margin-top: 12px; }
/* skyline */
.mv-linha { display: flex; align-items: flex-end; gap: 12px; padding: 18px 18px 16px; border-radius: 22px; background: linear-gradient(180deg, var(--mv-night-2), var(--mv-night)); overflow-x: auto; scrollbar-width: thin; }
.mv-familia { display: flex; flex-direction: column; align-items: stretch; flex: var(--n) 1 0; min-width: 0; transition: flex-grow 0.35s ease; }
.mv-familia-nome { align-self: center; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 6px; font-size: 0.66rem; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: var(--mv-cream); background: color-mix(in srgb, var(--fam) 32%, transparent); border: 1px solid color-mix(in srgb, var(--fam) 70%, transparent); margin-bottom: 10px; }
.mv-slabs { display: flex; align-items: flex-end; gap: 3px; height: 250px; }
.mv-slab { position: relative; flex: var(--n) 1 0; min-width: 52px; height: calc(118px + var(--n) * 20px); background: linear-gradient(180deg, color-mix(in srgb, var(--cor) calc(92% - var(--tom) * 14%), white) 0%, color-mix(in srgb, var(--cor) calc(70% - var(--tom) * 10%), var(--mv-night)) 40%, var(--mv-night-2) 100%); clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%); transition: flex-grow 0.35s ease, filter 0.2s; overflow: hidden; }
.mv-slab:nth-child(even) { clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%); }
.mv-slab:hover, .mv-slab:focus-within, .mv-slab[aria-pressed="true"] { flex-grow: calc(var(--n) * 4); filter: brightness(1.12); }
.mv-familia:has(.mv-slab:hover, .mv-slab:focus-within, .mv-slab[aria-pressed="true"]) { flex-grow: calc(var(--n) * 2); }
.mv-slab[aria-pressed="true"] { outline: 2px solid var(--mv-cream); outline-offset: -2px; }
.mv-slab-nivel { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); background: rgba(255, 209, 102, 0.22); border-top: 2px solid var(--mv-ouro); pointer-events: none; transition: height 0.4s; }
.mv-slab-nivel[style*="--p: 0"] { border-top: 0; }
.mv-slab-cabeca { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; padding: 10px 0 0 6px; color: #fff; font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mv-slab-cabeca b { font-weight: 800; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.mv-slab-cabeca small { font-size: 0.68rem; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.mv-slab-marcos { position: absolute; left: 56px; right: 8px; top: 22px; bottom: 8px; display: flex; flex-direction: column; gap: 2px; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.25s 0.15s; }
.mv-slab:hover .mv-slab-marcos, .mv-slab:focus-within .mv-slab-marcos, .mv-slab[aria-pressed="true"] .mv-slab-marcos { opacity: 1; pointer-events: auto; }
.mv-slab-marcos button { font: inherit; font-size: 0.74rem; font-weight: 600; text-align: left; color: #fff; background: rgba(0, 0, 0, 0.32); border: 0; border-radius: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-slab-marcos button:hover { background: rgba(0, 0, 0, 0.55); }
.mv-slab-marcos button.guardada::before { content: "● "; color: var(--mv-ouro); }
.mv-vazio { color: var(--mv-soft); }
.mv button:focus-visible, .mv a:focus-visible, .mv summary:focus-visible { outline: 3px solid var(--mv-ouro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mv-slab, .mv-slab-marcos, .mv-familia { transition: none; } }
/* the light card on the home page: map and question only; anything picked opens the full version */
.mv[data-vista="leve"]:not(.mv-overlay) .mv-palco { height: auto; aspect-ratio: 16 / 9; min-height: 420px; max-height: min(640px, 78vh); }
.mv[data-vista="leve"]:not(.mv-overlay) .mv-lado, .mv[data-vista="leve"]:not(.mv-overlay) .mv-painel, .mv[data-vista="leve"] .mv-linha { display: none; }
.mv[data-vista="leve"]:not(.mv-overlay) .mv-barra { left: 14px; }
.mv[data-vista="leve"]:not(.mv-overlay) .mv-mais, .mv[data-vista="leve"]:not(.mv-overlay) .mv-menos { display: none; }
.mv[data-vista="leve"] .mv-ampliar { background: var(--mv-ouro); color: #1a1208; border-color: var(--mv-ouro); }
.mv.mv-overlay .mv-ampliar { background: var(--mv-hud); color: var(--mv-hud-ink); border-color: rgba(255, 255, 255, 0.3); }
/* pencil look */
.mv.rascunho .mv-palco { background: #fbf8f1; box-shadow: inset 0 0 70px rgba(80, 60, 30, 0.08); --mv-hud: rgba(255, 255, 255, 0.9); --mv-hud-line: #6a6a6a; --mv-hud-ink: #222; --mv-hud-soft: #5a5a5a; }
.mv.rascunho .mv-dica { font-family: var(--mv-mao); font-size: 0.95rem; }
.mv.rascunho .mv-chip { border-radius: 8px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08); }
.mv.rascunho .mv-chip .cor { box-shadow: none; border: 1.5px solid #444; }
.mv.rascunho .mv-chip .n { background: #eee; color: #333; }
.mv.rascunho .mv-barra-pill { border-color: #444; border-radius: 10px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); }
.mv.rascunho .mv-barra-texto em { font-family: var(--mv-mao); font-style: normal; font-size: 1.2rem; }
.mv.rascunho .mv-barra-outra, .mv.rascunho .mv-barra-escrever { border-color: #444; color: #222; border-radius: 8px; } .mv.rascunho .mv-barra-escrever { background: #ffe9a8; }
.mv.rascunho .mv-tools button, .mv.rascunho .mv-fechar-ecra { border-color: #444; border-radius: 8px; } .mv.rascunho .mv-ampliar { background: #ffe9a8; color: #222; }
.mv.rascunho .estrelas, .mv.rascunho .foco { display: none; }
.mv.rascunho .ligacao, .mv.rascunho .ligacao-marco { stroke: #7c7c7c; stroke-width: 1.6; }
.mv.rascunho .centro circle { fill: #e6e6e6; stroke: #4a4a4a; stroke-width: 2; filter: none; }
.mv.rascunho .centro text { fill: #222; font-family: var(--mv-mao); font-size: 24px; transform: translate(0, 52px); }
.mv.rascunho .cara { display: block; }
.mv.rascunho .celula .nucleo { fill: #dedede; stroke: #4a4a4a; stroke-width: 1.6; filter: none; opacity: 1; }
.mv.rascunho .celula.hover .nucleo, .mv.rascunho .celula.ativa .nucleo { fill: var(--cor, #e8c38b); filter: none; }
.mv.rascunho .celula .halo { stroke: #9a9a9a; stroke-dasharray: 4 3; }
.mv.rascunho .celula .etiqueta rect { fill: #fff; stroke: #4a4a4a; }
.mv.rascunho .celula .nome { fill: #222; font-family: var(--mv-mao); font-size: 15px; font-weight: 400; }
.mv.rascunho .celula .conta { fill: #7a5a1c; }
.mv.rascunho .marco .ponto { fill: #fff; stroke: #4a4a4a; stroke-width: 1.6; } .mv.rascunho .marco.cheio .ponto { fill: #4a4a4a; stroke: #4a4a4a; }
.mv.rascunho .marco .brilho { opacity: 0; } .mv.rascunho .marco.ativo .ponto, .mv.rascunho .marco:hover .ponto { fill: #ffe9a8; }
.mv.rascunho .marco .rotulo { fill: #2a2a2a; stroke: #fbf8f1; font-family: var(--mv-mao); font-size: 12.5px; font-weight: 400; }
.mv.rascunho .marco .rotulo-fundo { fill: #fff; stroke: #4a4a4a; }
.mv.rascunho .mv-painel { --mv-card: #fff; --mv-paper: #f6f2ea; --mv-ink: #222; --mv-soft: #555; --mv-line: #6a6a6a; --mv-bronze: #98601f; --mv-bronze-light: #dbb65c; background: rgba(255, 255, 255, 0.94); border-radius: 10px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); }
.mv.rascunho .mv-botoes .primario { color: #fffaf0; }
.mv.rascunho .mv-linha { background: #fbf8f1; border: 1px solid #ddd; }
.mv.rascunho .mv-familia-nome { background: #fff; border: 1.5px solid #4a4a4a; color: #222; }
.mv.rascunho .mv-slab { background: #fff; clip-path: none; border: 1.5px solid #4a4a4a; border-radius: 4px 4px 0 0; box-shadow: inset 0 8px 0 var(--cor); }
.mv.rascunho .mv-slab:hover, .mv.rascunho .mv-slab[aria-pressed="true"] { filter: none; background: #fffbe9; }
.mv.rascunho .mv-slab[aria-pressed="true"] { outline-color: #4a4a4a; }
.mv.rascunho .mv-slab-nivel { background: rgba(74, 74, 74, 0.1); border-top-color: #4a4a4a; }
.mv.rascunho .mv-slab-cabeca { color: #222; } .mv.rascunho .mv-slab-cabeca b { text-shadow: none; } .mv.rascunho .mv-slab-cabeca small { color: #666; }
.mv.rascunho .mv-slab-marcos button { color: #222; background: #f1ede4; } .mv.rascunho .mv-slab-marcos button:hover { background: #e4ddcf; }
.mv.rascunho .mv-slab-marcos button.guardada::before { color: #4a4a4a; }
/* narrower stages: the skyline is the selector, the chips hide */
@container mv (max-width: 1100px) { .mv-lado { display: none; } .mv-barra { left: 14px; } }
/* full screen */
.mv.mv-overlay { position: fixed; inset: 0; z-index: 99999; display: block; }
.mv.mv-overlay .mv-palco { height: 100%; border-radius: 0; box-shadow: none; }
.mv.mv-overlay .mv-painel { top: 64px; max-height: calc(100% - 78px); }
.mv.mv-overlay.aberto .mv-tools { top: 14px; }
.mv.mv-overlay .mv-lado { display: flex; }
/* its own page */
.mv-pagina-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto 56px; }
.mv-pagina-hero { padding: 36px 0 18px; max-width: 760px; }
.mv-pagina-hero .mv-pagina-kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: #98601f; margin: 0 0 10px; }
.mv-pagina-hero h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; margin: 0 0 12px; letter-spacing: -0.01em; text-wrap: balance; }
.mv-pagina-hero p { font-size: 1.1rem; line-height: 1.6; color: #675f56; margin: 0; max-width: 62ch; }
@media (max-width: 860px) {
  .mv { gap: 12px; }
  .mv-palco, .mv[data-vista="pagina"] .mv-palco, .mv[data-vista="leve"]:not(.mv-overlay) .mv-palco { height: auto; aspect-ratio: auto; max-height: none; display: flex; flex-direction: column; }
  .mv-cena { aspect-ratio: auto; height: auto; display: flex; flex-direction: column; }
  .mv-cena svg { flex: none; aspect-ratio: 1 / 1; height: auto; }
  .mv-barra, .mv[data-vista="leve"]:not(.mv-overlay) .mv-barra, .mv.aberto .mv-barra { position: static; margin: 0 10px 10px; }
  .mv[data-vista="leve"]:not(.mv-overlay) .mv-dica { display: none; }
  .mv-lado, .mv.mv-overlay .mv-lado { display: none; }
  .mv-tools { top: 12px; right: 12px; } .mv-tools button { height: 32px; min-width: 32px; padding: 0 9px; font-size: 0.82rem; } .mv-mais, .mv-menos { display: none; }
  .mv-dica { left: 12px; top: 12px; bottom: auto; transform: none; max-width: 46%; text-align: left; font-size: 0.7rem; line-height: 1.3; padding: 5px 10px; border-radius: 10px; }
  .mv-barra-pill { padding-left: 12px; } .mv-barra-texto em { font-size: 0.9rem; }
  .mv-painel { position: static; width: auto; max-height: none; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  .mv-painel-fechar { top: 8px; }
  .mv-fechar-ecra { top: 12px; right: auto; left: 12px; height: 32px; }
  .mv.mv-overlay .mv-tools, .mv.aberto .mv-tools { right: 12px; top: 12px; } .mv.aberto .mv-barra { right: 10px; }
  .mv.mv-overlay .mv-painel { top: auto; max-height: 45vh; overflow: auto; }
  .mv.mv-overlay .mv-palco { height: 100%; } .mv.mv-overlay .mv-cena { flex: 1; min-height: 0; } .mv.mv-overlay .mv-cena svg { flex: 1; aspect-ratio: auto; min-height: 0; }
  .mv-linha { gap: 8px; padding: 12px; border-radius: 16px; }
  .mv-familia { flex: none; } .mv-familia-nome { width: 56px; height: 56px; font-size: 0.52rem; padding: 4px; margin-bottom: 6px; }
  .mv-slabs { height: 190px; gap: 2px; } .mv-slab { flex: none; width: calc(44px + var(--n) * 3px); height: calc(90px + var(--n) * 14px); }
  .mv-slab-cabeca b { font-size: 0.74rem; } .mv-slab-cabeca small { font-size: 0.6rem; }
  .mv-slab:hover, .mv-slab:focus-within, .mv-slab[aria-pressed="true"] { flex-grow: 0; }
  .mv-slab-marcos { display: none; } .mv-familia:has(.mv-slab:hover, .mv-slab:focus-within, .mv-slab[aria-pressed="true"]) { flex-grow: 0; }
  .mv-pagina-hero { padding: 22px 0 10px; }
}
/* Writing takes priority over exploration on narrow screens, including full screen. */
@media (max-width: 860px) {
  /* Keep wrapping controls in document flow so they cannot cover the map. */
  .mv .mv-tools { position: static; order: -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; width: 100%; }
  .mv .mv-tools button { flex: 1 1 auto; height: auto; min-height: 44px; min-width: 44px; max-width: 100%; padding: 10px 12px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
  .mv .mv-tools .mv-ampliar { flex-basis: 100%; }
  .mv.mv-overlay .mv-tools { padding-top: 64px; }
  .mv .mv-barra-pill { width: 100%; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 16px; }
  .mv .mv-barra-texto { flex: 1 1 100%; }
  .mv .mv-barra-outra, .mv .mv-barra-escrever { height: auto; min-height: 44px; min-width: 44px; padding: 10px 14px; line-height: 1.35; }
  .mv .mv-barra-escrever { flex: 1; }
  .mv.aberto .mv-cena svg { height: 180px; aspect-ratio: auto; }
  .mv.aberto .mv-cena { display: none; }
  .mv .mv-dica { display: none; }
  .mv.mv-overlay.aberto .mv-palco { height: auto; min-height: 100dvh; padding-top: 52px; }
  .mv.mv-overlay.aberto .mv-painel { max-height: none; overflow: visible; }
  .mv.mv-writing .mv-cena { display: none; }
  .mv.mv-overlay .mv-fechar-ecra { position: fixed; z-index: 5; top: 8px; left: 8px; min-height: 44px; }
  .mv-painel textarea { font-size: 16px; min-height: 160px; }
}