/* =========================================================
   PÁGINA DE NOTA / TRABALHO (gerada por scripts/build.mjs).
   Mesma identidade do site: Mono, etiquetas brancas, caixas de
   borda 1px, cor e modo do tema. Coluna de leitura alinhada à
   esquerda (regra de disposição: grupos presos à margem); imagens
   "largo" e "total" avançam pra direita até a largura do conteúdo.
   ========================================================= */
.stage--flow{
  aspect-ratio:auto; height:auto; min-height:100svh;
  container-type:inline-size;
  overflow:visible;
}
.entry{
  --slack:max(0px, 100cqw - 1440 * var(--u));
  padding:calc(28 * var(--u)) calc(80 * var(--u) + var(--slack) * 80 / 1440) calc(120 * var(--u)) calc(57 * var(--u) + var(--slack) * 57 / 1440);
}
.entry-article{
  --col:min(100%, calc(760 * var(--u)));   /* coluna de leitura */
  container-type:inline-size;
  margin-top:calc(110 * var(--u));
}

/* ---------- cabeçalho ---------- */
.entry-head{ display:flex; flex-direction:column; align-items:flex-start; gap:calc(20 * var(--u)); max-width:calc(980 * var(--u)) }
.entry-head > [data-lang]{ display:flex; flex-direction:column; align-items:flex-start; gap:calc(20 * var(--u)) }
.entry-back{
  font-size:max(13px, calc(14 * var(--u))); font-weight:700; letter-spacing:.06em;
  color:var(--ink); text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
}
.entry-back:hover, .entry-back:focus-visible{ transform:translateX(-5px); outline:none; text-decoration:underline; text-underline-offset:3px }
.entry-tags{ display:flex; flex-wrap:wrap; gap:8px }
.entry-tag{
  display:inline-flex; align-items:center;
  height:calc(30 * var(--u)); min-height:26px; padding:0 calc(10 * var(--u));
  background:var(--ink); color:var(--canvas);
  font-size:max(13px, calc(15 * var(--u))); font-weight:700; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.entry-tag--line{ background:transparent; color:var(--ink); border:1px solid var(--ink) }
.entry-title{
  margin:0;
  font-size:max(28px, calc(54 * var(--u))); font-weight:400; line-height:1.1;
  text-transform:uppercase; text-wrap:balance;
}
.entry-lede{ margin:0; max-width:calc(760 * var(--u)); font-size:max(16px, calc(24 * var(--u))); line-height:1.35 }
.entry-lede u{ text-decoration-skip-ink:none; text-underline-position:from-font }

/* meta do trabalho: caixas de borda 1px (como NOW/CERTIFICATIONS) */
.entry-meta{ display:flex; flex-wrap:wrap; gap:0; margin-top:calc(8 * var(--u)) }
.entry-meta__item{ border:1px solid var(--ink); padding:calc(12 * var(--u)) calc(18 * var(--u)); min-width:calc(160 * var(--u)) }
.entry-meta__item + .entry-meta__item{ margin-left:-1px }
.entry-meta__k{ margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em; opacity:.85 }
.entry-meta__v{ margin:0; font-size:max(15px, calc(18 * var(--u))); font-weight:700 }

.entry-cover{ margin:calc(56 * var(--u)) 0 calc(64 * var(--u)); width:100% }
.entry-cover img{ display:block; width:100%; max-height:78svh; object-fit:cover; border:1px solid var(--ink) }

/* ---------- corpo em blocos ---------- */
.entry-body{ width:var(--col); font-size:max(16px, calc(18 * var(--u))); line-height:1.65 }
.entry-body::after{ content:""; display:table; clear:both }
.entry-body > * + *{ margin-top:calc(36 * var(--u)) }
.b-text > * + *{ margin-top:1em }
:where(.b-text) :where(p, ul, ol){ margin:0 }
.b-text h2{ margin:1.6em 0 0; font-size:max(20px, calc(28 * var(--u))); font-weight:700; line-height:1.2; text-transform:uppercase }
.b-text h3{ margin:1.4em 0 0; font-size:max(17px, calc(20 * var(--u))); font-weight:700; line-height:1.3 }
.b-text > :first-child{ margin-top:0 }
/* bloco que começa com título ganha respiro maior antes */
.entry-body > .b-text:has(> h2:first-child){ margin-top:calc(72 * var(--u)) }
.b-text ul, .b-text ol{ padding-left:1.4em }
.b-text li + li{ margin-top:.35em }
.b-text ul li::marker{ content:"■  "; font-size:.7em }
.b-text a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.b-text code{ font-family:inherit; background:var(--ink); color:var(--canvas); padding:.05em .35em }
.b-text u{ text-decoration-skip-ink:none; text-underline-position:from-font }

/* imagem: total (largura do conteúdo) · largo · coluna · esquerda · direita */
.b-img{ margin-left:0; margin-right:0 }
.b-img img{ display:block; width:100%; height:auto; border:1px solid var(--ink) }
.b-img figcaption, .b-gallery figcaption{ margin-top:10px; font-size:13px; line-height:1.45; opacity:.85 }
.b-img--total{ width:100cqw }
.b-img--largo{ width:min(100cqw, calc(1100 * var(--u))) }
.b-img--coluna{ width:100% }
.b-img--esquerda, .b-img--direita{ width:46%; margin-top:6px !important; margin-bottom:16px }
.b-img--esquerda{ float:left; margin-right:calc(32 * var(--u)) }
.b-img--direita{ float:right; margin-left:calc(32 * var(--u)) }
.b-img--total, .b-img--largo{ clear:both }

.b-gallery{ margin-left:0; margin-right:0; width:min(100cqw, calc(1100 * var(--u))); clear:both }
.b-gallery__grid{ display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); gap:calc(16 * var(--u)) }
.b-gallery__grid img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border:1px solid var(--ink) }

