/* ============================================================
   MURAL YOUTUBE 2027  —  folha de estilo principal
   Board horizontal, fundo branco quadriculado, estetica de
   quadro de recados: post-its, pins, fitas, stickers e rabiscos.
   Tudo dimensionado em "vh" para o board manter a mesma
   proporcao em qualquer tela (ideal para gravar video).
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* ---------- 2. Variaveis ---------- */
:root {
  --ink:        #1b2331;
  --ink-soft:   #5a6473;
  --red:        #ff0a2b;
  --red-deep:   #c1121f;
  --yellow:     #ffd84d;
  --yellow-dp:  #f2b705;
  --green:      #1fbf6b;
  --green-dp:   #0e8f4e;
  --blue:       #3bb9ff;
  --purple:     #9b7bff;
  --pink:       #ff9bc4;
  --grid:       #e2e9f2;
  --grid-bold:  #ccd8e8;
  --paper:      #ffffff;

  --shadow-sm: 0 .18vh .5vh rgba(20,22,26,.10);
  --shadow-md: 0 .9vh 2.2vh rgba(20,22,26,.13), 0 .2vh .5vh rgba(20,22,26,.08);
  --shadow-lg: 0 2vh 4.5vh rgba(20,22,26,.18), 0 .4vh 1vh rgba(20,22,26,.08);
}

/* ---------- 3. O board (rolagem horizontal) ---------- */
#board {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100vh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  cursor: grab;
  background-color: #fff;
  background-image:
    linear-gradient(var(--grid-bold) .13vh, transparent .13vh),
    linear-gradient(90deg, var(--grid-bold) .13vh, transparent .13vh),
    linear-gradient(var(--grid) .1vh, transparent .1vh),
    linear-gradient(90deg, var(--grid) .1vh, transparent .1vh);
  background-size: 13vh 13vh, 13vh 13vh, 2.6vh 2.6vh, 2.6vh 2.6vh;
  background-attachment: local;
}
#board.arrastando { scroll-behavior: auto; }
#board.pen-on { cursor: none; }
#board::-webkit-scrollbar { height: 0; }
#board { scrollbar-width: none; }

/* ---------- 4. Paineis ---------- */
.panel {
  position: relative;
  flex: 0 0 auto;
  height: 100vh;
  width: 168vh;
  padding: 8vh 7vh 13vh;
  /* SEM `isolation: isolate` (#348). Com ela cada página era uma camada
     própria, e a página seguinte pintava inteira por cima da anterior:
     uma peça de outra página arrastada para cima desta cobria o ponto
     de câmera, por mais alto que fosse o degrau dele — "os pins
     numéricos devem sempre estar por cima de tudo, independente de onde
     outras peças vêm". Sem ela, todas as peças de todas as páginas
     disputam a mesma pilha, e o degrau do ponto vale no mural inteiro.
     A página não tem fundo próprio (a grade é do `#board`), então nada
     muda no desenho de uma página sozinha; o que muda é só a peça que
     passa da borda: ela fica na altura dela, e não embaixo da página
     vizinha. Para voltar atrás, é devolver a linha. */
  font-size: max(2vh, 16.0px);          /* base para textos sem tamanho proprio */
}
.panel--wide  { width: 200vh; }
.panel--xwide { width: 236vh; }

.panel::after {
  content: '';
  position: absolute;
  top: 6vh; bottom: 6vh; right: 0;
  width: .12vh;
  background: repeating-linear-gradient(to bottom, var(--grid-bold) 0 1.2vh, transparent 1.2vh 2.6vh);
}
.panel:last-child::after { display: none; }

