primocode 7.17.0 → 8.0.0

package/studio/web/render.css

@@ -0,0 +1,565 @@
+/* ==========================================================================
+   render.css — aparência do que é criado (cenas, documentos, planilhas).
+   Vai junto no export autônomo, então não depende de nada do editor.
+   ========================================================================== */
+
+.cena, .folha-doc, .planilha {
+  --f-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  --f-corpo: var(--f-display);
+  --f-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+
+  --c-fundo: #0b0d10;
+  --c-fundo2: #14181e;
+  --c-texto: #eef2f6;
+  --c-fraco: #949fac;
+  --c-tom: #ff5a36;
+  --c-tom2: #ffb03a;
+  --c-linha: rgba(255, 255, 255, .12);
+  --c-cartao: rgba(255, 255, 255, .05);
+}
+
+[data-tema="claro"] {
+  --c-fundo: #ffffff; --c-fundo2: #f2f5f8; --c-texto: #0e1318; --c-fraco: #59636f;
+  --c-tom: #e04a25; --c-tom2: #1f8fe0; --c-linha: rgba(0, 0, 0, .12); --c-cartao: rgba(0, 0, 0, .035);
+}
+[data-tema="meia-noite"] {
+  --c-fundo: #08060f; --c-fundo2: #150f2c; --c-texto: #f3effd; --c-fraco: #a99cd0;
+  --c-tom: #a78bfa; --c-tom2: #f472b6; --c-linha: rgba(255, 255, 255, .14); --c-cartao: rgba(255, 255, 255, .055);
+}
+[data-tema="papel"] {
+  --f-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --f-corpo: var(--f-display);
+  --c-fundo: #f9f5ee; --c-fundo2: #efe8db; --c-texto: #221e19; --c-fraco: #6c6055;
+  --c-tom: #b4532a; --c-tom2: #3f6f4f; --c-linha: rgba(0, 0, 0, .14); --c-cartao: rgba(0, 0, 0, .04);
+}
+[data-tema="neon"] {
+  --c-fundo: #03050a; --c-fundo2: #06121c; --c-texto: #e7fbff; --c-fraco: #79a5b6;
+  --c-tom: #22e5ff; --c-tom2: #c3ff3d; --c-linha: rgba(34, 229, 255, .26); --c-cartao: rgba(34, 229, 255, .07);
+}
+[data-tema="brasa"] {
+  --c-fundo: #100906; --c-fundo2: #1f0f08; --c-texto: #fdf0e8; --c-fraco: #bf9c8a;
+  --c-tom: #ff5a36; --c-tom2: #ffb03a; --c-linha: rgba(255, 140, 90, .2); --c-cartao: rgba(255, 140, 90, .07);
+}
+[data-tema="floresta"] {
+  --c-fundo: #06110d; --c-fundo2: #0c2019; --c-texto: #e9f7f0; --c-fraco: #8fb7a6;
+  --c-tom: #2fbf7f; --c-tom2: #a3e635; --c-linha: rgba(120, 220, 170, .18); --c-cartao: rgba(120, 220, 170, .06);
+}
+[data-tema="retro"] {
+  --f-display: "Futura", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
+  --c-fundo: #f0e2c8; --c-fundo2: #e3cfa8; --c-texto: #2b1d10; --c-fraco: #7a6042;
+  --c-tom: #d1541f; --c-tom2: #3f7d6a; --c-linha: rgba(60, 40, 20, .18); --c-cartao: rgba(60, 40, 20, .06);
+}
+[data-tema="oceano"] {
+  --c-fundo: #041724; --c-fundo2: #072d42; --c-texto: #e6f6ff; --c-fraco: #86b4cd;
+  --c-tom: #38bdf8; --c-tom2: #5eead4; --c-linha: rgba(120, 200, 240, .2); --c-cartao: rgba(120, 200, 240, .07);
+}
+[data-tema="doce"] {
+  --c-fundo: #fdf2f6; --c-fundo2: #f7e0ea; --c-texto: #3d1f2e; --c-fraco: #8a6377;
+  --c-tom: #e0397a; --c-tom2: #7c5cf0; --c-linha: rgba(120, 50, 90, .16); --c-cartao: rgba(120, 50, 90, .05);
+}
+[data-tema="mono"] {
+  --f-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
+  --c-fundo: #ffffff; --c-fundo2: #eeeeee; --c-texto: #000000; --c-fraco: #666666;
+  --c-tom: #000000; --c-tom2: #000000; --c-linha: #000000; --c-cartao: #f2f2f2;
+}
+[data-tema="mono"] .el.no,
+[data-tema="mono"] .el.cartoes .cartao { border-width: 3px; border-radius: 0; }
+[data-tema="mono"] .el.txt { letter-spacing: -.04em; }
+
+/* --------------------------------------------------------------- cena ---- */
+
+.cena {
+  position: relative;
+  overflow: hidden;
+  background: var(--c-fundo);
+  color: var(--c-texto);
+  font-family: var(--f-corpo);
+  flex: 0 0 auto;
+}
+
+.cena[data-fundo="malha"] {
+  background:
+    radial-gradient(1100px 640px at 10% 4%, color-mix(in srgb, var(--c-tom) 36%, transparent), transparent 62%),
+    radial-gradient(920px 560px at 94% 96%, color-mix(in srgb, var(--c-tom2) 30%, transparent), transparent 60%),
+    var(--c-fundo);
+}
+.cena[data-fundo="brilho"] {
+  background:
+    radial-gradient(760px 480px at 50% 112%, color-mix(in srgb, var(--c-tom) 42%, transparent), transparent 68%),
+    var(--c-fundo);
+}
+.cena[data-fundo="grade"] {
+  background-image:
+    linear-gradient(var(--c-linha) 1px, transparent 1px),
+    linear-gradient(90deg, var(--c-linha) 1px, transparent 1px);
+  background-size: 72px 72px;
+  background-color: var(--c-fundo);
+}
+.cena[data-fundo="pontos"] {
+  background-image: radial-gradient(var(--c-linha) 1.7px, transparent 1.7px);
+  background-size: 38px 38px;
+  background-color: var(--c-fundo);
+}
+.cena[data-fundo="suave"] { background: linear-gradient(158deg, var(--c-fundo2), var(--c-fundo) 62%); }
+.cena[data-fundo="vinheta"] {
+  background:
+    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%),
+    var(--c-fundo);
+}
+.cena[data-fundo="aurora"] {
+  background:
+    radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--c-tom) 55%, transparent), transparent 55%),
+    radial-gradient(760px 620px at 78% 18%, color-mix(in srgb, var(--c-tom2) 45%, transparent), transparent 58%),
+    radial-gradient(1000px 520px at 55% 105%, color-mix(in srgb, var(--c-tom) 30%, transparent), transparent 60%),
+    var(--c-fundo);
+}
+.cena[data-fundo="raios"] {
+  background:
+    repeating-conic-gradient(from 210deg at 78% -10%,
+      color-mix(in srgb, var(--c-tom) 16%, transparent) 0deg 5deg, transparent 5deg 13deg),
+    linear-gradient(160deg, var(--c-fundo2), var(--c-fundo) 70%);
+}
+.cena[data-fundo="ondas"] {
+  background:
+    repeating-linear-gradient(115deg,
+      color-mix(in srgb, var(--c-tom) 9%, transparent) 0 3px, transparent 3px 26px),
+    linear-gradient(200deg, var(--c-fundo2), var(--c-fundo) 65%);
+}
+.cena[data-fundo="nevoa"] {
+  background:
+    radial-gradient(1200px 700px at 30% 110%, color-mix(in srgb, var(--c-fundo2) 90%, white 10%), transparent 60%),
+    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--c-tom) 20%, transparent), transparent 60%),
+    var(--c-fundo);
+}
+.cena[data-fundo="xadrez"] {
+  background-image:
+    linear-gradient(45deg, var(--c-cartao) 25%, transparent 25%, transparent 75%, var(--c-cartao) 75%),
+    linear-gradient(45deg, var(--c-cartao) 25%, transparent 25%, transparent 75%, var(--c-cartao) 75%);
+  background-size: 120px 120px;
+  background-position: 0 0, 60px 60px;
+  background-color: var(--c-fundo);
+}
+
+.cena .cobertura { position: absolute; inset: 0; z-index: 0; }
+
+/* acabamentos — textura por cima de tudo, sem tocar no conteúdo ---------- */
+
+.cena::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+  display: none;
+}
+.cena[data-acabamento]::after { display: block; }
+
+.cena[data-acabamento="grao"]::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.42'/%3E%3C/svg%3E");
+  opacity: .22;
+  mix-blend-mode: overlay;
+}
+.cena[data-acabamento="vinheta"]::after {
+  background: radial-gradient(125% 95% at 50% 45%, transparent 42%, rgba(0, 0, 0, .62) 100%);
+}
+.cena[data-acabamento="scanlines"]::after {
+  background: repeating-linear-gradient(rgba(0, 0, 0, .26) 0 2px, transparent 2px 5px);
+  opacity: .5;
+}
+.cena[data-acabamento="luz"]::after {
+  background: linear-gradient(118deg, transparent 34%,
+    color-mix(in srgb, var(--c-tom2) 26%, transparent) 47%, transparent 60%);
+  mix-blend-mode: screen;
+}
+.cena[data-acabamento="brilho"]::after {
+  background: radial-gradient(60% 45% at 50% 50%,
+    color-mix(in srgb, var(--c-tom) 22%, transparent), transparent 72%);
+  mix-blend-mode: screen;
+}
+.cena[data-acabamento="moldura"]::after {
+  border: 3px solid var(--c-linha);
+  inset: 34px;
+  border-radius: 4px;
+}
+
+/* fluxo — o estúdio posiciona quando a cena usa um layout nomeado -------- */
+
+.cena .fluxo {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 34px;
+}
+.cena .fluxo > .el { flex: 0 0 auto; max-width: 100%; }
+
+.cena .fluxo[data-layout="capa"],
+.cena .fluxo[data-layout="centro"],
+.cena .fluxo[data-layout="citacao"] { align-items: center; text-align: center; }
+.cena .fluxo[data-layout="capa"] > .el.txt,
+.cena .fluxo[data-layout="centro"] > .el.txt,
+.cena .fluxo[data-layout="citacao"] > .el { align-items: center; }
+.cena .fluxo[data-layout="capa"] > .el.txt.corpo { max-width: 74%; }
+
+.cena .fluxo[data-layout="secao"] { gap: 20px; }
+.cena .fluxo[data-layout="numeros"] { gap: 76px; }
+
+.cena .fluxo .colunas { display: grid; gap: 42px; align-items: start; }
+.cena .fluxo .colunas > .el { position: relative; }
+
+.cena .fluxo[data-layout="imagem-direita"],
+.cena .fluxo[data-layout="imagem-esquerda"] {
+  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1.05fr 1fr;
+  gap: 0;
+}
+.cena .fluxo .lado-texto {
+  display: flex; flex-direction: column; justify-content: center; gap: 30px;
+  min-width: 0;
+}
+.cena .fluxo .lado-imagem { position: relative; overflow: hidden; }
+.cena .fluxo .lado-imagem .el.imagem { border-radius: 0 !important; }
+
+/* elementos ------------------------------------------------------------- */
+
+.el { position: absolute; }
+.el.txt {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-family: var(--f-display);
+  letter-spacing: -.022em;
+  line-height: 1.12;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.el.txt.corpo { font-family: var(--f-corpo); letter-spacing: -.005em; line-height: 1.5; }
+.el.txt.chapeu {
+  font-size: 22px; font-weight: 640; letter-spacing: .17em;
+  text-transform: uppercase; color: var(--c-tom); line-height: 1.3;
+}
+
+/* estilos de texto — o oposto do "tudo igual" ---------------------------- */
+
+.el.txt[data-estilo="gradiente"] {
+  background: linear-gradient(96deg, var(--c-tom), var(--c-tom2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.el.txt[data-estilo="contorno"] {
+  color: transparent;
+  -webkit-text-stroke: 2.5px var(--c-texto);
+}
+.el.txt[data-estilo="contorno-tom"] {
+  color: transparent;
+  -webkit-text-stroke: 2.5px var(--c-tom);
+}
+.el.txt[data-estilo="sombra"] { text-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
+.el.txt[data-estilo="brilho"] {
+  text-shadow: 0 0 28px color-mix(in srgb, var(--c-tom) 85%, transparent),
+               0 0 70px color-mix(in srgb, var(--c-tom) 45%, transparent);
+}
+.el.txt[data-estilo="relevo"] { text-shadow: 5px 5px 0 var(--c-tom); }
+.el.txt[data-estilo="marcador"] .marca,
+.el.txt[data-estilo="marcador"] { display: inline; }
+.el.txt[data-estilo="marcador"] > span.linha {
+  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c-tom) 55%, transparent) 58%);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  padding: 0 .08em;
+}
+.el.txt[data-estilo="fita"] > span.linha {
+  background: var(--c-tom);
+  color: #fff;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  padding: .06em .22em;
+}
+.el.txt[data-estilo="caixa"] {
+  border: 3px solid var(--c-tom);
+  border-radius: 18px;
+  padding: .34em .5em;
+}
+
+.el.forma { border-radius: 0; }
+.el.imagem { overflow: hidden; }
+.el.imagem img { width: 100%; height: 100%; display: block; }
+
+/* movimento de imagem (Ken Burns) ---------------------------------------- */
+
+@keyframes kbAproxima { from { transform: scale(1); } to { transform: scale(1.16); } }
+@keyframes kbAfasta { from { transform: scale(1.16); } to { transform: scale(1); } }
+@keyframes kbEsquerda { from { transform: scale(1.16) translateX(3%); } to { transform: scale(1.16) translateX(-3%); } }
+@keyframes kbDireita { from { transform: scale(1.16) translateX(-3%); } to { transform: scale(1.16) translateX(3%); } }
+@keyframes kbCima { from { transform: scale(1.16) translateY(3%); } to { transform: scale(1.16) translateY(-3%); } }
+
+.el.imagem[data-mov] img { animation-duration: 9s; animation-timing-function: linear; animation-fill-mode: both; }
+.el.imagem[data-mov="aproximar"] img { animation-name: kbAproxima; }
+.el.imagem[data-mov="afastar"] img { animation-name: kbAfasta; }
+.el.imagem[data-mov="esquerda"] img { animation-name: kbEsquerda; }
+.el.imagem[data-mov="direita"] img { animation-name: kbDireita; }
+.el.imagem[data-mov="cima"] img { animation-name: kbCima; }
+
+.el.lista { display: flex; flex-direction: column; gap: calc(18px * var(--esc, 1)); justify-content: center; }
+.el.lista .item {
+  position: relative;
+  padding-left: calc(42px * var(--esc, 1));
+  font-size: calc(34px * var(--esc, 1));
+  line-height: 1.42;
+}
+.el.lista .item::before {
+  content: ""; position: absolute; left: 4px; top: .58em;
+  width: 12px; height: 12px; border-radius: 4px; background: var(--c-tom);
+}
+.el.lista.numerada .item::before {
+  content: counter(li); counter-increment: li;
+  width: 30px; height: 30px; left: 0; top: .12em;
+  border-radius: 9px; background: var(--c-cartao);
+  border: 1px solid var(--c-linha); color: var(--c-tom);
+  font-size: 16px; font-weight: 640;
+  display: grid; place-items: center;
+}
+.el.lista.numerada { counter-reset: li; }
+
+.el.cartoes { display: grid; gap: 24px; align-content: center; }
+.el.cartoes .cartao {
+  background: var(--c-cartao);
+  border: 1px solid var(--c-linha);
+  border-radius: 20px;
+  padding: 26px 28px;
+  display: grid; gap: 8px; align-content: start;
+}
+.el.cartoes .cartao b { font-family: var(--f-display); font-size: 27px; font-weight: 620; letter-spacing: -.02em; }
+.el.cartoes .cartao span { font-size: 19px; line-height: 1.45; color: var(--c-fraco); }
+
+.el.numeros { display: grid; gap: calc(30px * var(--esc, 1)); align-content: center; }
+.el.numeros .num { display: grid; gap: 6px; }
+.el.numeros .num b {
+  font-family: var(--f-display);
+  font-size: var(--tam-num, calc(84px * var(--esc, 1)));
+  font-weight: 680;
+  letter-spacing: -.045em; line-height: 1; color: var(--c-tom);
+  font-variant-numeric: tabular-nums;
+}
+.el.numeros .num span {
+  font-size: calc(20px * var(--esc, 1));
+  color: var(--c-fraco); line-height: 1.35;
+}
+
+.el.tabela { display: flex; align-items: center; }
+.el.tabela table { width: 100%; border-collapse: collapse; font-size: 22px; }
+.el.tabela th, .el.tabela td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--c-linha); }
+.el.tabela th {
+  font-size: 15px; text-transform: uppercase; letter-spacing: .1em;
+  color: var(--c-fraco); font-weight: 620;
+}
+
+.el.codigo {
+  background: var(--c-fundo2);
+  border: 1px solid var(--c-linha);
+  border-radius: 18px;
+  padding: 26px 30px;
+  font-family: var(--f-mono);
+  font-size: 21px;
+  line-height: 1.6;
+  white-space: pre;
+  overflow: hidden;
+  display: flex; flex-direction: column; justify-content: center;
+}
+
+.el.citacao { display: flex; flex-direction: column; justify-content: center; gap: 26px; }
+.el.citacao .aspas {
+  font-family: var(--f-display); font-size: 52px; font-weight: 500;
+  line-height: 1.3; letter-spacing: -.02em;
+}
+.el.citacao .autor { font-size: 21px; color: var(--c-fraco); letter-spacing: .04em; }
+
+.el.icone { display: grid; place-items: center; }
+.el.icone svg { width: 100%; height: 100%; }
+
+.el.no {
+  display: grid; place-items: center; text-align: center;
+  border-radius: 18px;
+  background: var(--c-cartao);
+  border: 1.5px solid var(--c-linha);
+  font-family: var(--f-display);
+  font-size: 30px; font-weight: 580;
+  padding: 18px 22px;
+  line-height: 1.25;
+}
+.el.no.destaque { background: var(--c-tom); border-color: transparent; color: #fff; }
+.el.no.circulo { border-radius: 999px; }
+
+.cena svg.conectores { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
+
+/* animação de entrada ----------------------------------------------------- */
+
+@keyframes anSubir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
+@keyframes anSurgir { from { opacity: 0; } to { opacity: 1; } }
+@keyframes anEsq { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
+@keyframes anDir { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
+@keyframes anZoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
+@keyframes anDesfoque { from { opacity: 0; filter: blur(16px); transform: scale(1.03); } to { opacity: 1; filter: blur(0); transform: none; } }
+@keyframes anCair { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
+@keyframes anGirar { from { opacity: 0; transform: rotate(-7deg) scale(.9); } to { opacity: 1; transform: none; } }
+@keyframes anSaltar {
+  0% { opacity: 0; transform: translateY(46px) scale(.94); }
+  62% { opacity: 1; transform: translateY(-11px) scale(1.02); }
+  100% { opacity: 1; transform: none; }
+}
+@keyframes anRevelar {
+  from { opacity: 1; clip-path: inset(0 100% 0 0); }
+  to { opacity: 1; clip-path: inset(0 0 0 0); }
+}
+@keyframes anCortina {
+  from { opacity: 1; clip-path: inset(100% 0 0 0); }
+  to { opacity: 1; clip-path: inset(0 0 0 0); }
+}
+@keyframes anElastico {
+  0% { opacity: 0; transform: scale(.6); }
+  55% { opacity: 1; transform: scale(1.08); }
+  75% { transform: scale(.97); }
+  100% { opacity: 1; transform: none; }
+}
+
+.cena.animar .el[data-an] {
+  animation-duration: .66s;
+  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
+  animation-fill-mode: both;
+  animation-delay: calc(var(--atraso, 0) * 1s);
+}
+.cena.animar .el[data-an="subir"]    { animation-name: anSubir; }
+.cena.animar .el[data-an="surgir"]   { animation-name: anSurgir; }
+.cena.animar .el[data-an="esquerda"] { animation-name: anEsq; }
+.cena.animar .el[data-an="direita"]  { animation-name: anDir; }
+.cena.animar .el[data-an="zoom"]     { animation-name: anZoom; }
+.cena.animar .el[data-an="desfoque"] { animation-name: anDesfoque; }
+.cena.animar .el[data-an="cair"]     { animation-name: anCair; }
+.cena.animar .el[data-an="girar"]    { animation-name: anGirar; }
+.cena.animar .el[data-an="saltar"]   { animation-name: anSaltar; animation-duration: .9s; }
+.cena.animar .el[data-an="revelar"]  { animation-name: anRevelar; animation-duration: .85s; }
+.cena.animar .el[data-an="cortina"]  { animation-name: anCortina; animation-duration: .85s; }
+.cena.animar .el[data-an="elastico"] { animation-name: anElastico; animation-duration: .95s; }
+
+/* palavra a palavra — cada palavra entra sozinha */
+.el.txt .pal { display: inline-block; opacity: 0; }
+.cena.animar .el[data-an="palavra"] { animation: none; opacity: 1; }
+.cena.animar .el[data-an="palavra"] .pal {
+  animation: anSubir .58s cubic-bezier(.22, 1, .36, 1) both;
+  animation-delay: calc(var(--atraso, 0) * 1s + var(--p, 0) * .085s);
+}
+
+/* itens de lista com revelação em cascata */
+.cena.animar .el.lista .item[data-an] {
+  animation: anSubir .6s cubic-bezier(.22, 1, .36, 1) both;
+  animation-delay: calc(var(--atraso, 0) * 1s);
+}
+
+/* transições entre cenas (Corte) ----------------------------------------- */
+
+@keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes trDeslizar { from { opacity: 1; transform: translateX(100%); } to { transform: none; } }
+@keyframes trDeslizarCima { from { opacity: 1; transform: translateY(100%); } to { transform: none; } }
+@keyframes trZoom { from { opacity: 0; transform: scale(1.22); } to { opacity: 1; transform: none; } }
+@keyframes trLimpar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
+@keyframes trPersiana { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
+@keyframes trFlash {
+  0% { opacity: 0; filter: brightness(6); }
+  22% { opacity: 1; filter: brightness(3); }
+  100% { opacity: 1; filter: brightness(1); }
+}
+
+.cena[data-transicao] { animation-duration: .62s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); animation-fill-mode: both; }
+.cena[data-transicao="fade"]        { animation-name: trFade; }
+.cena[data-transicao="deslizar"]    { animation-name: trDeslizar; }
+.cena[data-transicao="subir"]       { animation-name: trDeslizarCima; }
+.cena[data-transicao="zoom"]        { animation-name: trZoom; }
+.cena[data-transicao="limpar"]      { animation-name: trLimpar; }
+.cena[data-transicao="persiana"]    { animation-name: trPersiana; }
+.cena[data-transicao="flash"]       { animation-name: trFlash; animation-duration: .5s; }
+.cena[data-transicao="corte"]       { animation: none; }
+
+/* ---------------------------------------------------------- documento ---- */
+
+.folha-doc {
+  width: 794px;
+  min-height: 1123px;
+  background: var(--c-fundo);
+  color: var(--c-texto);
+  font-family: var(--f-corpo);
+  padding: 84px 88px;
+  font-size: 15.5px;
+  line-height: 1.72;
+}
+.folha-doc > * { margin: 0 0 18px; }
+.folha-doc h1 { font-family: var(--f-display); font-size: 38px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 8px; font-weight: 660; }
+.folha-doc h2 { font-family: var(--f-display); font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 34px 0 12px; font-weight: 620; }
+.folha-doc h3 { font-family: var(--f-display); font-size: 18px; margin: 24px 0 8px; font-weight: 620; }
+.folha-doc .chapeu-doc { color: var(--c-tom); font-size: 12px; font-weight: 640; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
+.folha-doc .apoio { font-size: 18px; color: var(--c-fraco); line-height: 1.6; }
+.folha-doc ul, .folha-doc ol { padding-left: 22px; }
+.folha-doc li { margin-bottom: 7px; }
+.folha-doc blockquote {
+  margin: 22px 0; padding: 4px 0 4px 22px;
+  border-left: 3px solid var(--c-tom); color: var(--c-fraco); font-size: 17px;
+}
+.folha-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
+.folha-doc th, .folha-doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-linha); }
+.folha-doc th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--c-fraco); }
+.folha-doc pre {
+  background: var(--c-fundo2); border: 1px solid var(--c-linha); border-radius: 10px;
+  padding: 16px 18px; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; overflow-x: auto;
+}
+.folha-doc code { font-family: var(--f-mono); font-size: .88em; background: var(--c-cartao); padding: 1px 6px; border-radius: 5px; }
+.folha-doc hr { border: 0; border-top: 1px solid var(--c-linha); margin: 28px 0; }
+.folha-doc figure { margin: 24px 0; }
+.folha-doc figure img { width: 100%; border-radius: 10px; display: block; }
+.folha-doc figcaption { font-size: 12.5px; color: var(--c-fraco); margin-top: 8px; }
+
+/* ---------------------------------------------------------- planilha ----- */
+
+.planilha { background: var(--c-fundo); color: var(--c-texto); font-family: var(--f-corpo); }
+.planilha table { border-collapse: collapse; font-size: 13px; width: 100%; }
+.planilha th, .planilha td {
+  border: 1px solid var(--c-linha);
+  padding: 8px 11px;
+  text-align: left;
+  min-width: 96px;
+  white-space: nowrap;
+}
+.planilha thead th {
+  background: var(--c-fundo2);
+  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
+  color: var(--c-fraco); font-weight: 620;
+  position: sticky; top: 0; z-index: 2;
+}
+.planilha tbody th {
+  background: var(--c-fundo2); color: var(--c-fraco);
+  font-weight: 500; font-size: 11px; text-align: center; min-width: 42px;
+  position: sticky; left: 0; z-index: 1;
+}
+.planilha td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.planilha td.total { font-weight: 680; color: var(--c-tom); }
+.planilha td.alto { background: color-mix(in srgb, #2fbf7f 20%, transparent); }
+.planilha td.baixo { background: color-mix(in srgb, #ff5a36 20%, transparent); }
+.planilha td.sel { outline: 2px solid var(--c-tom); outline-offset: -2px; }
+.planilha td[contenteditable]:focus { outline: 2px solid var(--c-tom); outline-offset: -2px; }
+
+/* ------------------------------------------------------------ impressão -- */
+
+@media print {
+  body { background: #fff; overflow: visible; }
+  .topo, .trilho, .painel, .inspetor, .palco-barra, .tempo, .aviso { display: none !important; }
+  .palco-wrap { padding: 0; display: block; overflow: visible; }
+  .palco { box-shadow: none; border-radius: 0; }
+  .cena {
+    page-break-after: always; break-after: page;
+    -webkit-print-color-adjust: exact; print-color-adjust: exact;
+  }
+  .cena .el { animation: none !important; opacity: 1 !important; }
+  .folha-doc { padding: 0; width: auto; min-height: 0; }
+}

package/studio/web/tool.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Editor · PrimoCode Studio</title>
+<link rel="stylesheet" href="/core.css">
+<link rel="stylesheet" href="/render.css">
+</head>
+<body>
+
+<header class="topo">
+  <a class="marca" href="/"><span class="cubo">P</span>PrimoCode <em id="marca-ferr">Studio</em></a>
+  <div class="divisor"></div>
+  <input class="titulo-arq" id="titulo" placeholder="Sem título">
+  <div id="topo-extra" style="display:flex;gap:8px"></div>
+  <div class="cresce"></div>
+  <div class="estado" id="estado">—</div>
+  <div class="divisor"></div>
+  <button class="btn vazio" id="btn-codigo" title="Ver e editar o documento em JSON">Código</button>
+  <button class="btn vazio so-icone" id="btn-pdf" title="Imprimir / PDF"></button>
+  <a class="btn vazio so-icone" id="btn-baixar" title="Baixar HTML autônomo"></a>
+  <a class="btn primo" id="btn-ver" target="_blank">Abrir</a>
+</header>
+
+<main class="editor">
+  <nav class="trilho" id="trilho"></nav>
+
+  <aside class="painel">
+    <div class="painel-topo">
+      <span class="rotulo" id="painel-rotulo">Cenas</span>
+    </div>
+    <div class="painel-lista" id="painel-lista"></div>
+  </aside>
+
+  <section class="area-palco">
+    <div class="palco-wrap" id="palco-wrap"></div>
+    <div class="tempo" id="tempo" style="display:none"></div>
+    <div class="palco-barra" id="palco-barra"></div>
+  </section>
+
+  <aside class="inspetor" id="inspetor"></aside>
+</main>
+
+<div class="folha" id="folha">
+  <div class="caixa">
+    <h3>Documento em JSON</h3>
+    <p style="color:var(--fraco);font-size:12.5px;margin:0 0 12px">
+      É exatamente isto que a IA envia para a API. Edite e aplique.
+    </p>
+    <textarea id="codigo-txt" spellcheck="false"></textarea>
+    <div class="rodape">
+      <button class="btn" id="codigo-fechar">Fechar</button>
+      <button class="btn primo" id="codigo-aplicar">Aplicar</button>
+    </div>
+  </div>
+</div>
+
+<script src="/js/icones.js"></script>
+<script src="/js/ferramentas.js"></script>
+<script src="/js/render.js"></script>
+<script src="/js/render-prosa.js"></script>
+<script src="/js/render-grade.js"></script>
+<script>
+  document.getElementById("btn-pdf").innerHTML = svgIcone("tela");
+  document.getElementById("btn-baixar").innerHTML = svgIcone("baixar");
+</script>
+<script src="/js/editor.js"></script>
+</body>
+</html>

package/studio/web/view.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>PrimoCode</title>
+<link rel="stylesheet" href="/core.css">
+<link rel="stylesheet" href="/render.css">
+</head>
+<body class="modo-ver">
+
+<div id="palco" class="palco"></div>
+
+<script src="/js/icones.js"></script>
+<script src="/js/render.js"></script>
+<script src="/js/render-prosa.js"></script>
+<script src="/js/render-grade.js"></script>
+<script src="/js/player.js"></script>
+</body>
+</html>