.b-quote{ margin:0; clear:both; padding:calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(24 * var(--u)); border-left:4px solid var(--ink) }
.b-quote p{ margin:0; font-size:max(20px, calc(30 * var(--u))); line-height:1.3; text-transform:uppercase }
.b-quote cite{ display:block; margin-top:12px; font-size:13px; font-style:normal; font-weight:700; letter-spacing:.06em }

.b-box{ clear:both; border:1px solid var(--ink); padding:calc(18 * var(--u)) calc(21 * var(--u)) calc(21 * var(--u)) }
.b-box__title{ display:inline-block; margin:0 0 12px; padding:1px 8px; background:var(--ink); color:var(--canvas); font-size:13px; font-weight:700; letter-spacing:.06em }
.b-box p{ margin:0 }

.b-div{ clear:both; border:0; border-top:1px solid var(--ink); margin-left:0; margin-right:0 }
.b-div--star{ border:0; display:flex }
.b-div--star .k-shape{ width:28px }

/* ---------- anterior / próxima ---------- */
.entry-nav{
  margin-top:calc(96 * var(--u)); clear:both;
  display:grid; grid-template-columns:1fr 1fr; gap:calc(31 * var(--u));
}
.entry-nav__link{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--ink); padding:calc(18 * var(--u)) calc(21 * var(--u));
  color:var(--ink); text-decoration:none;
  transition:background .3s ease, color .3s ease;
}
.entry-nav__link--next{ text-align:right; grid-column:2 }
.entry-nav__dir{ font-size:12px; font-weight:700; letter-spacing:.06em }
.entry-nav__title{ font-size:max(15px, calc(18 * var(--u))); font-weight:700; text-transform:uppercase; line-height:1.3 }
.entry-nav__link:hover, .entry-nav__link:focus-visible{ background:var(--ink); color:var(--canvas); outline:none }