.panel__num {
  position: absolute;
  left: 2.2vh; top: .6vh;
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-size: 10vh;
  line-height: .8;
  color: #eff3f9;
  letter-spacing: -.05em;
  z-index: 0;
  user-select: none;
}
.panel__kicker {
  display: inline-flex; align-items: center; gap: .9vh;
  font-weight: 700;
  font-size: max(1.6vh, 12.8px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-deep);
  background: #fff0f2;
  border: .22vh solid #ffd2d8;
  padding: .7vh 1.6vh;
  border-radius: 10vh;
  position: relative; z-index: 3;
}
.panel__kicker::before {
  content: ''; width: .9vh; height: .9vh; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 .35vh #ffd2d8;
}
.panel__title {
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-size: 6.2vh;
  line-height: .98;
  letter-spacing: -.025em;
  margin: 1.8vh 0 0;
  position: relative; z-index: 3;
  max-width: 24ch;
}
.panel__title small {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: max(2.2vh, 17.6px);
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-top: 1.6vh;
  max-width: 60ch;
}
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::after {
  content: ''; position: absolute; left: -.4vh; right: -.4vh; bottom: .1vh;
  height: 1.4vh; background: var(--yellow); z-index: -1;
  border-radius: .4vh; transform: rotate(-.6deg);
}
.hl--green::after { background: #b7f5d4; }
.hl--red::after   { background: #ffc9d1; }
.hl--blue::after  { background: #c6e9ff; }
.ink-red { color: var(--red); }
.ink-green { color: var(--green-dp); }

/* ---------- 5. Camada absoluta ----------
   Classe dobrada de proposito: precisa vencer o "position: relative"
   de .card / .postit, que sao declarados mais abaixo. */
.at, .at.at { position: absolute; z-index: 2; }

/* ---------- 6. Post-its ---------- */
.postit {
  position: relative;
  width: 30vh; min-height: 29vh;
  padding: 3.2vh 2.8vh 2.8vh;
  background: var(--yellow);
  box-shadow: var(--shadow-md);
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  font-size: max(2.85vh, 22.8px);
  line-height: 1.24;
  color: #2b2410;
  transform: rotate(-2deg);
  transition: transform var(--t-cartao) var(--mov-padrao), box-shadow var(--t-cartao) var(--mov-padrao);
}
.postit:hover { transform: rotate(0deg) scale(1.03); box-shadow: var(--shadow-lg); z-index: 30; }
.postit::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  border-width: 0 0 2.4vh 2.4vh;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,.09) transparent;
}
/* so o PRIMEIRO <b> vira rotulo em bloco; <b> no meio do texto
   continua sendo negrito normal, em linha */
.postit > b:first-child {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: max(1.9vh, 15.2px);
  display: block; margin-bottom: .9vh; letter-spacing: .06em; text-transform: uppercase;
}
.postit--pink   { background: var(--pink);   color: #40182b; }
.postit--green  { background: #a9f0c9;       color: #0d3d27; }
.postit--blue   { background: #b6e5ff;       color: #0d2f45; }
.postit--purple { background: #d9cdff;       color: #2b1f52; }
.postit--white  { background: #fff; color: var(--ink); border: .22vh solid #e6ecf4; }
.postit--sm { width: 24vh; min-height: 23vh; font-size: max(2.4vh, 19.2px); padding: 2.6vh 2.2vh; }
.postit--lg { width: 37vh; min-height: 33vh; font-size: 3.1vh; }

/* ---------- 7. Cartoes ---------- */
.card {
  position: relative;
  background: var(--paper);
  border: .24vh solid #e6ecf4;
  border-radius: 1.6vh;
  padding: 2.8vh;
  box-shadow: var(--shadow-md);
}
.card--ink { border: .3vh solid var(--ink); box-shadow: .8vh .8vh 0 var(--ink); }
.card--red { border: .3vh solid var(--red); box-shadow: .8vh .8vh 0 var(--red); }
.card--green { border: .3vh solid var(--green-dp); box-shadow: .8vh .8vh 0 var(--green-dp); }
.card__lbl {
  font-size: max(1.5vh, 12.0px); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.1vh;
}
.card p { margin: 0; font-size: max(2vh, 16.0px); line-height: 1.5; color: var(--ink-soft); }
.card h3 { font-family:'Archivo Black',sans-serif; font-size: max(2.7vh, 21.6px); margin:0 0 1.1vh; letter-spacing:-.02em; }

/* ---------- 8. Pin, fita, clipe ---------- */
.pin { position: absolute; width: 4.4vh; height: 4.4vh; z-index: 25; filter: drop-shadow(0 .5vh .7vh rgba(0,0,0,.28)); pointer-events: none; }
.tape {
  position: absolute; z-index: 24;
  width: 13vh; height: 3.4vh;
  background: linear-gradient(180deg, rgba(255,236,153,.88), rgba(255,222,110,.74));
  box-shadow: 0 .3vh .8vh rgba(0,0,0,.10);
  pointer-events: none;
}
.tape::before, .tape::after {
  content:''; position:absolute; top:0; bottom:0; width:.9vh;
  background: repeating-linear-gradient(135deg, transparent 0 .35vh, rgba(255,255,255,.55) .35vh .7vh);
}
.tape::before { left: 0; } .tape::after { right: 0; }
.tape--pink  { background: linear-gradient(180deg, rgba(255,182,209,.88), rgba(255,153,192,.72)); }
.tape--blue  { background: linear-gradient(180deg, rgba(178,226,255,.88), rgba(140,209,255,.72)); }
.tape--green { background: linear-gradient(180deg, rgba(178,244,213,.88), rgba(140,231,190,.72)); }

/* ---------- 9. Stickers ---------- */
.sticker {
  position: absolute; z-index: 26;
  display: grid; place-items: center; text-align: center;
  font-family: 'Permanent Marker', 'Caveat', cursive;
  color: #fff;
  border: .5vh solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  padding: 1vh;
  line-height: 1.05;
}
.sticker--red    { background: var(--red); }
.sticker--green  { background: var(--green); }
.sticker--yellow { background: var(--yellow-dp); color: #2b2410; }
.sticker--ink    { background: var(--ink); }
.sticker--blue   { background: var(--blue); }
.sticker--pill   { border-radius: 10vh; padding: 1.1vh 2.4vh; }

/* ---------- 10. Polaroid ---------- */
.polaroid {
  position: absolute; z-index: 20;
  background: #fff; padding: 1.3vh 1.3vh 4.8vh;
  margin: 0;
  box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
  transition: transform var(--t-janela) var(--mov-padrao);
}
.polaroid:hover { transform: rotate(0) scale(1.04); }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 1vh;
  text-align: center;
  font-family: 'Caveat', cursive; font-size: max(2.3vh, 18.4px); color: #3a3f4a;
}
.polaroid .shot { border-radius: .4vh; overflow: hidden; background: #f2f5f9; }

/* ---------- 11. Rabiscos e escrita a mao ---------- */
.doodle { position: absolute; pointer-events: none; z-index: 15; overflow: visible; }
.doodle path, .doodle line, .doodle circle, .doodle polyline, .doodle ellipse {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.hand {
  font-family: 'Caveat', cursive;
  font-size: max(3vh, 24.0px); line-height: 1.12; color: var(--ink);
  transform: rotate(-3deg);
}
.hand--red { color: var(--red-deep); }
.hand--green { color: var(--green-dp); }
.hand--sm { font-size: max(2.3vh, 18.4px); }
.hand--lg { font-size: 4vh; }

/* animacao de "desenhar" */
.js .draw-in path, .js .draw-in line, .js .draw-in polyline,
.js .draw-in circle, .js .draw-in ellipse {
  stroke-dasharray: var(--len, 700);
  stroke-dashoffset: var(--len, 700);
}
.panel.is-live .draw-in path,
.panel.is-live .draw-in line,
.panel.is-live .draw-in polyline,
.panel.is-live .draw-in circle,
.panel.is-live .draw-in ellipse {
  animation: draw 1s cubic-bezier(.6,.1,.25,1) forwards;
  animation-delay: var(--d, .2s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* entrada dos elementos */
.js .pop { opacity: 0; transform: translateY(2.4vh) scale(.96); }
.panel.is-live .pop {
  animation: pop var(--t-pagina) var(--mov-estouro) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes pop { to { opacity: 1; transform: none; } }
.panel.is-live .postit.pop { animation-name: popRot; }
@keyframes popRot { to { opacity: 1; transform: rotate(var(--rot, -2deg)); } }

/* ---------- 12. Infograficos ---------- */
.bars { display: flex; align-items: flex-end; gap: 5vh; height: 40vh; }
.bar { width: 15vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar__col {
  width: 100%; border-radius: 1.4vh 1.4vh 0 0;
  position: relative;
  height: 0;
  transition: height 1.1s cubic-bezier(.2,.75,.3,1);
  display: flex; align-items: flex-start; justify-content: center;
  box-shadow: inset 0 -.6vh 0 rgba(0,0,0,.08);
}
.panel.is-live .bar__col { height: var(--h, 50%); }
.bar__col--old { background: repeating-linear-gradient(135deg, #cfd9e6 0 1.2vh, #c3cfdf 1.2vh 2.4vh); }
.bar__col--new { background: linear-gradient(180deg, var(--red), #d90427); }
.bar__val {
  font-family: 'Archivo Black', sans-serif; font-size: max(3vh, 24.0px); color: #fff;
  margin-top: 1.6vh; text-shadow: 0 .2vh .4vh rgba(0,0,0,.2);
}
.bar__col--old .bar__val { color: #46536a; text-shadow: none; }
.bar__cap { margin-top: 1.6vh; font-weight: 700; font-size: max(1.9vh, 15.2px); text-align: center; color: var(--ink-soft); }
.bar__cap b { display: block; font-family:'Archivo Black',sans-serif; font-size: max(2.1vh, 16.8px); color: var(--ink); letter-spacing: -.01em; }

/* numerao gigante */
.bignum {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13vh; line-height: .84; letter-spacing: -.045em;
}
.bignum small { font-size: .3em; letter-spacing: 0; display: block; margin-top: .5vh; color: var(--ink-soft); font-family:'Outfit',sans-serif; font-weight:700; }
.arrow-big { font-family:'Archivo Black',sans-serif; font-size: 8vh; color: var(--red); }
.strike { position: relative; color: #94a3b8; }
.strike::after {
  content:''; position:absolute; left:-2%; right:-2%; top:52%; height:.7vh;
  background: var(--red); transform: rotate(-8deg); border-radius: 1vh;
}

/* linha do tempo */
.tl { position: relative; display: flex; align-items: flex-start; gap: 0; }
.tl__line {
  position: absolute; left: 0; right: 0; top: 6.4vh; height: .6vh;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2.2vh, transparent 2.2vh 3.6vh);
  border-radius: 1vh; opacity: .25;
}
.tl__step { position: relative; flex: 1; padding-right: 3vh; }
.tl__dot {
  width: 5.4vh; height: 5.4vh; border-radius: 50%;
  display: grid; place-items: center; margin: 4vh 0 2.4vh;
  font-family:'Archivo Black',sans-serif; font-size: max(2.2vh, 17.6px); color: #fff;
  border: .5vh solid #fff; box-shadow: var(--shadow-md); position: relative; z-index: 2;
}
.tl__date { font-family:'Archivo Black',sans-serif; font-size: max(2.6vh, 20.8px); letter-spacing: -.02em; }
.tl__txt { font-size: max(2vh, 16.0px); line-height: 1.45; color: var(--ink-soft); margin-top: .8vh; max-width: 30ch; }

/* donut / split */
.legend { display: flex; flex-direction: column; gap: 1.6vh; }
.legend div { display: flex; align-items: center; gap: 1.4vh; font-size: max(2.1vh, 16.8px); font-weight: 600; }
.legend i { width: 2.2vh; height: 2.2vh; border-radius: .6vh; display: block; flex: 0 0 auto; }

/* checklist */
.check { display: flex; gap: 1.8vh; align-items: flex-start; margin-bottom: 2.2vh; }
.check__box {
  flex: 0 0 auto; width: 3.4vh; height: 3.4vh; border: .35vh solid var(--ink);
  border-radius: .7vh; display: grid; place-items: center; background: #fff;
}
.check__box svg { width: 2.2vh; height: 2.2vh; }
.check__txt { font-size: max(2.1vh, 16.8px); line-height: 1.4; }
.check__txt b { display: block; font-size: max(2.3vh, 18.4px); font-family:'Archivo Black',sans-serif; letter-spacing:-.02em; margin-bottom:.3vh; }

/* tabela comparativa */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: max(2vh, 16.0px); }
.tbl th, .tbl td { padding: 1.2vh 2.2vh; text-align: left; }
.tbl thead th {
  font-family:'Archivo Black',sans-serif; font-size: max(2vh, 16.0px); letter-spacing:-.01em;
  border-bottom: .3vh solid var(--ink);
}
.tbl tbody tr:nth-child(odd) { background: #f8fafd; }
.tbl tbody td { border-bottom: .12vh solid #e6ecf4; }
.tbl .col-old { color: #8b98a9; }
.tbl .col-new { font-weight: 800; color: var(--ink); }
.tbl .col-new b { color: var(--red); }

/* ---------- 13. Topo: progresso e navegacao ---------- */
#progress {
  position: fixed; top: 0; left: 0; height: .55vh; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--yellow-dp));
  z-index: 90; transition: width var(--t-toque) linear;
  box-shadow: 0 0 1.4vh rgba(255,10,43,.5);
}
#brand {
  position: fixed; top: 2.2vh; right: 2.6vh; z-index: 90;
  display: flex; align-items: center; gap: 1.2vh;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border: .22vh solid #e6ecf4; border-radius: 10vh;
  padding: .9vh 1.8vh .9vh 1vh; box-shadow: var(--shadow-sm);
  font-size: max(1.7vh, 13.6px); font-weight: 700; color: var(--ink-soft);
}
#brand .yt { width: 4.4vh; height: 3.1vh; }
#brand b { color: var(--ink); }

#dots {
  position: fixed; right: 2.6vh; bottom: 2.8vh;
  z-index: 88; display: flex; gap: .9vh; align-items: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border: .22vh solid #e9eef5; border-radius: 10vh; padding: .8vh 1.4vh;
  box-shadow: var(--shadow-sm);
}
#dots button {
  width: 1.3vh; height: 1.3vh; border-radius: 50%; background: #d6dfeb;
  transition: all var(--t-cartao) var(--mov-padrao); padding: 0;
}
#dots button:hover { background: #9fb0c6; transform: scale(1.25); }
#dots button.on { background: var(--red); width: 3.4vh; border-radius: 1vh; }

/* ---------- 14. Barra da caneta (sempre visivel) ---------- */
#pen-canvas {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
  touch-action: none;
}
#pen-canvas.ativo    { pointer-events: auto; cursor: crosshair; }
#pen-canvas.apagando { pointer-events: auto; cursor: cell; }

#toolbar {
  position: fixed; left: 50%; bottom: 2.6vh; transform: translateX(-50%);
  z-index: 95;
  display: flex; align-items: center; gap: 1.1vh;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border: .28vh solid var(--ink);
  border-radius: 10vh;
  padding: 1.1vh 1.4vh;
  box-shadow: 0 1.4vh 3.4vh rgba(20,22,26,.22), .6vh .6vh 0 rgba(20,22,26,.9);
  user-select: none;
}
.tool {
  width: 5.2vh; height: 5.2vh; border-radius: 50%;
  display: grid; place-items: center;
  background: #f3f6fa; color: var(--ink);
  transition: transform var(--t-botao) var(--mov-padrao), background var(--t-botao) var(--mov-padrao), box-shadow var(--t-botao) var(--mov-padrao);
  position: relative;
}
.tool svg { width: 2.7vh; height: 2.7vh; }
.tool:hover { background: #e6ecf5; transform: translateY(-.3vh); }
.tool.on { background: var(--ink); color: #fff; box-shadow: 0 .5vh 1.2vh rgba(20,22,26,.35); }
.tool.on.tool--pen { background: var(--pen-color, var(--ink)); }
.tool[disabled] { opacity: .35; cursor: not-allowed; }

/* OS BALOES DE ATALHO SAIRAM.

   Cada ferramenta mostrava ao passar o mouse um balao com o nome e a
   tecla — "Desenho B". Dois problemas: o balao nasce logo acima do
   botao, que e exatamente para onde a gaveta de pinceis sobe, entao
   ele aparecia POR TRAS das ferramentas; e um deles anunciava uma
   tecla que nunca existiu.

   A lista do "?" e o lugar dos atalhos: ela cabe inteira na tela, se
   le de uma vez e nao briga com nada. O nome de cada botao continua
   no `aria-label`, para quem navega por leitor de tela. */


.swatch {
  width: 4.4vh; height: 4.4vh; border-radius: 50%;
  border: .35vh solid #fff;
  box-shadow: 0 0 0 .22vh #dde4ee, var(--shadow-sm);
  transition: transform var(--t-botao) var(--mov-padrao), box-shadow var(--t-botao) var(--mov-padrao);
  position: relative;
}
.swatch:hover { transform: translateY(-.4vh) scale(1.06); }
.swatch.on { box-shadow: 0 0 0 .42vh var(--ink), var(--shadow-md); transform: scale(1.1); }
.swatch--black { background: #14161a; }
.swatch--green { background: #12b76a; }
.swatch--red   { background: #ef2b2b; }

/* MAIS COMPACTO, para caber o controle de velocidade ao lado.
   O botao foi de 4vh para 3.3vh e o vao de .9vh para .45vh: a barra
   de baixo ja estava cheia, e um segundo controle do mesmo tamanho
   empurraria o resto para fora da tela em telas estreitas. */
.size {
  display: flex; align-items: center; gap: .3vh;
  background: #f3f6fa; border-radius: 10vh; padding: .35vh .45vh;
}
/* Os dois controles moram na mesma pastilha; o risco e o que diz onde
   um acaba e o outro comeca. */
.size--vel { display: flex; align-items: center; gap: .3vh; }
.size__risco {
  width: .12vh; align-self: stretch; margin: .3vh .25vh;
  background: var(--borda); border-radius: 1vh; flex: none;
}
.size button {
  width: 3vh; height: 3vh; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow-sm); font-weight: 800; font-size: max(2vh, 16px); line-height: 1;
  transition: transform var(--t-botao) var(--mov-padrao);
}
.size button:hover { transform: scale(1.1); }
.size button:active { transform: scale(.94); }
.size__preview {
  width: 3.2vh; height: 3.4vh; display: grid; place-items: center;
}
body.repetindo-tamanho .size__dot { transition: background var(--t-botao) var(--mov-padrao); }
.size__dot {
  border-radius: 50%; background: var(--pen-color, #14161a);
  transition: width .09s linear, height .09s linear, background var(--t-botao) var(--mov-padrao);
  /* Mesmo anel das amostras de cor: aro branco por dentro e uma
     linha fina de contorno por fora. A bolinha mostra a cor E a
     espessura do pincel, e com preto no escuro (ou branco no claro)
     ela sumia no fundo — o tamanho, que e a informacao principal,
     ficava invisivel. */
  border: .3vh solid #fff;
  box-shadow: 0 0 0 .12vh var(--borda), var(--shadow-sm);
  box-sizing: content-box;
}
.size__num {
  font-size: max(1.4vh, 11.2px); font-weight: 800; color: var(--ink-soft);
  min-width: 2.5vh; text-align: center; letter-spacing: .02em;
}

/* ---------- velocidade do pincel ----------
   Mesmo desenho do controle de espessura, com o sinal no lugar da
   bolinha: ali a bolinha mostra a espessura, e aqui nao ha tamanho
   nenhum para mostrar — o que ha e o que o controle FAZ. */
.size--vel .vel-sinal {
  width: 2.6vh; height: 2.6vh; display: grid; place-items: center;
  color: var(--ink-soft);
}
.size--vel .vel-sinal svg { width: 100%; height: 100%; display: block; }
/* Devagar, o sinal acende: e o unico aviso de que o pincel esta
   perseguindo o ponteiro em vez de colar nele. */
body.pincel-devagar .size--vel .vel-sinal { color: var(--primaria-tinta); }
body.pincel-devagar .size--vel { background: #e9f0ff; }

/* ==========================================================
   BOTAO COM REGUA VERTICAL
   ==========================================================
   O controle e um botao com o valor escrito nele; a regua sobe por
   cima do mural quando o ponteiro chega. Em fila, tres reguas com - e
   + ocupavam metade da barra de baixo e ela quebrava em duas linhas
   em tela estreita; assim cada uma ocupa o espaco de um icone.

   O VALOR FICA NO BOTAO de proposito: sem ele seria preciso abrir a
   gaveta so para saber em quanto esta. */
.mini-ctrl { position: relative; }
.mini-ctrl__bt {
  display: flex; align-items: center; gap: .5vh;
  height: 3.8vh; padding: 0 1vh; border-radius: 10vh;
  background: #f3f6fa; color: var(--ink-soft);
  transition: background var(--t-botao) var(--mov-padrao);
}
.mini-ctrl__bt:hover, .mini-ctrl.aberto .mini-ctrl__bt { background: #e4ecf8; color: var(--ink); }
/* O ICONE NAO ENCOLHE. Medido: dentro da gaveta da engrenagem a
   coluna e estreita — a largura sai da regua —, e sem isto o flex
   espremia o icone ate zero de largura. Sobrava o numero sozinho, sem
   dizer de que ajuste ele era; so o do perfil escapava, porque a
   fileira dos tres lados alargava aquela coluna. */
.mini-ctrl__bt svg {
  width: max(2vh, 16px); height: max(2vh, 16px); display: block; flex: 0 0 auto;
}

/* A ENGRENAGEM MEDE O MESMO QUE OS VIZINHOS DA BARRA.
   "O icone da engrenagem esta com o tamanho certo? parece pequeno."
   Estava mesmo: 18,3px contra os 20,1px de todos os outros icones da
   barra, porque ele herdava a medida dos mostradores das reguas, e
   nao a das ferramentas. Nove por cento nao se nota lado a lado, mas
   se nota numa fileira. */
#bt-ajustes svg { width: max(2.2vh, 17.6px); height: max(2.2vh, 17.6px); }

/* O ZOOM OCUPAVA 87px, O MAIOR ITEM DA BARRA.
   "Da para diminuir a barrinha do zoom para ficar mais compacto;
   quero ganhar mais espaco na barra."

   Medido por dentro: 18,3 de folga nas laterais, 18,3 de lupa, 4,6 de
   vao e 45,7 de numero. O numero NAO e gordura — ele e fixo para
   caber "400%" sem a barra inteira andar a cada passo de zoom, e
   "400%" mede 36 mais a folga dele. A gordura era a folga de fora,
   que era o dobro da dos outros botoes, e o vao de dentro, que
   destoava do vao da barra. */
#ctrl-zoom .mini-ctrl__bt { padding: 0 .55vh; gap: var(--vao-barra); }
.mini-ctrl__val {
  font-size: max(1.4vh, 11.2px); font-weight: 800; letter-spacing: .02em;
  min-width: 2.6vh; text-align: center;
  /* O numero se escreve: o cursor de texto e o aro no foco sao o que
     conta isso sem precisar de um rotulo dizendo. */
  cursor: text; border-radius: .5vh; padding: 0 .3vh;
  white-space: nowrap; outline: none;
}
.mini-ctrl__val:hover { background: rgba(37,99,235,.12); }

/* ---------- O NUMERO EM EDICAO SE DESTACA PELO ARO, e nao pelo fundo
   ----------
   O pedido original foi "adicione essa caixa retangular azul no zoom
   ao clicar tambem, e em tudo que tiver opcao de digitar os numeros",
   e o campo passou a ficar AZUL POR INTEIRO enquanto recebia o
   teclado. O retorno veio depois, apontando os mesmos campos um por
   um: "retirar esse fundo azul do formato de pagina", "retirar o
   fundo azul desses tambem". Com razao: um retangulo azul chapado no
   meio de uma barra de botoes claros nao parece um campo em edicao,
   parece um alerta, e no painel de formato de pagina ele chegava a
   parecer um valor recusado.

   O aro diz o mesmo sem gritar. O campo continua dizendo as tres
   coisas que precisava dizer — que aquilo e um campo, que esta
   recebendo o que se digita, e que o texto esta todo selecionado e
   vai embora na primeira tecla —, so que agora a terceira fica por
   conta da SELECAO, que e azul por natureza e e onde todo mundo ja
   sabe procurar.

   A regra continua pegando os TRES tipos de campo de numero que
   existem, pelo TIPO e nao por uma lista de ids: o mostrador das
   reguas da gaveta, que e um `contenteditable`; os
   `input[type=number]` dos paineis — tamanho da pagina, angulo do
   gradiente, zoom da foto, margem, respiro —; e, desde que as vinte e
   quatro barrinhas dos paineis passaram a aceitar numero escrito, o
   `.num-escrevivel`, que o `numeroQueSeEscreve` poe em cada
   mostrador que liga. */
input[type="number"]:focus,
.mini-ctrl__val.editando,
.mini-ctrl__val:focus,
.num-escrevivel.editando,
.num-escrevivel:focus {
  background: #fff; color: #14161a; border-color: var(--primaria-tinta);
  box-shadow: 0 0 0 .18vh var(--primaria-tinta); outline: none; caret-color: var(--primaria-tinta);
}
/* Com o fundo claro, a selecao volta a ser a azul de sempre. */
input[type="number"]:focus::selection,
.mini-ctrl__val.editando::selection,
.mini-ctrl__val:focus::selection,
.num-escrevivel.editando::selection,
.num-escrevivel:focus::selection { background: var(--primaria); color: #fff; }
body.noite input[type="number"]:focus,
body.noite .mini-ctrl__val.editando,
body.noite .mini-ctrl__val:focus,
body.noite .num-escrevivel.editando,
body.noite .num-escrevivel:focus { background: #17161c; color: #f3f1ee; }

/* QUE DA PARA ESCREVER, PRECISA SE OFERECER — E O TEMPO TODO.

   Primeiro o convite so aparecia no hover, com medo de que vinte e
   cinco quadrinhos virassem um painel de formulario. Nao viraram: o
   quadrinho e o que diz que aquilo aceita clique, e sem ele ninguem
   descobre. Campo que ninguem descobre e campo que nao existe.

   O TAMANHO E UM SO, E FOI MEDIDO. Caixa de 5,4vh, que da 41,8px de
   texto por dentro. O pior caso de cada barrinha do site:

     400         23,1px      100%        28,5px
     pilula      29,8px      1800px      40,3px   (o teto do Alcance)
     como veio   54,8px      <- o unico que nao cabe

   O "como veio" era o unico que nao cabia, e ele deixou de existir:
   o painel dos cantos passou a abrir dizendo "0 px", que e o que a
   barra ao lado ja dizia. Hoje as vinte e cinco caixas medem o mesmo
   49,4px — CONFERIDO uma a uma, com o maior valor que cada barra
   alcanca; a mais apertada e o Alcance da luz, "1800px", com 1,6px
   de folga.

   O `min-width` no lugar de largura fixa e so o seguro dessa folga:
   nao muda nada hoje, e no dia em que algum valor passar de 41,9px
   ele cresce em vez de ser cortado. Caixa que esconde o que diz e
   pior do que caixa fora do esquadro.

   O FUNDO DO ESCURO NAO E `--fundo`. MEDIDO: `--fundo` no escuro e
   #141318, e a superficie atras do mostrador e #17161c — 1,03 de
   contraste, ou seja, a mesma cor, e a caixa sumia. O tom das bordas
   da 1,31, e a borda sobe um degrau para nao se perder no fundo. */
.num-escrevivel {
  display: inline-block; box-sizing: border-box;
  min-width: 5.4vh; padding: .38vh .3vh; margin: 0 0 0 .8vh;
  background: var(--fundo); border: .12vh solid var(--borda); border-radius: .7vh;
  color: var(--ink); text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: max(1.3vh, 10.4px); font-weight: 700;
  cursor: text;
  transition: background var(--t-hover-sai, 170ms) var(--mov-padrao, ease),
              border-color var(--t-hover-sai, 170ms) var(--mov-padrao, ease);
}
/* No `.campo` o numero e o fim da linha do nome, e quem o empurra
   para a direita e o float — nas outras casas (`.cor-forma__t`, que
   e flex, e `.cam-faixa`, que e grade) o lugar ja vem do arranjo. */
.campo > .num-escrevivel { float: right; }
.num-escrevivel:hover:not(.editando) { background: var(--linha); border-color: var(--ponto); }
body.noite .num-escrevivel { background: #2d2c36; border-color: #46454f; color: #f3f1ee; }
body.noite .num-escrevivel:hover:not(.editando) { background: #38374333; border-color: #5a5967; }

/* A gaveta sai de cima do botao, e nao ao lado: a barra de baixo
   encosta na borda da tela, e ao lado ela sairia do quadro nas
   pontas. */
.mini-ctrl__pop {
  position: absolute; left: 50%; bottom: calc(100% + 1vh);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6vh;
  background: #fff; border: .12vh solid var(--borda); border-radius: 1.4vh;
  box-shadow: var(--shadow-md); padding: 1vh .8vh;
  z-index: 99;
  animation: subirRegua var(--t-botao) var(--mov-entrada);
}
@keyframes subirRegua { from { opacity: 0; transform: translate(-50%, .8vh); } }
/* Uma ponte invisivel entre o botao e a gaveta: o caminho de um ao
   outro passa por fora dos dois, e sem ela o ponteiro saia da area no
   meio do gesto. */
.mini-ctrl__pop::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.2vh;
}
.mini-ctrl__passo {
  width: 3vh; height: 3vh; border-radius: 50%; display: grid; place-items: center;
  background: #f3f6fa; font-weight: 800; font-size: max(1.9vh, 15px); line-height: 1;
  color: var(--ink-soft);
}
.mini-ctrl__passo:hover { background: var(--primaria); color: #fff; }
/* A regua em pe. O writing-mode vertical e o caminho moderno; o
   appearance: slider-vertical fica para quem ainda nao o tem. */
/* A REGUA EM PE E PINTADA POR NOS, e nao pelo navegador.

   No tema escuro o trilho saia BRANCO, com a parte preenchida azul
   embaixo dele — "veja como a barra de % de zoom fica branca
   estranhamente".

   DUAS TENTATIVAS ANTES DESTA, e as duas falharam, o que vale
   registrar para ninguem repetir:

   1. `color-scheme: dark` ja estava no `body.noite`, e MEDIDO na
      propria regua ele chega como `dark`. O trilho continuou branco.
   2. O `appearance: slider-vertical`, que estava aqui como reserva
      do `writing-mode`, era suspeito de levar o navegador ao
      desenhista antigo. Tirei; `appearance` passou a `auto` e a
      regua continuou em pe — e o trilho, branco do mesmo jeito.

   O desenho nativo dessa regua simplesmente nao segue o tema. Entao
   ela deixa de ser nativa: `appearance: none` e trilho e botao
   escritos aqui, com os mesmos tokens do resto. Nos dois temas, para
   os dois ficarem iguais em vez de um deles ser remendo do outro. */
/* ---- A REGUA EM PE E DESENHADA PELO NAVEGADOR ----

   "Ajuste a barra para ficar igual, com o trilho igual do outro."

   Ela era desenhada a mao: `appearance: none`, trilho transparente,
   botao proprio e o fio pintado como gradiente no fundo. Isso nasceu
   para matar uma faixa escura que o trilho nativo deixava atras dela
   — com a regua em pe, o navegador ignorava a largura pedida e
   esticava o trilho na regua inteira, 16,75px de fundo escuro.

   So que desenhar a mao custa parecer com a outra: a deitada ganha de
   `accent-color` o trilho ja preenchido ate o botao, com pontas
   redondas e grossura certa, e nenhuma conta minha chega perto disso.
   A primeira tentativa foi pintar o preenchido com um segundo
   gradiente; ficou funcional e DIFERENTE — fio fino, ponta reta.

   `writing-mode: vertical-lr` com `direction: rtl` e a forma de pedir
   uma regua em pe NATIVA: o navegador desenha trilho, preenchimento e
   botao, e a faixa escura de antes nao volta porque o `appearance`
   deixou de ser `none` — era a mistura dos dois que a criava. As duas
   reguas passam a sair do mesmo pincel, e `accent-color` as pinta
   juntas. */
/* A REGUA EM PE E A NATIVA DO NAVEGADOR.

   `writing-mode: vertical-lr` com `direction: rtl` pede uma regua em
   pe de verdade: o navegador desenha trilho, preenchimento e botao, e
   `accent-color` pinta os tres de uma vez.

   NO ESCURO ELE PINTA O TRILHO VAZIO BRANCO, e nao cinza como o da
   regua deitada — o Chromium nao honra `color-scheme` nesse desenho,
   e nao ha CSS que alcance o trilho sem desligar o preenchimento
   junto (testado: `background`, gradiente, `appearance`,
   `color-scheme` embutido; so o pseudo-elemento alcanca, e ele mata
   o `accent-color`).

   ESSA DIFERENCA E DELIBERADA. Houve uma versao com o trilho
   desenhado a mao, do tom da deitada, e ela foi comparada lado a
   lado com esta: o branco ganha. Sobre o painel escuro ele diz
   melhor ate onde a regua vai, que e o trabalho de uma regua. O
   desenho fica no git, caso um dia incomode. */
.mini-ctrl__barra {
  writing-mode: vertical-lr; direction: rtl;
  width: 2.4vh; height: 14vh; margin: 0; cursor: pointer;
  accent-color: var(--primaria);
  background: transparent;
}

.mini-ctrl__pop .size__preview { width: 3.4vh; height: 3.4vh; }
/* A REGRA DAQUI SAIU, E E POR ISSO QUE A FORMA ERA MINUSCULA.

   Era `.mini-ctrl__lados button`, de quando a forma eram tres botoes
   em fila. Quando eles viraram um mostrador com duas setas, as
   medidas novas foram escritas em `.mini-ctrl__forma` e
   `.mini-ctrl__anda` — e nunca valeram: `.mini-ctrl__lados button`
   tem classe MAIS elemento, e isso ganha de classe sozinha, esteja
   onde estiver no arquivo. O botao continuou com os 2.8vh e os 11px
   de letra da versao antiga, e as medidas novas ficaram escritas
   sem nunca pintar um pixel. MEDIDO: 25x25 com letra de 12.74px,
   dentro de uma pastilha de 60x53 como as das vizinhas.

   As medidas agora estao num lugar so, mais abaixo, junto do resto
   do controle da forma. */

/* Devagar, o controle acende: e o unico aviso de que o pincel esta
   perseguindo o ponteiro em vez de colar nele. */
body.pincel-devagar #ctrl-velocidade .mini-ctrl__bt { background: #e9f0ff; color: var(--primaria-tinta); }

body.noite .mini-ctrl__bt,
body.noite .mini-ctrl__passo { background: #23232b; color: #c9c9d2; }
body.noite .mini-ctrl__pop { background: #1d1c22; border-color: #2d2c36; }

/* ---------- a lista das pecas presas ----------
   Uma linha por peca: o nome, que da para trocar, e o cadeado que a
   solta. E a unica porta de volta — presa, a peca nao recebe clique
   nenhum.

   Ela mora dentro do painel do cadeado de cima, embaixo dos modos de
   travar o mural, separada por um fio: e o mesmo assunto em outra
   escala, e nao um segundo painel. */
.presas-bloco { margin-top: 1.2vh; border-top: .1vh solid var(--borda); padding-top: 1vh; }

/* A bolinha fica MEIO PARA FORA do botao, no canto de cima: dentro
   dele, num botao de 3,2vh, ela comeria o cadeado. O `#dots` nao
   recorta o que passa da borda, entao da para ela sobrar. */
#dots-cadeado { position: relative; overflow: visible; }
.conta-presas {
  position: absolute; top: -.5vh; right: -.5vh;
  min-width: 1.7vh; height: 1.7vh; padding: 0 .35vh;
  border-radius: 10vh; background: var(--primaria); color: #fff;
  font-size: max(1.05vh, 9px); font-weight: 800; line-height: 1.7vh;
  text-align: center; pointer-events: none;
}
/* Travado, o botao inteiro acende: a bolinha sumiria dentro dele, e
   um aro claro a devolve. Valia quando os dois eram vermelhos e
   continua valendo agora que os dois sao azuis — o aro nao separa
   duas CORES, separa duas pecas que se encostam. */
#dots-cadeado.on .conta-presas { box-shadow: 0 0 0 .18vh #fff; }
.presas { display: grid; gap: .5vh; min-width: 30vh; max-height: 46vh; overflow: auto; }
.presa {
  display: flex; align-items: center; gap: .8vh;
  background: #f3f6fa; border-radius: 1vh; padding: .5vh .6vh .5vh 1vh;
}
/* O nome e um campo de verdade, e nao um `contenteditable`: aqui ele
   e um dado curto de uma linha, e o campo ja traz selecao, desfazer e
   teclado do sistema de graca. */
.presa__nome {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; padding: .2vh .4vh; border-radius: .6vh;
  font: inherit; font-size: max(1.5vh, 12px); color: var(--ink);
}
.presa__nome:hover { background: #e4ecf8; }
.presa__nome:focus { background: #fff; outline: .18vh solid var(--primaria-tinta); }
.presa__soltar {
  flex: 0 0 auto; width: 3.2vh; height: 3.2vh; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--red, #e8232a);
}
.presa__soltar:hover { background: var(--red, #e8232a); color: #fff; }
.presa__soltar svg { width: 1.9vh; height: 1.9vh; }
.presas__vazio { color: var(--ink-soft); font-size: max(1.5vh, 12px); padding: .6vh 1vh; }
/* A mesma cara do "Destravar tudo" logo acima: sao a mesma coisa em
   duas escalas, e botoes iguais dizem isso sem precisar escrever. */
/* O desenho dos dois "Destravar tudo" mora no clean.css, numa regra
   so: eles sao a mesma coisa em duas escalas. Aqui ficou o que e deste
   — o respiro menor, por estar dentro de um bloco e nao no fim do
   painel. */
.presas-soltar { margin-top: .6vh; }
/* `:not(:hover)` PORQUE O ESCURO SÓ TEM DE DIZER O REPOUSO. Com o
   seletor solto ele vence o hover por especificidade — `body.noite
   .presa__soltar` tem duas classes e um elemento, `.presa__soltar
   :hover` tem duas classes — e o vermelho que avisa “isto destrava”
   nunca aparecia no tema escuro: o ícone só clareava sobre o mesmo
   fundo. Dito assim, o hover dos dois temas é um só, e não duas
   regras para manter em sincronia. */
/* NO ESCURO ELES SAO CONTORNO BRANCO, a pedido: "deixe esse texto e o
   cadeado com contorno branco, mantenha o tracado branco com botao
   vermelho ao passar o mouse".

   O vermelho de letra sobre o fundo escuro do painel ficava abafado —
   o aviso de "isto destrava tudo" sumia justamente onde ele importa.
   Contorno e letra brancos, e o vermelho guardado para o momento em
   que a mao chega: ai o botao inteiro acende.

   `:not(:hover)` PORQUE O ESCURO SO TEM DE DIZER O REPOUSO. Com o
   seletor solto ele vence o hover por especificidade, e o vermelho
   nunca apareceria — foi o que ja aconteceu uma vez com o botao de
   soltar de cada peca, logo abaixo. */
body.noite .cadeado-soltar:not(:hover),
body.noite .presas-soltar:not(:hover) {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.7);
}
body.noite .presa { background: #23232b; }
body.noite .presa__soltar:not(:hover) { background: #1d1c22; }

/* ---------- a gaveta da engrenagem ----------
   Os tres ajustes do traco — espessura, velocidade e perfil — moram
   atras de um botao so. Eles ja tinham encolhido uma vez, de tres
   reguas para tres pilulas com o numero escrito, e mesmo assim
   ocupavam um terco da barra.

   AS TRES REGUAS ABREM JUNTAS, lado a lado, cada uma com o seu numero
   embaixo. Pedir um segundo passar de mouse por regua seria mais
   trabalho que a fila que elas substituiram. */
.ajustes { position: relative; display: flex; align-items: center; }
/* So o icone: sem numero ao lado, a engrenagem volta a ser redonda
   como os outros botoes da barra. */
.mini-ctrl__bt--so { width: 3.8vh; padding: 0; justify-content: center; border-radius: 50%; }
.ajustes.aberto .mini-ctrl__bt--so { background: #e4ecf8; color: var(--ink); }

.ajustes__gaveta {
  position: absolute; left: 50%; bottom: calc(100% + 1vh);
  transform: translateX(-50%);
  /* ESTICADAS, e nao encostadas numa ponta so. As tres reguas tem
     alturas diferentes — a da espessura leva a bolinha de previa
     embaixo, a do perfil leva os tres lados —, e alinhando pelo pe a
     do meio descia sozinha, com o + dela um dedo abaixo dos outros
     dois. Esticadas, as reguas comecam na mesma linha em cima e os
     numeros terminam na mesma linha embaixo. */
  /* GAP ZERO, e a folga por dentro de cada coluna. Com folga por
     fora, o risco que separa duas colunas teria de flutuar no meio do
     vao, e a linha que separa as duas metades sairia picotada nos
     vaos. Coladas, as quatro bordas de baixo se emendam numa linha
     so, de ponta a ponta. */
  display: flex; align-items: stretch; gap: 0;
  background: #fff; border: .12vh solid var(--borda); border-radius: 1.4vh;
  /* Mais folga em cima: no 100 a bolinha encostava na borda — "adicione
     um pouco de espaço em branco no topo, logo acima das bolinhas". */
  box-shadow: var(--shadow-md); padding: 2.2vh 1.2vh 1vh;
  z-index: 99;
  animation: subirRegua var(--t-botao) var(--mov-entrada);
}
/* A mesma ponte das outras gavetas: o caminho do botao ate as reguas
   passa por fora dos dois, e sem ela a gaveta fecha no meio do
   gesto. */
.ajustes__gaveta::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.2vh;
}
/* DENTRO DA GAVETA A REGUA NAO E MAIS UM FLUTUANTE: ela ja esta
   aberta e entra na fila. Caixa branca dentro de caixa branca seria
   moldura em cima de moldura, e a sombra de uma cairia sobre a
   vizinha.

   A ORDEM NAO SE FAZ MAIS AQUI. Isto ja foi um `column-reverse`, para
   a pastilha do numero — que no HTML vem antes da regua — aparecer
   DEPOIS dela. Com a coluna em duas metades, a pastilha passou a
   morar dentro da metade de cima, e inverter uma fila de um item so
   nao inverte nada: a regra ficou de pe sem fazer efeito, que e a
   pior especie de regra. */
.ajustes__gaveta .mini-ctrl {
  position: static;
  display: flex; flex-direction: column; align-items: center;
  /* AS QUATRO COLUNAS REPARTEM A LARGURA EM PARTES IGUAIS.

     "Por que a barra da forma e tao mais larga? deixa padrao com os
     outros." Porque a largura saia do conteudo: as tres primeiras
     mostram um desenho so, e a da forma mostra seta-losango-seta.
     Sendo a mais larga, ela esticava a propria coluna e a fileira
     saia torta — e o risco que separa as colunas, que deveria marcar
     um ritmo, passava a marcar o tamanho do que cada uma guarda.

     `flex: 1 1 0` reparte pela GAVETA, e nao pelo conteudo: a base
     zero faz as quatro partirem do mesmo ponto, e o que cabe dentro
     e problema de cada uma. */
  flex: 1 1 0; min-width: 0;
}
.ajustes__gaveta .mini-ctrl__pop {
  position: static; transform: none;
  background: none; border: 0; box-shadow: none; padding: 0;
  animation: none;
  /* Cresce para ocupar a sobra: e o que faz as tres se alinharem em
     cima, com a folga caindo embaixo, onde ela nao se nota. */
  flex: 1 1 auto; justify-content: flex-start;
}
/* O rotulo nao e botao: ele so mostra em quanto esta. */
.mini-ctrl__bt--rotulo { cursor: default; }
.mini-ctrl__bt--rotulo:hover { background: #f3f6fa; color: var(--ink-soft); }
/* O MESMO FUNDO NO ESCURO ERA CLARO SOBRE CLARO.

   `#e4ecf8` marca o botao aberto e o botao sob o mouse — um azul
   bem claro, escolhido contra o branco da barra. No tema escuro ele
   continuava, e o texto por cima vinha de `var(--ink)`, que la e
   quase branco: MEDIDO nos rotulos da gaveta do pincel, fundo
   `rgb(228,236,248)` com letra `rgb(240,238,234)`. Nao e que
   estivesse feio — nao se lia.

   A marca continua existindo, com o tom de la. */
body.noite .mini-ctrl__bt:hover,
body.noite .mini-ctrl.aberto .mini-ctrl__bt { background: #2d2c36; color: var(--ink); }
body.noite .mini-ctrl__bt--rotulo:hover { background: #23232b; color: var(--ink-soft); }
body.noite #ctrl-zoom .mini-ctrl__bt { color: var(--ink); }
.ajustes__gaveta .mini-ctrl__pop::after { display: none; }

/* ---------- A COLUNA DA GAVETA, EM DUAS METADES ----------
   Em cima o que se MEXE: a regua e o numero que ela produz. Embaixo o
   que se LE: o nome do ajuste e a previa do efeito. A linha entre as
   duas separa uma coisa da outra, e os riscos verticais so existem na
   metade de cima — embaixo os nomes sao palavras, e palavra entre
   grades vira formulario. */
.mini-ctrl__cima {
  display: flex; flex-direction: column; align-items: center; gap: 1vh;
  flex: 1 1 auto; width: 100%; padding: 0 1.3vh;
}
/* A REGUA DA GAVETA E MAIS ALTA QUE A QUE FLUTUA SOBRE O MURAL.

   "A sua esta desbalanceada, retangular e estranhamente larga."
   Medido contra a referencia: a gaveta saiu 393 por 287, proporcao
   1,37, e a referencia e quase quadrada, 1,10. A largura nao estava
   errada — a coluna ocupa 28% da altura nas duas. O que faltava era
   ALTURA, e ela faltava num lugar so: a regua ocupava 45% da gaveta,
   contra 58% na referencia.

   Os 14vh sao da regua que sobe sozinha sobre o mural, onde ela e um
   balao passageiro e altura demais atrapalha. Aqui ela e a peca
   principal, e quatro delas lado a lado precisam de altura para nao
   virarem uma faixa. Medido depois: 393 por 355, proporcao 1,11. */
.ajustes__gaveta .mini-ctrl__barra { height: 20vh; }
/* O RISCO VERTICAL ATRAVESSA A COLUNA INTEIRA, as duas metades.
   Ele ja parou na linha do meio, e ai a grade ficava pela metade: em
   cima as colunas eram colunas, e embaixo os quatro nomes flutuavam
   soltos numa faixa. Atravessando, as duas metades sao a mesma
   grade, que e o que a referencia mostra. */
.ajustes__gaveta .mini-ctrl + .mini-ctrl {
  border-left: .12vh solid var(--borda);
}
.mini-ctrl__rodape {
  display: flex; flex-direction: column; align-items: center; gap: .9vh;
  width: 100%; margin-top: 1.2vh; padding: 1.4vh 1.3vh 0;
  position: relative;
}
/* O RISCO HORIZONTAL NAO ENCOSTA NAS BORDAS.

   Ele era a `border-top` de cada coluna, e as quatro emendadas davam
   uma linha de ponta a ponta — encostando na parede dos dois lados,
   que e o que faz uma linha parecer um corte e nao um respiro. Agora
   e um risco desenhado, e so as duas pontas se recolhem. */
.mini-ctrl__rodape::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: .12vh; background: var(--borda);
}
.ajustes__gaveta .mini-ctrl:first-child .mini-ctrl__rodape::before { left: 1.3vh; }
.ajustes__gaveta .mini-ctrl:last-child .mini-ctrl__rodape::before { right: 1.3vh; }
/* O nome por extenso: e o que a previa nao diz. Ela mostra o efeito;
   ele diz de qual dos quatro ajustes o efeito e. */
.mini-ctrl__nome {
  font-style: normal; font-weight: 700; letter-spacing: .01em;
  font-size: max(1.65vh, 13.2px); color: var(--ink); white-space: nowrap;
}
/* A previa ganhou pastilha. Solta, cada uma tinha o seu tamanho e a
   fileira saia desalinhada; na pastilha as quatro ocupam a mesma
   caixa, e o que varia e so o desenho dentro dela. */
.mini-ctrl__mostra {
  display: grid; place-items: center;
  /* Quadrada, e nao deitada: deitada ela repetia a forma da gaveta
     larga que se estava consertando, e o desenho de dentro — a
     bolinha, o xadrez — sobrava espaco dos lados e faltava em cima. */
  /* LARGURA, e nao largura minima: com minima, a da forma crescia
     para caber as duas setas e levava a coluna junto. */
  width: 6.6vh; height: 5.8vh; padding: 0;
  border-radius: 1.1vh; background: #f3f6fa;
}
body.noite .mini-ctrl__mostra { background: #23232b; }
/* Nua: o que ela guarda ja tem forma e cor proprias. */
.mini-ctrl__mostra--nua,
body.noite .mini-ctrl__mostra--nua { background: none; }
body.noite .ajustes__gaveta { background: #1d1c22; border-color: #2d2c36; }
body.noite .ajustes__gaveta .mini-ctrl__pop { background: none; }

/* ---- a previa de cada regua ----
   AS QUATRO COLUNAS TEM A MESMA ANATOMIA: regua, previa, numero.

   Era a espessura que mostrava a bolinha e o perfil que mostrava os
   tres lados; velocidade e transparencia nao mostravam nada, e como
   as colunas esticam para os numeros ficarem alinhados, a sobra
   virava um vao branco embaixo das duas. O vao virou informacao.

   A caixa das quatro tem a mesma altura de proposito: e o que faz as
   colunas terminarem na mesma linha sem deixar folga nenhuma. */
.previa-extra { height: 3.4vh; flex: 0 0 auto; }
/* A FORMA OCUPA A PASTILHA INTEIRA, como as vizinhas ocupam a delas.
   Ela media 76 de largura numa pastilha de 60 — transbordava para os
   dois lados e mesmo assim parecia menor que as outras, porque o que
   crescia era o vao entre as setas e nao o mostrador. Ocupando os 60
   por 53 e deixando o mostrador comer o que sobra das setas, ela
   passa a terminar na mesma linha das vizinhas. */
.mini-ctrl__lados {
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 100%; height: 100%;
}

/* ---- a forma: uma seta de cada lado e o que vale no meio ----
   Eram tres botoes em fila, e tres botoes ocupam tres vezes a largura
   para dizer uma coisa que so tem um valor por vez. As setas sao
   discretas de proposito: elas servem o mostrador, e nao disputam
   com ele. */
/* As setas cabem na mesma pastilha das outras previas: elas servem o
   mostrador, e nao disputam com ele. */
/* As setas tem largura FIXA e o mostrador fica com o resto: e o que
   mantem os tres dentro dos 60 da pastilha sem ninguem fazer conta.
   Elas sao estreitas e altas — estreitas porque servem o mostrador e
   nao disputam com ele, altas porque e a altura que da onde clicar. */
.mini-ctrl__anda {
  flex: 0 0 1.7vh; height: 3.8vh; padding: 0; background: none; border: 0;
  color: var(--ink-soft); font-size: max(1.8vh, 14.4px); line-height: 1;
  display: grid; place-items: center; border-radius: .6vh; cursor: pointer;
}
.mini-ctrl__anda:hover { background: rgba(37,99,235,.12); color: var(--primaria-tinta); }
.mini-ctrl__forma {
  flex: 1 1 auto; min-width: 0;
  height: 3.8vh; padding: 0; border: 0; border-radius: 1vh;
  background: #e7edf7; color: var(--ink-soft);
  font-size: max(2.3vh, 18.4px); line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
/* Aceso quer dizer "este perfil esta valendo no traco", e nao "o
   ponteiro esta aqui": por isso a cor cheia, e nao um realce. */
.mini-ctrl__forma.on { background: var(--primaria); color: #fff; }
body.noite .mini-ctrl__forma:not(.on) { background: #2d2c36; color: #c9c9d2; }
body.noite .mini-ctrl__forma.on { background: var(--primaria); color: #fff; }

/* O xadrez por baixo e a tinta por cima: e assim que se mostra
   translucidez em todo programa de desenho, e sem ele 30% de branco
   sobre fundo branco pareceria 100%. */
.opac-previa {
  width: 3.4vh; border-radius: .7vh; overflow: hidden; position: relative;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d2dae6 25%, transparent 25%, transparent 75%, #d2dae6 75%),
    linear-gradient(45deg, #d2dae6 25%, transparent 25%, transparent 75%, #d2dae6 75%);
  background-size: 1.2vh 1.2vh;
  background-position: 0 0, .6vh .6vh;
  box-shadow: inset 0 0 0 .12vh var(--borda);
}
.opac-previa i { position: absolute; inset: 0; background: var(--pen-color, #141a1a); }

.vel-previa { width: 4.6vh; color: var(--ink-soft); display: block; }
body.noite .opac-previa { background-color: #1d1c22; }

/* ---------- 15. Ajuda / atalhos ---------- */
/* A CAIXA DOS ATALHOS E A DO PAINEL DE PROPRIEDADES, e nao uma caixa
   propria parecida com ela: quem da fundo, borda, largura, canto e
   respiro e a classe `.painel-lado`, que o `#help` passou a usar.

   Aqui ficaram as regras que sao DOS ATALHOS — o titulo, as linhas, os
   icones, as teclas e o sumico. As de caixa que moravam neste bloco
   (`position: fixed; left; bottom; background; border; padding;
   max-width`) sairam: id vence classe, e guardadas elas venceriam o
   painel e desenhariam o cartao antigo dentro dele. */
#help {
  z-index: 97;                       /* por cima da barra da peca, de 96 */
  font-size: max(1.5vh, 12.0px); color: var(--ink-soft);
  transition: opacity var(--t-janela) var(--mov-padrao), right var(--t-janela) var(--mov-padrao), visibility 0s;
}
#help b { color: var(--ink); display:block; margin-bottom:1.4vh; font-size: max(1.6vh, 12.8px); letter-spacing:.04em; text-transform:uppercase; }
#help p { margin: .35vh 0; display: flex; gap: .8vh; align-items: center; }
/* O icone de cada atalho: do tamanho de uma tecla, na cor do texto.
   Vazio, ele guarda o lugar — a coluna do texto nao pode dancar de
   uma linha para a outra, que e o que mais atrapalha quem varre a
   lista com o olho. */
#help .help__ic {
  width: 1.9vh; height: 1.9vh; flex: 0 0 auto;
  color: var(--ink-soft); opacity: .8;
}

#help kbd {
  background: #eef2f8; border: .12vh solid #dde4ee; border-bottom-width: .3vh;
  border-radius: .5vh; padding: .1vh .7vh; font-family: inherit; font-weight: 700;
  color: var(--ink); font-size: max(1.4vh, 11.2px); min-width: 2.4vh; text-align: center;
}
/* Escondido de verdade, e nao so transparente. O backdrop-filter e o
   problema: o Chrome continua desenhando o desfoque do fundo mesmo com
   opacity 0, entao sobrava um retangulo borrado sobre o mural — o
   fantasma dos atalhos. Tirar o filtro resolve isso; a visibilidade
   entra depois da transicao, para o sumico continuar suave. */
/* Some para a DIREITA, e nao para baixo: um painel da borda direita
   que mergulha no rodape anda para um lado que ele nunca teve. */
/* E anda pelo `right`, como os outros painéis da direita: um
   `transform` no caminho cortava a aba de recolher até o fim da
   transição (ver `entraLado`, no clean.css). A aba faz o mesmo trajeto
   pela conta dela. */
#help.hide {
  opacity: 0; right: -2vh; pointer-events: none;
  visibility: hidden;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: opacity var(--t-janela) var(--mov-padrao), right var(--t-janela) var(--mov-padrao), visibility 0s linear var(--t-janela);
}
#help .painel-lado__aba { transition: transform var(--t-janela) var(--mov-padrao), background var(--t-botao) var(--mov-padrao), color var(--t-botao) var(--mov-padrao); }
#help.hide .painel-lado__aba { transform: translate(2vh, -50%); }


/* aviso de tela pequena */
#tiny {
  display: none;
  position: fixed; inset: 0; z-index: 200; background: #fff;
  place-items: center; text-align: center; padding: 6vw;
}
@media (max-height: 420px), (max-width: 700px) {
  #tiny { display: grid; }
}
#tiny h2 { font-family:'Archivo Black',sans-serif; font-size: 26px; margin: 0 0 12px; }
#tiny p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; max-width: 40ch; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  #board { scroll-behavior: auto; }
  .pop, .panel.is-live .pop { animation: none !important; opacity: 1; transform: none; }
  .draw-in path, .draw-in line, .draw-in polyline, .draw-in circle, .draw-in ellipse { stroke-dashoffset: 0; }
  .panel.is-live .bar__col { transition: none; }
}

/* ==========================================================
   A TARJA DO ENSAIO
   ==========================================================
   Ensaiar é percorrer o roteiro como a gravação vai percorrer, sem
   gerar arquivo. A tarja é a única coisa na tela que diz isso, então
   ela precisa ser visível sem tapar o mural: fica no alto, centrada,
   e some junto com o modo. */
.ensaio {
  position: fixed; top: 1.2vh; left: 50%; transform: translateX(-50%);
  z-index: 130; display: flex; align-items: center; gap: 1vh;
  padding: .7vh 1.6vh; border-radius: 999px;
  background: rgba(20, 22, 26, .92); color: #fff;
  font-size: max(1.4vh, 11.2px); font-weight: 600;
  box-shadow: 0 .6vh 2vh rgba(20,22,26,.35);
  pointer-events: none;
}
.ensaio b { color: var(--red); letter-spacing: .04em; text-transform: uppercase; }
.ensaio i { font-style: normal; opacity: .85; max-width: 26vh; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.ensaio__saida { opacity: .6; font-weight: 500; }
.ensaio kbd {
  font-family: inherit; background: rgba(255,255,255,.2);
  border-radius: .3vh; padding: 0 .4vh;
}
/* Ensaiando, as barras saem do caminho: quem está conferindo um
   enquadramento precisa ver o enquadramento, e nao a interface. */
body.ensaiando .dock, body.ensaiando .topo, body.ensaiando #sel-acoes { opacity: .12; }
body.ensaiando .dock:hover, body.ensaiando .topo:hover { opacity: 1; }