@media (max-width:820px){
  .entry{ padding:24px 5% 64px }
  .entry-article{ margin-top:56px }
  .entry-title{ font-size:clamp(26px, 7.5vw, 40px) }
  .entry-body{ width:100% }
  .b-img--esquerda, .b-img--direita{ float:none; width:100%; margin:0 !important }
  .b-gallery__grid{ grid-template-columns:1fr 1fr }
  .entry-nav{ grid-template-columns:1fr }
  .entry-nav__link--next{ grid-column:auto }
}

/* alinhamento escolhido no editor (barra de ferramentas) */
.b-text[data-align="centro"], .b-quote[data-align="centro"]{ text-align:center }
.b-text[data-align="direita"], .b-quote[data-align="direita"]{ text-align:right }
.b-quote[data-align="centro"]{ border-left:0; padding-left:0 }
.b-quote[data-align="direita"]{ border-left:0; border-right:4px solid var(--ink); padding:calc(8 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) 0 }

/* aspas do set (assets/icons/set/aspas.svg) abrindo cada citação */
.b-quote{ position:relative }
.b-quote::before{
  content:""; display:block; width:max(28px, calc(36 * var(--u))); aspect-ratio:85.5 / 63.2; margin-bottom:12px;
  background:currentColor; -webkit-mask:url("../icons/set/aspas.svg") center / contain no-repeat; mask:url("../icons/set/aspas.svg") center / contain no-repeat;
}
.b-quote[data-align="centro"]::before{ margin-inline:auto }
.b-quote[data-align="direita"]::before{ margin-left:auto }


/* selo do gato pixel (assets/icons/set/gato-pixel.svg) assinando a
   publicação: fim de cada nota e projeto */
.entry-seal{
  clear:both; width:var(--col); margin-top:calc(72 * var(--u));
  display:flex; align-items:center; gap:16px;
  padding-top:calc(24 * var(--u)); border-top:1px solid var(--ink);
}
.entry-seal__cat{
  width:56px; aspect-ratio:89 / 74; flex:none;
  background:var(--ink);
  -webkit-mask:url("../icons/set/gato-pixel.svg") center / contain no-repeat;
          mask:url("../icons/set/gato-pixel.svg") center / contain no-repeat;
  transition:transform .4s cubic-bezier(.34,1.7,.5,1);
}
.entry-seal:hover .entry-seal__cat{ transform:translateX(4px) rotate(-4deg) }
.entry-seal__text{ margin:0; display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.4 }
.entry-seal__text b{ font-size:15px; text-transform:uppercase; letter-spacing:.04em }
@media (max-width:820px){ .entry-seal{ width:100% } }


/* =========================================================
   CANTONEIRAS CHINESAS — imagens de notas com a tag "chines".
   O desenho (nuvem, Figma 218:190) é o canto inferior esquerdo;
   os outros cantos são espelhos. Pintado na cor do tema e preso por
   cima da borda, como cantoneira de álbum de fotos.
   ========================================================= */
.cn-frame{ position:relative; display:block }
.b-gallery__grid .cn-frame img{ width:100% }
.cn-corner{
  position:absolute; z-index:1; width:clamp(32px, 12%, 72px); aspect-ratio:384.4 / 386.3;
  background:var(--ink);
  -webkit-mask:url("../icons/set/canto-chines.svg") center / contain no-repeat;
          mask:url("../icons/set/canto-chines.svg") center / contain no-repeat;
  pointer-events:none;
}
.cn-corner--bl{ left:-1px; bottom:-1px }
.cn-corner--tl{ left:-1px; top:-1px; transform:scaleY(-1) }
.cn-corner--tr{ right:-1px; top:-1px; transform:rotate(180deg) }
.cn-corner--br{ right:-1px; bottom:-1px; transform:scaleX(-1) }
.b-gallery .cn-corner{ width:clamp(24px, 16%, 48px) }

/* nota sem capa: respiro entre o cabeçalho e o corpo */
.entry-head{ margin-bottom:calc(56 * var(--u)) }
.entry-head + .entry-cover{ margin-top:0 }

/* =========================================================
   NOTA CENTRALIZADA — a coluna de leitura (760) fica no centro da
   página; o texto continua alinhado à esquerda dentro dela. Imagens
   "larga"/"100%", galerias e capa crescem igualmente pros dois lados.
   O cabeçalho do site (logo/menu) segue preso às margens.
   ========================================================= */
.entry-article{ --col:min(100%, calc(760 * var(--u))); --wide:min(100cqw, calc(1100 * var(--u))) }
.entry-head, .entry-body, .entry-seal{ width:var(--col); max-width:none; margin-inline:auto }
.entry-head{ align-items:flex-start }
.entry-cover{ width:var(--wide); margin-inline:auto }
.b-img--largo, .b-gallery{ width:var(--wide); margin-left:calc((var(--col) - var(--wide)) / 2) }
.b-img--total{ width:100cqw; margin-left:calc((var(--col) - 100cqw) / 2) }
.entry-nav{ width:var(--wide); margin-inline:auto }
@media (max-width:820px){
  .entry-head, .entry-body, .entry-seal, .entry-cover, .entry-nav{ width:100% }
  .b-img--largo, .b-gallery, .b-img--total{ width:100%; margin-left:0 }
}


/* =========================================================
   EFEITO THRESHOLD (assets/scripts/fx-threshold.js) — a imagem vira
   duas cores: escuro = cor do tema, claro = papel. Muda com o tema.
   ========================================================= */
.fx-dark{ flood-color:var(--blue) }
.fx-light{ flood-color:var(--paper) }
img.fx-thr-33{ filter:url(#fx-thr-33) }
img.fx-thr-50{ filter:url(#fx-thr-50) }
img.fx-thr-66{ filter:url(#fx-thr-66) }
img.fx-thr{ border-color:var(--blue) }
html[data-mode="light"] .b-img img.fx-thr{ border-color:var(--ink) }


/* =========================================================
   ÁUDIO (bloco "audio" · assets/scripts/audio.js) — player do site:
   botão quadrado com ícone em pixel + "onda" em barrinhas que enchem
   conforme toca. Segue a cor do tema e o modo claro/escuro.
   ========================================================= */
.b-audio{ display:grid; grid-template-columns:auto minmax(0, 1fr); border:1px solid var(--ink); margin-inline:0 }
.b-audio audio{ display:none }
.b-audio__play{
  width:calc(88 * var(--u)); min-width:64px; aspect-ratio:1; align-self:stretch; height:auto;
  display:grid; place-items:center; padding:0; border:0; cursor:pointer;
  background:var(--ink); color:var(--canvas);
  transition:background .2s ease, color .2s ease;
}
.b-audio__play svg{ width:44%; height:44%; fill:currentColor }
.b-audio__play:hover, .b-audio__play:focus-visible{ background:var(--canvas); color:var(--ink); outline:none; box-shadow:inset 0 0 0 1px var(--ink) }
.b-audio__main{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px 16px;
  padding:calc(14 * var(--u)) calc(18 * var(--u)); border-left:1px solid var(--ink); min-width:0;
}
.b-audio__title{ grid-column:1 / -1; margin:0; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.3 }
.b-audio__track{ display:flex; align-items:center; gap:2px; height:36px; cursor:pointer; touch-action:none; outline:none }
.b-audio__track i{ flex:1 1 0; min-width:1px; height:calc(var(--h) * 4px); background:var(--ink); opacity:.28; transition:opacity .15s ease }
.b-audio__track i.is-on{ opacity:1 }
.b-audio__track:hover i:not(.is-on){ opacity:.42 }
.b-audio__track:focus-visible{ box-shadow:0 0 0 2px var(--canvas), 0 0 0 3px var(--ink) }
.b-audio__time{ font-size:12px; font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap }
.b-audio figcaption{ grid-column:1 / -1; padding:10px calc(18 * var(--u)); border-top:1px solid var(--ink); font-size:13px; line-height:1.45; opacity:.85 }
.b-audio.is-playing .b-audio__track i.is-on:last-of-type{ opacity:1 }
@media (max-width:600px){ .b-audio__play{ width:56px; min-width:56px } .b-audio__main{ grid-template-columns:1fr } .b-audio__time{ justify-self:end } }


/* =========================================================
   HISTÓRICO (/historico) — registro de mudanças, agrupado por dia.
   Tipos sem depender de cor: NOVO cheio · MELHORIA contorno ·
   CORREÇÃO tracejado · CONTEÚDO contorno com ponto.
   ========================================================= */
.hist-stats{ display:flex; flex-wrap:wrap; margin-top:calc(8 * var(--u)) }
.hist-stat{ display:flex; flex-direction:column; gap:4px; min-width:calc(120 * var(--u)); padding:calc(12 * var(--u)) calc(16 * var(--u)); border:1px solid var(--ink); font-size:11px; font-weight:700; letter-spacing:.08em }
.hist-stat + .hist-stat{ margin-left:-1px }
.hist-stat b{ font-size:max(20px, calc(28 * var(--u))); line-height:1; letter-spacing:0 }
.hist-filter{ display:flex; flex-wrap:wrap; gap:6px }
.hist-filter button{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; cursor:pointer;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font:700 12px/1 var(--font-mono); letter-spacing:.06em; transition:background .2s ease, color .2s ease;
}
.hist-filter button:hover, .hist-filter button:focus-visible{ background:var(--ink); color:var(--canvas); outline:none }
.hist-filter button[aria-pressed="true"]{ background:var(--ink); color:var(--canvas) }
.hist-mark{ width:10px; height:10px; display:inline-block; border:1px solid currentColor; flex:none }
.hist-mark.hist-mark--novo{ background:currentColor }
.hist-mark.hist-mark--correcao{ border-style:dashed }
.hist-mark.hist-mark--conteudo{ background:radial-gradient(currentColor 0 1.5px, transparent 2px) }
.hist-days{ width:var(--col); margin-inline:auto; display:flex; flex-direction:column; gap:calc(56 * var(--u)) }
.hist-day[hidden], .hist-item[hidden]{ display:none }
.hist-day__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 0 calc(18 * var(--u));
  padding-bottom:10px; border-bottom:1px solid var(--ink);
  font-size:max(15px, calc(18 * var(--u))); letter-spacing:.04em; text-transform:uppercase;
}
.hist-day__n{ font-size:12px; font-weight:700; letter-spacing:.06em; opacity:.75; text-transform:none }
.hist-list{ list-style:none; margin:0; padding:0 0 0 calc(22 * var(--u)); position:relative; display:flex; flex-direction:column; gap:calc(14 * var(--u)) }
.hist-list::before{ content:""; position:absolute; left:3px; top:6px; bottom:6px; border-left:1px dashed var(--ink); opacity:.5 }
.hist-item{ position:relative; display:grid; grid-template-columns:calc(104 * var(--u)) minmax(0, 1fr); gap:16px; align-items:baseline }
.hist-item::before{ content:""; position:absolute; left:calc(-22 * var(--u)); top:.55em; width:7px; height:7px; background:var(--ink) }
.hist-item__type{
  justify-self:start; padding:3px 7px; font-size:10px; font-weight:700; letter-spacing:.08em; line-height:1.2; white-space:nowrap;
  border:1px solid var(--ink); color:var(--ink);
}
.hist-item__type.hist-mark--novo{ background:var(--ink); color:var(--canvas) }
.hist-item__type.hist-mark--correcao{ border-style:dashed }
.hist-item__type.hist-mark--conteudo{ box-shadow:inset 3px 0 0 var(--ink) }
.hist-item__text{ margin:0; font-size:max(15px, calc(16 * var(--u))); line-height:1.55 }
.hist .entry-seal{ margin-top:calc(80 * var(--u)) }
@media (max-width:640px){ .hist-item{ grid-template-columns:1fr; gap:6px } .hist-stat{ min-width:0; flex:1 1 30% } }


/* =========================================================
   MODELO 3D (bloco "modelo3d" · assets/scripts/model3d.js)
   Desenho técnico em linhas sobre uma grade de blueprint; o fundo é
   o do tema. Hover: a ficha técnica entra correndo pela direita.
   Clique: a ficha sai e o objeto gira 360° com o arrasto.
   ========================================================= */
.b-3d{ width:var(--wide); margin-left:calc((var(--col) - var(--wide)) / 2); color:var(--ink) }
.b-3d__stage{
  position:relative; aspect-ratio:16 / 10; overflow:hidden; border:1px solid var(--ink);
  --grid:color-mix(in srgb, var(--ink) 9%, transparent);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position:-1px -1px;
}
.b-3d__view{ position:absolute; inset:0; cursor:grab; outline:none; transition:transform .6s cubic-bezier(.2,.8,.2,1) }
.b-3d__view canvas{ display:block; width:100% !important; height:100% !important; opacity:0; transition:opacity .6s ease }
.b-3d.is-ready .b-3d__view canvas{ opacity:1 }
.b-3d__view:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink) }
.b-3d.is-active .b-3d__view{ cursor:grab }
.b-3d.is-active .b-3d__view:active{ cursor:grabbing }
.b-3d__fig, .b-3d__hint, .b-3d__load, .b-3d__err{
  position:absolute; z-index:2; pointer-events:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.b-3d__fig{ left:0; top:0; padding:4px 10px; background:var(--ink); color:var(--canvas) }
.b-3d__hint{ left:14px; bottom:12px; display:flex; align-items:center; gap:8px }
.b-3d__hint::before{ content:""; width:7px; height:7px; background:currentColor; animation:b3d-blink 1.4s steps(2) infinite }
.b-3d.is-active .b-3d__hint{ opacity:0 }
.b-3d__hint{ transition:opacity .25s ease }
@keyframes b3d-blink{ 50%{ opacity:0 } }
.b-3d__load, .b-3d__err{ inset:0; display:grid; place-items:center }
.b-3d.is-ready .b-3d__load, .b-3d.is-error .b-3d__load{ display:none }
.b-3d__err{ display:none; text-transform:none; font-weight:400; font-size:13px }
.b-3d.is-error .b-3d__err{ display:grid }
/* ficha técnica: fora do quadro, entra correndo pela direita no hover */
.b-3d__spec{
  position:absolute; z-index:3; top:0; right:0; bottom:0; width:min(44%, 380px);
  display:flex; flex-direction:column; gap:14px; padding:22px 22px 20px;
  background:var(--canvas); border-left:1px solid var(--ink);
  transform:translateX(101%); transition:transform .55s cubic-bezier(.2,.8,.2,1); pointer-events:none;
}
.b-3d__spec-tag{ align-self:flex-start; margin:0; padding:3px 8px; background:var(--ink); color:var(--canvas); font-size:11px; font-weight:700; letter-spacing:.08em }
.b-3d__rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.b-3d__rows li{
  display:grid; grid-template-columns:28px minmax(0, .9fr) minmax(0, 1.1fr); gap:10px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid color-mix(in srgb, var(--ink) 35%, transparent); font-size:12px; line-height:1.4;
  opacity:0; transform:translateX(16px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.b-3d__n{ font-size:10px; opacity:.6 }
.b-3d__k{ font-weight:700; letter-spacing:.02em }
.b-3d__note{
  margin:auto 0 0; font-size:max(15px, calc(19 * var(--u))); font-weight:700; line-height:1.25; text-transform:uppercase;
  opacity:0; transform:translateX(16px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.b-3d__spec-btn{
  position:absolute; z-index:4; right:12px; bottom:10px; display:none; height:28px; padding:0 10px; cursor:pointer;
  border:1px solid var(--ink); background:var(--canvas); color:var(--ink); font:700 11px/1 var(--font-mono); letter-spacing:.08em;
}
/* .is-peek vem do script: só com o mouse se mexendo e a página parada */
.b-3d.has-spec.is-peek:not(.is-active) .b-3d__spec{ transform:none }
.b-3d.has-spec.is-peek:not(.is-active) .b-3d__view{ transform:translateX(-18%) }
.b-3d.has-spec.is-peek:not(.is-active) .b-3d__rows li,
.b-3d.has-spec.is-peek:not(.is-active) .b-3d__note{ opacity:1; transform:none; transition-delay:calc(.18s + var(--i) * .05s) }

/* modo girar: barra de botões (topo) + console de teclas (base) */
.b-3d__bar{
  position:absolute; z-index:4; right:12px; top:12px; display:flex; gap:6px;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.b-3d.is-active .b-3d__bar{ opacity:1; transform:none; pointer-events:auto }
.b-3d__btn{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; cursor:pointer;
  border:1px solid var(--ink); background:var(--canvas); color:var(--ink);
  font:700 11px/1 var(--font-mono); letter-spacing:.08em; transition:background .2s ease, color .2s ease, transform .3s cubic-bezier(.34,1.7,.5,1);
}
.b-3d__btn svg{ width:11px; height:11px; fill:currentColor; flex:none }
.b-3d__btn:hover, .b-3d__btn:focus-visible{ background:var(--ink); color:var(--canvas); outline:none; transform:translateY(-2px) }
.b-3d__btn--solid{ background:var(--ink); color:var(--canvas) }
.b-3d__btn--solid:hover, .b-3d__btn--solid:focus-visible{ background:var(--canvas); color:var(--ink) }
.b-3d__keys{
  position:absolute; z-index:3; left:12px; bottom:10px; right:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  font-size:10px; font-weight:700; letter-spacing:.08em; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.b-3d.is-active .b-3d__keys{ opacity:1; transform:none }
.b-3d__kgroup{ display:inline-flex; align-items:center; gap:4px }
.b-3d__kgroup b{ margin-left:4px; font-weight:700 }
.b-3d__kgroup svg{ width:9px; height:11px; fill:currentColor; transition:transform .15s ease }
.b-3d__key{
  min-width:20px; height:20px; padding:0 4px; display:inline-grid; place-items:center;
  border:1px solid var(--ink); box-shadow:0 2px 0 var(--ink); background:var(--canvas); color:var(--ink);
  font:700 10px/1 var(--font-mono); transition:transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease;
}
.b-3d__key.is-down{ transform:translateY(2px); box-shadow:0 0 0 var(--ink); background:var(--ink); color:var(--canvas) }
.b-3d__keys.is-drag .b-3d__kgroup--drag{ background:var(--ink); color:var(--canvas); padding:2px 6px; margin:-2px -6px }
@media (hover:none){
  .b-3d__keys .b-3d__kgroup:not(.b-3d__kgroup--drag){ display:none }
  .b-3d__keys{ left:12px; right:auto }
}
@media (hover:none){
  .b-3d.has-spec .b-3d__spec-btn{ display:block }
  .b-3d.has-spec.is-spec:not(.is-active) .b-3d__spec{ transform:none; pointer-events:auto }
  .b-3d.has-spec.is-spec:not(.is-active) .b-3d__rows li, .b-3d.has-spec.is-spec:not(.is-active) .b-3d__note{ opacity:1; transform:none }
  .b-3d.is-active .b-3d__spec-btn{ display:none }
}
.b-3d figcaption{ margin-top:10px; font-size:13px; line-height:1.45; opacity:.85 }
@media (max-width:820px){ .b-3d{ width:100%; margin-left:0 } .b-3d__stage{ aspect-ratio:4 / 5 } .b-3d__spec{ width:100%; border-left:0 } }
@media (prefers-reduced-motion:reduce){ .b-3d__spec, .b-3d__view, .b-3d__rows li, .b-3d__note{ transition:none } .b-3d__hint::before{ animation:none } }