sagadeck 1.2.0

package/src/studio/public/inspector.js

@@ -0,0 +1,270 @@
+/* Inspetor de propriedades (como o Object Inspector do Delphi / o painel da direita do Figma).
+   Mostra só o que faz sentido para o que está selecionado no slide; Slide e Apresentação ficam sempre à vista.
+   Categorias recolhíveis (o que fica aberto é lembrado neste navegador). Toda mudança grava no deck. */
+(function () {
+  let host, ctx, pending = false;
+  const KEY = "sagadeck.inspectorOpen";
+  const openCats = (() => { try { return JSON.parse(localStorage.getItem(KEY) || "{}"); } catch { return {}; } })();
+  const saveOpen = () => { try { localStorage.setItem(KEY, JSON.stringify(openCats)); } catch {} };
+  const esc = (v) => String(v ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const ic = (name) => `<i class="ic" data-ic="${name}"></i>`;
+
+  // ---------- o que existe para cada tipo de objeto ----------
+  const is = {
+    text: (els) => els.every((n) => n.classList.contains("t")),
+    shape: (els) => els.every((n) => n.classList.contains("shape")),
+    drawn: (els) => els.every((n) => n.querySelector(":scope > .shape-svg")),
+    image: (els) => els.every((n) => n.classList.contains("fig-img") || n.querySelector(":scope > img")),
+  };
+  const WEIGHTS = [["", "Do tema"], ["400", "Normal"], ["500", "Médio"], ["600", "Semibold"], ["700", "Negrito"], ["800", "Extra"]];
+  const ALIGNS = [["", "Do layout"], ["left", "Esquerda"], ["center", "Centro"], ["right", "Direita"], ["justify", "Justificado"]];
+  const SHADOWS = [["", "Nenhuma"], ["suave", "Suave"], ["forte", "Forte"]];
+  const ANIMS = [["", "Do tema"], ["fade", "Aparecer"], ["pop", "Pular"], ["left", "Da esquerda"], ["right", "Da direita"], ["down", "De cima"], ["zoom", "Zoom"], ["none", "Sem animação"]];
+
+  function objectCats(els) {
+    const cats = [{ id: "obj-pos", title: "Posição e tamanho", rows: [
+      { k: "dx", label: "Mover na horizontal", type: "num", unit: "px" },
+      { k: "dy", label: "Mover na vertical", type: "num", unit: "px" },
+      { k: "w", label: "Largura", type: "num", unit: "px", min: 20 },
+      { k: "h", label: "Altura", type: "num", unit: "px", min: 20 },
+      { k: "rotate", label: "Rotação", type: "num", unit: "°", min: -360, max: 360 },
+      { k: "z", label: "Camada (frente/trás)", type: "num", step: 1 },
+    ] }];
+    if (is.text(els)) cats.push({ id: "obj-text", title: "Texto", rows: [
+      { k: "size", label: "Tamanho", type: "num", unit: "px", min: 10, max: 500 },
+      { k: "color", label: "Cor", type: "color" },
+      { k: "weight", label: "Peso", type: "select", options: WEIGHTS, num: true },
+      { k: "italic", label: "Itálico", type: "bool" },
+      { k: "align", label: "Alinhamento", type: "select", options: ALIGNS },
+      { k: "lineHeight", label: "Entrelinha", type: "num", unit: "×", step: 0.05, min: 0.7, max: 3 },
+      { k: "letterSpacing", label: "Espaço entre letras", type: "num", unit: "em", step: 0.01, min: -0.1, max: 0.5 },
+      { k: "uppercase", label: "Tudo maiúsculo", type: "bool" },
+    ] });
+    if (is.shape(els)) cats.push({ id: "obj-shape", title: "Preenchimento e contorno", rows: [
+      { k: "fill", label: "Preenchimento", type: "color" },
+      { k: "stroke", label: "Contorno", type: "color" },
+      { k: "strokeWidth", label: "Espessura do contorno", type: "num", unit: "px", min: 0, max: 40 },
+      ...(is.drawn(els) ? [] : [{ k: "radius", label: "Cantos arredondados", type: "num", unit: "px", min: 0 }]),
+    ] });
+    const look = [
+      { k: "opacity", label: "Opacidade", type: "range", unit: "%", scale: 100 },
+      { k: "shadow", label: "Sombra", type: "select", options: SHADOWS },
+    ];
+    if (is.image(els)) cats.push({ id: "obj-img", title: "Imagem", rows: [
+      { k: "__replace", label: "Arquivo", type: "action", text: "Trocar imagem" },
+      { k: "fit", label: "Encaixe", type: "select", options: [["", "Do slide"], ["cover", "Preencher (corta as bordas)"], ["contain", "Inteira"]] },
+      { k: "focus", label: "Ponto de foco", type: "select", hint: "Ao preencher, a parte da foto que nunca é cortada", options: [["", "Centro"], ["top", "Em cima"], ["bottom", "Embaixo"], ["left", "Esquerda"], ["right", "Direita"], ["top left", "Em cima, à esquerda"], ["top right", "Em cima, à direita"], ["bottom left", "Embaixo, à esquerda"], ["bottom right", "Embaixo, à direita"]] },
+    ] });
+    if (is.image(els)) look.push({ k: "radius", label: "Cantos arredondados", type: "num", unit: "px", min: 0 }, { k: "stroke", label: "Borda", type: "color" }, { k: "strokeWidth", label: "Espessura da borda", type: "num", unit: "px", min: 0, max: 40 });
+    cats.push({ id: "obj-look", title: "Aparência", rows: look });
+    cats.push({ id: "obj-anim", title: "Animação", rows: [
+      { k: "step", label: "Aparece no clique", type: "num", step: 1, min: 1, hint: "vazio = já aparece ao entrar no slide" },
+      { k: "anim", label: "Entrada", type: "select", options: ANIMS },
+    ] });
+    cats.push({ id: "obj-adv", title: "Avançado", rows: [
+      { k: "hidden", label: "Oculto", type: "bool" },
+      { k: "locked", label: "Travado", type: "bool", hint: "O clique no slide atravessa; selecione pela lista de objetos" },
+      { k: "__key", label: "Identificador", type: "readonly" },
+      { k: "__clear", label: "Ajustes deste objeto", type: "action", text: "Limpar tudo" },
+    ] });
+    return cats;
+  }
+
+  function slideCats() {
+    const S = ctx.state, slide = S.deck?.slides?.[S.currentSlideIndex] || {};
+    const opt = (sel) => [...(document.getElementById(sel)?.options || [])].map((o) => [o.value, o.textContent]);
+    return [{ id: "slide", title: `Slide ${S.currentSlideIndex + 1}`, target: "slide", rows: [
+      { k: "layout", label: "Layout", type: "select", options: ctx.layouts(), noEmpty: true },
+      { k: "tone", label: "Tom", type: "select", options: [["", "Do layout"], ...opt("tone-select")] },
+      { k: "deco", label: "Textura", type: "select", options: [["", "Do tema"], ...opt("deco-select")] },
+      { k: "density", label: "Densidade", type: "select", options: [["", "Padrão"], ["compact", "Compacta"], ["dense", "Mais conteúdo"]] },
+      { k: "time", label: "Tempo", type: "num", unit: "min", step: 0.5, min: 0 },
+      { k: "transition", label: "Transição", type: "select", options: [["", "Esmaecer"], ["cut", "Corte seco"]] },
+      { k: "maxWords", label: "Limite de palavras", type: "num", min: 10, max: 600, step: 10, hint: "vazio = o da apresentação" },
+      { k: "footer", label: "Rodapé", type: "select", options: [["", "Automático"], ["true", "Mostrar"], ["false", "Esconder"]], bool3: true },
+      { k: "theme", label: "Tema só neste slide", type: "select", options: [["", "O da apresentação"], ...ctx.themes()] },
+      { k: "palette", label: "Paleta só neste slide", type: "select", options: [["", "A da apresentação"], ...ctx.palettes()] },
+      { k: "bg", label: "Cor de fundo", type: "color" },
+    ] }, { id: "deck", title: "Apresentação", target: "deck", rows: [
+      { k: "aspect", label: "Proporção do slide", type: "select", hint: "16:9, 4:3, retrato… ou personalizada (L:A). Ao trocar, os layouts se ajustam sozinhos e o que tem posição livre é reescalado.", options: ctx.aspects?.() || [["", "16:9"]] },
+      { k: "purpose", label: "Uso do material", type: "select", hint: "Para apresentar: letra grande, pouco texto, para não dar sono. Para estudar depois: o material vai ser enviado e usado como fonte de estudo, então cabe bastante texto no slide.", options: [["", "Para apresentar: letra grande, pouco texto"], ...ctx.purposes()] },
+      { k: "maxWords", label: "Limite de palavras por slide", type: "num", min: 10, max: 600, step: 10, hint: "vazio = o do tipo de material" },
+      { k: "theme", label: "Tema", type: "select", options: ctx.themes(), noEmpty: true },
+      { k: "palette", label: "Paleta", type: "select", options: [["", "A do tema"], ...ctx.palettes()] },
+      { k: "markStyle", label: "Estilo do ==destaque==", type: "select", options: [["", "Marca-texto"], ["sublinhado", "Sublinhado"], ["cor", "Só cor"], ["negrito", "Negrito colorido"], ["nenhum", "Sem destaque"]] },
+      { k: "motion", label: "Animações", type: "select", options: [["", "Suaves"], ["none", "Sem animação"], ["expressive", "Expressivas"]] },
+      { k: "duration", label: "Duração", type: "num", unit: "min", min: 1, max: 600 },
+      { k: "author", label: "Autor", type: "text" },
+      { k: "date", label: "Data", type: "text", placeholder: "AAAA-MM-DD" },
+      { k: "fit.minCodePt", label: "Mínimo do código ao encolher", type: "num", unit: "pt", min: 6, max: 24, hint: "vazio = o das Preferências" },
+      { k: "fit.minTextPt", label: "Mínimo do texto ao encolher", type: "num", unit: "pt", min: 6, max: 30 },
+      { k: "fit.wrapCode", label: "Quebrar linhas longas de código", type: "select", options: [["", "O das Preferências"], ["true", "Sim"], ["false", "Não"]], bool3: true },
+    ] }];
+  }
+
+  // ---------- valores ----------
+  const getPath = (o, k) => k.split(".").reduce((v, p) => (v == null ? undefined : v[p]), o);
+  // "fit.minCodePt" = o.fit.minCodePt; undefined apaga (e tira o objeto fit se ficou vazio)
+  function setPath(o, k, v) {
+    const [a, b] = k.split(".");
+    if (!b) { if (v === undefined) delete o[a]; else o[a] = v; return; }
+    if (v === undefined) { if (o[a]) { delete o[a][b]; if (!Object.keys(o[a]).length) delete o[a]; } return; }
+    o[a] = { ...(o[a] && typeof o[a] === "object" ? o[a] : {}), [b]: v };
+  }
+  const idOf = (catId, k) => `ip-${catId}-${k}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+  function objValue(els, k) {
+    if (k === "__key") return els.map((n) => n.dataset.vkey).join(", ");
+    if (k === "locked") { const v = els.map((n) => n.hasAttribute("data-locked")); return v.every((x) => x === v[0]) ? (v[0] || undefined) : "__varios"; }
+    const vals = els.map((n) => window.SagaVisual.edits(n)[k]);
+    return vals.every((v) => JSON.stringify(v) === JSON.stringify(vals[0])) ? vals[0] : "__varios";
+  }
+  function parse(row, raw, el) {
+    if (row.type === "bool") return el.checked ? true : undefined;
+    if (raw === "" || raw == null) return undefined;
+    if (row.bool3) return raw === "true";
+    if (row.type === "num" || row.type === "range" || row.num) { let n = Number(raw); if (!Number.isFinite(n)) return undefined; if (row.scale) n /= row.scale; return n; }
+    if (row.type === "color") return raw;
+    return String(raw);
+  }
+
+  function control(row, value, catId) {
+    const id = idOf(catId, row.k);
+    const many = value === "__varios", v = many ? undefined : value;
+    const shown = row.scale && v != null ? Math.round(v * row.scale) : v;
+    const attrs = `id="${id}" data-k="${esc(row.k)}" aria-label="${esc(row.label)}"`;
+    switch (row.type) {
+      case "bool": return `<input type="checkbox" ${attrs}${v ? " checked" : ""}${many ? ' class="ip-many"' : ""}>`;
+      case "select": return `<select ${attrs}>${row.options.map(([ov, ol]) => `<option value="${esc(ov)}"${String(shown ?? "") === String(ov) ? " selected" : ""}>${esc(ol)}</option>`).join("")}${many ? '<option value="__varios" selected>vários</option>' : ""}</select>`;
+      case "color": return `<span class="ip-color"><input type="color" ${attrs} value="${/^#[0-9a-f]{6}$/i.test(v || "") ? v : "#888888"}"><span class="ip-hex">${many ? "vários" : v ? esc(v) : "padrão"}</span></span>`;
+      case "range": return `<span class="ip-range"><input type="range" min="0" max="100" step="1" ${attrs} value="${shown ?? 100}"><span class="ip-unit">${many ? "vários" : `${shown ?? 100}%`}</span></span>`;
+      case "readonly": return `<span class="ip-ro" title="${esc(v)}">${esc(v)}</span>`;
+      case "action": return `<button type="button" class="ip-action" ${attrs}>${esc(row.text)}</button>`;
+      case "text": return `<input type="text" ${attrs} value="${esc(shown ?? "")}" placeholder="${esc(row.placeholder || "")}">`;
+      default: return `<span class="ip-num"><input type="number" ${attrs} value="${shown ?? ""}" placeholder="${many ? "vários" : esc(row.hint ? "—" : "")}"${row.min != null ? ` min="${row.min}"` : ""}${row.max != null ? ` max="${row.max}"` : ""} step="${row.step ?? 1}">${row.unit ? `<span class="ip-unit">${esc(row.unit)}</span>` : ""}</span>`;
+    }
+  }
+
+  function catHTML(cat, valueOf) {
+    const isOpen = openCats[cat.id] !== false;
+    const rows = cat.rows.map((row) => {
+      const value = valueOf(row.k);
+      const set = value !== undefined && value !== "__varios" && row.type !== "readonly" && row.type !== "action";
+      return `<div class="ip-row" data-row="${esc(row.k)}"${row.hint ? ` title="${esc(row.hint)}"` : ""}><label class="ip-l" for="${idOf(cat.id, row.k)}">${esc(row.label)}</label><div class="ip-v">${control(row, value, cat.id)}</div><button type="button" class="ip-reset" data-reset="${esc(row.k)}" title="Voltar ao padrão" aria-label="Voltar ${esc(row.label)} ao padrão"${set ? "" : " hidden"}>${ic("rotate-ccw")}</button></div>`;
+    }).join("");
+    return `<details class="ip-cat" data-cat="${cat.id}"${isOpen ? " open" : ""}><summary>${esc(cat.title)}</summary><div class="ip-rows">${rows}</div></details>`;
+  }
+
+  // lista de objetos do slide (camadas): selecionar mesmo o que está travado ou escondido, mostrar/ocultar, travar
+  const kindOf = (n) => is.text([n]) ? ["Texto", "type"] : is.image([n]) ? ["Imagem", "image"] : is.shape([n]) ? ["Forma", "square"] : n.classList.contains("tbx") ? ["Texto do original", "type"] : n.classList.contains("drw") ? ["Desenho", "shapes"] : ["Objeto", "shapes"];
+  function layersHTML(els) {
+    const objs = window.SagaVisual?.objects?.() || [];
+    if (!objs.length) return "";
+    const rows = objs.map((n, i) => {
+      const [kind, icon] = kindOf(n);
+      const name = n.textContent.replace(/\s+/g, " ").trim().slice(0, 48) || kind;
+      const hidden = !!window.SagaVisual.edits(n).hidden, lk = n.hasAttribute("data-locked");
+      return `<div class="ip-layer${els.includes(n) ? " sel" : ""}${hidden ? " off" : ""}" data-layer="${i}" title="${esc(kind)}">${ic(icon)}<span class="ip-layer-name">${esc(name)}</span>`
+        + `<button type="button" data-layer-eye aria-label="${hidden ? "Mostrar" : "Ocultar"}" title="${hidden ? "Mostrar" : "Ocultar"}">${ic(hidden ? "eye-off" : "eye")}</button>`
+        + `<button type="button" data-layer-lock class="${lk ? "on" : ""}" aria-label="${lk ? "Destravar" : "Travar"}" title="${lk ? "Destravar" : "Travar (o clique no slide atravessa)"}">${ic(lk ? "lock" : "lock-open")}</button></div>`;
+    }).join("");
+    return `<section class="ip-sec" data-sec="layers"><details class="ip-cat" data-cat="layers"${openCats.layers !== false ? " open" : ""}><summary>Objetos do slide (${objs.length})</summary><div class="ip-layers">${rows}</div></details></section>`;
+  }
+  function bindLayers() {
+    const objs = window.SagaVisual?.objects?.() || [];
+    host.querySelectorAll(".ip-layer").forEach((row) => {
+      const n = objs[+row.dataset.layer];
+      if (!n) return;
+      row.onclick = (e) => { if (!e.target.closest("button")) window.SagaVisual.select([n]); };
+      row.querySelector("[data-layer-eye]").onclick = () => window.SagaVisual.setPropOn([n], "hidden", window.SagaVisual.edits(n).hidden ? null : true);
+      row.querySelector("[data-layer-lock]").onclick = () => window.SagaVisual.setPropOn([n], "locked", n.hasAttribute("data-locked") ? false : true);
+    });
+  }
+
+  function render() {
+    if (!host || !ctx?.state?.deck) return;
+    if (host.contains(document.activeElement) && document.activeElement.matches("input[type=number], input[type=text]")) { pending = true; return; } // digitando: não redesenha
+    pending = false;
+    const els = window.SagaVisual?.selection() || [];
+    const S = ctx.state, slide = S.deck.slides[S.currentSlideIndex] || {};
+    let html = "";
+    if (els.length) {
+      const kind = is.text(els) ? "Texto" : is.shape(els) ? "Forma" : is.image(els) ? "Imagem" : "Objeto";
+      const name = els.length > 1 ? `${els.length} objetos` : `${kind}${els[0].textContent.trim() ? `: “${els[0].textContent.trim().slice(0, 28)}”` : ""}`;
+      html += `<section class="ip-sec" data-sec="obj"><h4>${ic(kind === "Texto" ? "type" : kind === "Forma" ? "square" : kind === "Imagem" ? "image" : "shapes")}<span>${esc(name)}</span></h4>${objectCats(els).map((c) => catHTML(c, (k) => objValue(els, k))).join("")}</section>`;
+    }
+    html += layersHTML(els);
+    // o conteúdo do slide (itens do carrossel, fotos, destaques do screenshot, dados do gráfico…) mora no Formatar
+    html += `<button type="button" class="ip-content" data-open-content>${ic("pencil")}<span>Editar o conteúdo do slide</span></button>`;
+    const [sc, dc] = slideCats();
+    html += `<section class="ip-sec" data-sec="slide">${catHTML(sc, (k) => { const v = getPath(slide, k); return v === undefined ? undefined : typeof v === "boolean" ? String(v) : v; })}</section>`;
+    html += `<section class="ip-sec" data-sec="deck">${catHTML(dc, (k) => { const v = getPath(S.deck, k); return v === undefined ? undefined : typeof v === "boolean" ? String(v) : v; })}</section>`;
+    host.innerHTML = html;
+    ctx.hydrate(host);
+    bind(els);
+    bindLayers();
+  }
+
+  function rowOf(k, secId) {
+    const cats = secId === "obj" ? objectCats(window.SagaVisual.selection()) : slideCats();
+    for (const c of cats) { const r = c.rows.find((x) => x.k === k); if (r && (secId === "obj" || c.target === secId)) return r; }
+    return null;
+  }
+
+  function apply(sec, row, value) {
+    if (sec === "obj") {
+      if (row.k === "__clear") { window.SagaVisual.clearEdits(); return; }
+      if (row.k === "__replace") { window.SagaVisual.replaceImage(); return; }
+      if (row.k === "locked") { window.SagaVisual.setProp("locked", value ? true : false); return; } // decoração do original vem travada: destravar grava false
+      window.SagaVisual.setProp(row.k, value ?? null); // grava, com Desfazer, em todos os selecionados
+      return;
+    }
+    const S = ctx.state;
+    if (sec === "slide") {
+      const slide = S.deck.slides[S.currentSlideIndex];
+      if (row.k === "layout") return ctx.changeLayout(value);
+      if (row.k === "theme" || row.k === "palette") return value === undefined ? ctx.applyLook(row.k, slide[row.k], "reset") : ctx.applyLook(row.k, value, "slide");
+      setPath(slide, row.k, row.k === "bg" && value ? value.replace("#", "") : value);
+    } else {
+      if (row.k === "aspect") {
+        const v = value === "__custom" ? window.prompt("Proporção personalizada (largura:altura), ex.: 5:4 ou 1200:900", "5:4") : value;
+        if (v == null) return render();
+        return ctx.changeAspect(v || "16:9");
+      }
+      if (row.k === "theme") return ctx.applyLook("theme", value, "all");
+      if (row.k === "palette") return ctx.applyLook("palette", value ?? "tema", "all");
+      setPath(S.deck, row.k, value);
+    }
+    ctx.commit();
+  }
+
+  function bind() {
+    host.querySelector("[data-open-content]")?.addEventListener("click", () => ctx.openContent?.());
+    // grava já no clique (o evento toggle chega depois, e um recarregamento logo em seguida o perderia)
+    host.querySelectorAll("details.ip-cat").forEach((d) => {
+      d.querySelector(":scope > summary").addEventListener("click", () => { openCats[d.dataset.cat] = !d.open; saveOpen(); });
+      d.addEventListener("toggle", () => { openCats[d.dataset.cat] = d.open; saveOpen(); });
+    });
+    host.querySelectorAll("[data-k]").forEach((el) => {
+      const sec = el.closest(".ip-sec").dataset.sec, row = rowOf(el.dataset.k, sec);
+      if (!row) return;
+      if (row.type === "action") { el.onclick = () => apply(sec, row); return; }
+      if (row.type === "range") el.addEventListener("input", () => { el.nextElementSibling.textContent = `${el.value}%`; });
+      el.addEventListener("change", () => { if (el.value === "__varios") return; apply(sec, row, parse(row, el.value, el)); });
+      if (el.matches("input[type=number], input[type=text]")) {
+        el.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); el.blur(); } });
+        el.addEventListener("blur", () => { if (pending) setTimeout(render, 0); });
+      }
+    });
+    host.querySelectorAll("[data-reset]").forEach((b) => {
+      const sec = b.closest(".ip-sec").dataset.sec, row = rowOf(b.dataset.reset, sec);
+      b.onclick = () => row && apply(sec, row, undefined);
+    });
+  }
+
+  function setup(container, context) {
+    host = container; ctx = context;
+    window.SagaVisual?.onSelect((els, why) => { ctx.onSelection?.(els, why); render(); });
+    render();
+  }
+  window.SagaInspector = { setup, refresh: render };
+})();

package/src/studio/public/lab-fields.js

@@ -0,0 +1,5 @@
+// Formulários dos laboratórios interativos.
+window.SagaLabFields = {
+codelab: (f, obj) => [f.text('title','Título'),f.select('engine','Execução',[['trace','Python de aula · passo a passo offline'],['python','Python nativo · pacotes reais'],['javascript','JavaScript nativo · Node.js']],{empty:false,default:'trace'}),f.area('program','Programa',{mono:true,rows:14}),f.text('call','Chamada / entrada',{mono:true}),f.area('explanation','Desafio para a turma'),f.num('maxSteps','Máximo de passos')],
+graphlab: (f, obj) => [f.text('title','Título'),f.list('nodes','Nós',obj([f.text('id','Id único'),f.text('label','Nome'),f.text('icon','Ícone Lucide'),f.num('x','Posição horizontal'),f.num('y','Posição vertical')]),{newItem:()=>({id:'novo',label:'Novo nó',icon:'map-pin'})}),f.list('edges','Ligações',obj([f.text('from','Origem (id)'),f.text('to','Destino (id)'),f.num('weight','Custo'),f.text('label','Nome da ligação')]),{newItem:()=>({from:'',to:'',weight:1})}),f.bool('directed','Ligações com direção'),f.text('start','Origem inicial'),f.text('goal','Destino inicial'),f.area('explanation','Convite ao experimento')]
+};

package/src/studio/public/library.css

@@ -0,0 +1,275 @@
+/* O estúdio usa uma superfície independente dos temas de apresentação. */
+:root { color-scheme: light; --canvas-bg: #f7f6f2; --chrome: #fff; --chrome-2: #f1f0eb; --text: #23232b; --text-2: #61616b; --text-3: #7f7f89; --ui-line: #e7e6e0; --ui-line-strong: #d8d7d0; --brand: #634ce9; --brand-fill: #634ce9; --brand-fill-hover: #5039d1; --on-brand: white; --hover: #efeee9; --selected: #eae7fb; --err: #ba3944; --toast-bg: #25242d; --toast-text: white; --shadow-1: 0 2px 8px #25232c08; --shadow-2: 0 12px 28px #25232c16; --shadow-3: 0 18px 64px #18172026; }
+:root[data-theme=dark] { color-scheme: dark; --canvas-bg: #19191e; --chrome: #212127; --chrome-2: #29292f; --text: #f3f2f6; --text-2: #b8b6c3; --text-3: #95929f; --ui-line: #333239; --ui-line-strong: #47454f; --brand: #ac9aff; --brand-fill: #7861ef; --brand-fill-hover: #8d76ff; --hover: #2c2a34; --selected: #39304f; }
+* { box-sizing: border-box; }
+body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; }
+button, input, select, textarea { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+button { cursor: pointer; }
+button:disabled { opacity: .55; cursor: wait; }
+a { color: inherit; }
+[hidden] { display: none !important; }
+:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
+.ic { display: inline-flex; width: 18px; height: 18px; flex: none; vertical-align: middle; }
+.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-template-rows: 84px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--canvas-bg); font-size: 14px; }
+.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px; background: var(--chrome); border-radius: 8px; }
+.skip-link:focus { top: 15px; }
+.lib-brand { display: flex; align-items: center; gap: 11px; padding: 0 24px; border-right: 1px solid var(--ui-line); text-decoration: none; font-size: 23px; font-weight: 720; letter-spacing: -.8px; }
+.brand-light { font-weight: 420; }
+.lib-brand small { display: block; margin-top: 3px; color: var(--text-3); font-size: 8px; font-weight: 650; letter-spacing: 2px; }
+.lib-logo { width: 33px; height: 37px; flex: none; display: grid; place-items: center; color: var(--brand); }
+.lib-logo svg { width: 100%; height: 100%; } /* logotipo: um deck (dois slides) com o "apresentar" no da frente */
+.lib-top { display: flex; align-items: center; gap: 13px; padding: 0 38px; border-bottom: 1px solid var(--ui-line); }
+.breadcrumb { display: flex; gap: 12px; color: var(--text-3); font-size: 12px; white-space: nowrap; }
+.breadcrumb b { font-weight: 500; color: var(--text-2); }
+.breadcrumb span { color: var(--ui-line-strong); }
+.spacer { flex: 1; }
+.lib-search { display: flex; align-items: center; gap: 9px; width: 228px; height: 37px; color: var(--text-3); padding: 0 11px; background: transparent; border: 1px solid var(--ui-line); border-radius: 8px; }
+.lib-search input { background: none; color: var(--text); border: 0; outline: 0; width: 100%; min-width: 0; font-size: 11px; }
+.lib-search kbd { border: 1px solid var(--ui-line); border-radius: 3px; font-size: 10px; padding: 0 4px; }
+.lib-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
+.lib-btn.primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: 0 3px 8px #634ce916; }
+.lib-btn.primary:hover { background: var(--brand-fill-hover); transform: translateY(-1px); }
+.lib-btn.ghost { background: transparent; border-color: var(--ui-line-strong); color: var(--text); }
+.lib-btn.ghost:hover { background: var(--hover); }
+.lib-btn.danger { color: var(--err); }
+.lib-btn.large { min-height: 44px; padding: 0 18px; }
+.lib-icon-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); background: none; border: 0; cursor: pointer; }
+.lib-icon-btn:hover { background: var(--hover); }
+.lib-user { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.lib-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--selected); color: var(--brand); text-transform: uppercase; font-weight: 700; }
+.lib-body { display: contents; }
+.lib-side { min-height: 0; display: flex; flex-direction: column; padding: 14px 14px 18px; border-right: 1px solid var(--ui-line); overflow-y: auto; }
+#side { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 360px; }
+.nav { display: flex; align-items: center; gap: 10px; min-height: 40px; flex: none; padding: 0 13px; border-radius: 8px; color: var(--text-2); width: 100%; text-align: left; background: none; border: 0; font-size: 12px; }
+.nav:hover { background: var(--hover); }
+.nav.active { background: var(--selected); color: var(--brand); font-weight: 600; }
+.nav .count { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.nav .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nav.drop { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--selected); }
+.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; margin: 0 5px; }
+.side-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 13px 8px; font-size: 9px; font-weight: 650; letter-spacing: 1.5px; color: var(--text-3); }
+.side-title button { color: var(--text-3); width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; background: none; border: 0; }
+.side-title button:hover { background: var(--hover); color: var(--text); }
+.lib-side .grow { flex: 1; min-height: 32px; }
+.side-foot { border-top: 1px solid var(--ui-line); padding-top: 12px; }
+.where { font-size: 10px; color: var(--text-3); padding: 12px 12px 0; line-height: 1.6; word-break: break-all; }
+.where summary { display: flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; word-break: normal; }
+.where summary::before { content: ''; width: 5px; height: 5px; border-radius: 100%; background: #63a487; }
+.where code { display: block; margin-top: 7px; font-size: 9px; }
+.ai-settings { margin: 12px 7px 0; font-size: 10px; }
+.studio-note { margin: 16px 11px 22px; font-size: 11px; line-height: 1.6; color: var(--text-3); }
+.studio-note strong { display: block; color: var(--text-2); font-size: 12px; margin-bottom: 4px; font-weight: 500; }
+.lib-main { overflow-y: auto; min-width: 0; padding: 36px 44px 64px; scroll-behavior: smooth; outline: none; }
+.lib-main > * { max-width: 1360px; margin-left: auto; margin-right: auto; }
+.hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 36px; padding: 8px 0 40px; }
+.eyebrow { font-size: 9px; font-weight: 650; letter-spacing: 2px; color: var(--text-3); display: flex; align-items: center; gap: 7px; margin-bottom: 17px; }
+.eyebrow .ic { width: 13px; height: 13px; color: var(--brand); }
+.hero h1 { margin: 0; font-size: clamp(36px, 3.9vw, 60px); line-height: 1.1; letter-spacing: -2.4px; font-weight: 570; max-width: 640px; }
+.hero h1 em { color: var(--brand); font-family: Georgia, serif; font-weight: 400; }
+.hero p { max-width: 380px; color: var(--text-2); font-size: 12px; line-height: 1.8; margin: 20px 0; }
+.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; color: var(--text-2); background: none; border: 0; font-size: 11px; text-decoration: none; white-space: nowrap; }
+.text-button:hover { color: var(--brand); }
+.text-button .ic { width: 14px; height: 14px; }
+.hero-stage { position: relative; min-height: 280px; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 900px; }
+.stage-orbit { position: absolute; width: 240px; height: 240px; border: 1px solid var(--ui-line); border-radius: 100%; transform: rotate(-28deg) scaleX(1.45); }
+.stage-orbit::after { content: ''; position: absolute; inset: 30px; border: 1px solid var(--ui-line); border-radius: 100%; }
+.mini-slide { position: absolute; border-radius: 6px; box-shadow: 0 20px 42px #302c4025; overflow: hidden; }
+.mini-beige { width: 235px; height: 150px; left: -3%; top: 18px; padding: 24px; color: #222629; background: #e5ddce; transform: rotate(-11deg); }
+.mini-beige small { font-size: 7px; letter-spacing: 2px; }
+.mini-beige b { display: block; font-family: Georgia, serif; font-size: 31px; line-height: 1.07; font-weight: 400; margin-top: 18px; }
+.mini-beige::after { content: ''; width: 100px; height: 100px; background: #e87a57; position: absolute; right: -33px; bottom: -26px; border-radius: 50%; }
+.mini-pop { width: 198px; height: 131px; right: 0; bottom: 5px; background: #d9ea88; transform: rotate(10deg); color: #273322; padding: 21px; }
+.mini-pop b { font-size: 31px; letter-spacing: -1.5px; line-height: 1; }
+.mini-pop span { font-family: Georgia, serif; font-style: italic; }
+.mini-pop .star { position: absolute; font-size: 86px; bottom: -25px; right: -12px; color: #5b69bd; line-height: 1; }
+.mini-dark { width: 285px; height: 182px; background: #191722; color: #fff; transform: rotate(-1deg); padding: 27px; z-index: 1; }
+.mini-dark small { font-size: 6px; letter-spacing: 2px; color: #c1b8db; position: relative; z-index: 1; }
+.mini-dark b { display: block; font-size: 37px; letter-spacing: -2px; line-height: 1; margin-top: 19px; position: relative; z-index: 1; font-weight: 550; }
+.mini-dark b em { color: #c3affc; font-family: Georgia, serif; font-weight: 400; }
+.mini-dark::before { content: ''; position: absolute; width: 178px; height: 178px; right: -38px; top: 5px; border-radius: 50%; background: radial-gradient(circle at 31% 29%, #ceb3ff 0%, #9071e1 17%, #5d41a0 33%, #251b39 65%); box-shadow: -8px 0 25px #9673e54a; }
+.stage-label { position: absolute; z-index: 2; right: 14%; bottom: -5px; background: var(--chrome); border: 1px solid var(--ui-line); border-radius: 20px; padding: 9px 14px; box-shadow: var(--shadow-1); font-size: 9px; display: flex; gap: 7px; align-items: center; transform: rotate(-4deg); }
+.stage-label .ic { width: 13px; height: 13px; color: var(--brand); }
+.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
+.section-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.55px; margin: 0; }
+.section-head p { font-size: 11px; color: var(--text-3); margin: 7px 0 0; }
+.experiences-section { border-top: 1px solid var(--ui-line); padding-top: 27px; padding-bottom: 34px; }
+.experience-filters { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; }
+.experience-filter { border: 1px solid transparent; background: none; border-radius: 6px; color: var(--text-2); font-size: 10px; padding: 7px 12px; }
+.experience-filter:hover { background: var(--hover); }
+.experience-filter.active { background: var(--text); color: var(--canvas-bg); }
+.experiences-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
+.experience-card { position: relative; text-align: left; padding: 0; background: none; border: 0; color: var(--text); border-radius: 8px; min-width: 0; }
+.experience-art { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; padding: 22px; transition: transform .25s, box-shadow .25s; container-type: inline-size; }
+.experience-card:hover .experience-art { transform: translateY(-4px); box-shadow: var(--shadow-2); }
+.experience-art small { display: block; position: relative; z-index: 1; font-size: clamp(6px, 2.3cqw, 9px); letter-spacing: 1.4px; }
+.experience-art b { display: block; position: relative; z-index: 1; font-size: clamp(20px, 11cqw, 42px); line-height: 1.07; letter-spacing: -.9px; font-weight: 550; margin-top: 17px; }
+.art-executivo { background: #111419; color: #edebe6; }
+.art-executivo small { color: #c2a773; }
+.art-executivo b { max-width: 70%; font-size: 10cqw; }
+.art-executivo em { color: #e4b660; font-weight: 400; font-family: Georgia, serif; }
+.executive-bars { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 4px; align-items: flex-end; height: 55%; width: 22%; }
+.executive-bars i { flex: 1; height: 44%; background: #837759; border-top: 1px solid #e4b660; }
+.executive-bars i:nth-child(2) { height: 67%; background: #ad9361; }
+.executive-bars i:nth-child(3) { height: 100%; background: #e4b660; }
+.art-editorial { background: #eee9df; color: #20211c; }
+.art-editorial b { font-family: Georgia, serif; max-width: 75%; font-weight: 400; font-size: 11cqw; margin-top: 18px; }
+.art-editorial em { font-weight: 400; color: #cc4937; }
+.editorial-mark { position: absolute; width: 37%; aspect-ratio: 1; right: -6%; bottom: -10%; border-radius: 100%; background: #d56346; }
+.editorial-mark::before { content: ''; position: absolute; width: 100%; height: 100%; left: -25%; top: -30%; border: 1px solid #353a2a; border-radius: 100%; }
+.art-palco { background: #10131d; color: #f4f0fa; }
+.art-palco b { font-size: 12cqw; font-weight: 650; max-width: 80%; }
+.art-palco b em { color: #a2eaff; font-weight: 500; font-family: Georgia, serif; }
+.stage-sphere { position: absolute; width: 69%; aspect-ratio: 1; border-radius: 100%; right: -13%; top: -2%; background: radial-gradient(circle at 26% 24%, #92f2f1, #489ad3 20%, #6959ba 36%, #261e56 55%, #181326 70%); box-shadow: -9px 0 35px #52cbfb29; }
+.art-pop { background: #e6dfc9; color: #202622; }
+.art-pop small { color: #3e463e; }
+.art-pop b { max-width: 72%; font-size: 12cqw; font-weight: 800; letter-spacing: -1.5px; }
+.pop-mark { position: absolute; width: 58%; aspect-ratio: 1; right: -18%; bottom: -29%; border: 29px solid #245dad; border-radius: 100%; }
+.pop-star { position: absolute; font-size: 88px; right: 10%; top: -10%; color: #d5482b; }
+.art-aula { background: #122927; color: #e6eadc; font-family: 'Cascadia Mono', Consolas, monospace; }
+.art-aula small { color: #a5c5ae; font-size: 2.5cqw; letter-spacing: 0; }
+.art-aula b { margin-top: 18px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 10cqw; }
+.art-aula em { font-style: normal; color: #bfdf6c; }
+.code-lines { position: absolute; right: 14px; bottom: 12px; font-size: 3.8cqw; color: #91b69d; line-height: 1.7; opacity: .75; }
+.code-cursor { position: absolute; width: 7px; height: 14px; background: #bfdf6c; bottom: 26px; left: 24px; }
+.art-minimal { background: #eceef2; color: #202535; }
+.art-minimal small { color: #748090; }
+.art-minimal b { font-size: 11cqw; font-weight: 350; line-height: 1.16; max-width: 75%; margin-top: 17px; }
+.minimal-line { position: absolute; width: 88px; height: 88px; border: 1px solid #9aacce; border-radius: 50%; right: -22px; bottom: -12px; }
+.minimal-line::before { content: ''; position: absolute; inset: 12px; border: 1px solid #9aacce; border-radius: 50%; }
+.experience-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 1px 0; }
+.experience-meta strong { font-size: 12px; font-weight: 600; }
+.experience-meta .experience-sub { display: block; font-size: 10px; color: var(--text-3); margin-top: 4px; font-weight: 400; }
+.experience-meta .arrow { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--ui-line); border-radius: 50%; color: var(--text-3); transition: background .2s; }
+.experience-card:hover .arrow { background: var(--selected); color: var(--brand); border-color: transparent; }
+.catalog-heading { padding: 5px 0 26px; }
+.catalog-heading h1 { font-size: 38px; letter-spacing: -1.3px; font-weight: 550; margin: 0 0 12px; }
+.catalog-heading p { color: var(--text-2); line-height: 1.8; max-width: 560px; font-size: 12px; }
+.recent-section { padding-top: 25px; border-top: 1px solid var(--ui-line); }
+.head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
+.head h1 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.65px; display: flex; align-items: center; gap: 10px; }
+.head .sub { color: var(--text-3); margin-top: 6px; font-size: 11px; }
+.sort { height: 32px; border-radius: 6px; border: 1px solid var(--ui-line); background: transparent; color: var(--text-2); padding: 0 9px; font: inherit; font-size: 10px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 20px; }
+.card { position: relative; border-radius: 9px; cursor: pointer; min-width: 0; }
+.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--chrome-2); border: 1px solid var(--ui-line); transition: box-shadow .15s, transform .15s; }
+.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; }
+.thumb .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 12px; }
+.card:hover .thumb { box-shadow: var(--shadow-2); transform: translateY(-2px); }
+.card.dragging { opacity: .4; }
+.over { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; padding: 10px; opacity: 0; transition: opacity .15s; background: linear-gradient(transparent 45%, #10101870); }
+.card:hover .over, .card:focus-within .over { opacity: 1; }
+.pill { min-height: 30px; padding: 0 10px; border-radius: 6px; background: #fffffff2; color: #1a1a1a; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; box-shadow: var(--shadow-1); border: 0; cursor: pointer; font-family: inherit; }
+.pill .ic { width: 13px; height: 13px; }
+.meta { display: flex; align-items: flex-start; gap: 6px; padding: 12px 2px 0; }
+.meta .t { flex: 1; min-width: 0; }
+.meta .name { font-weight: 600; font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.meta .info { color: var(--text-3); font-size: 10px; margin-top: 6px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
+.chip { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--text-3); }
+.chip .dot { width: 5px; height: 5px; margin-left: 0; }
+.more { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); background: none; border: 0; }
+.more:hover { background: var(--hover); color: var(--text); }
+.new-card .thumb { border: 1px dashed var(--ui-line-strong); background: transparent; display: grid; place-items: center; color: var(--text-2); }
+.new-card:hover .thumb { border-color: var(--brand); color: var(--brand); background: var(--selected); }
+.new-card .plus { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 500; text-align: center; padding: 0 10px; font-size: 12px; }
+.empty { text-align: center; padding: 45px 22px; color: var(--text-2); }
+.empty .big { width: 44px; height: 44px; border-radius: 12px; background: var(--chrome-2); display: grid; place-items: center; margin: 0 auto 14px; color: var(--text-3); }
+.empty .big .ic { width: 23px; height: 23px; }
+.empty h2 { margin: 0 0 8px; font-size: 17px; color: var(--text); font-weight: 550; }
+.empty p { margin: 0 auto 18px; max-width: 440px; line-height: 1.7; font-size: 12px; }
+.empty .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+.empty.compact { border: 1px dashed var(--ui-line-strong); border-radius: 10px; padding: 24px; text-align: left; display: flex; align-items: center; gap: 17px; }
+.empty.compact .big { margin: 0; flex: none; }
+.empty.compact .empty-copy { flex: 1; }
+.empty.compact h2 { font-size: 14px; }
+.empty.compact p { margin: 0; font-size: 11px; max-width: none; }
+.trash-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 8px; background: var(--chrome); border: 1px solid var(--ui-line); margin-bottom: 10px; flex-wrap: wrap; }
+.trash-row .t { flex: 1; min-width: 180px; }
+.trash-row .sub { color: var(--text-3); font-size: 11px; margin-top: 4px; }
+.lmenu { position: fixed; z-index: 50; min-width: 250px; max-width: calc(100vw - 20px); background: var(--chrome); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--shadow-3); padding: 7px; display: none; }
+.lmenu.open { display: block; }
+.mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 5px 10px; border-radius: 6px; text-align: left; background: none; border: 0; cursor: pointer; color: var(--text); font: inherit; font-size: 12px; }
+.mi:hover { background: var(--hover); }
+.mi small { margin-left: auto; color: var(--text-3); }
+.mi.danger { color: var(--err); }
+.mi .d { display: block; font-size: 10px; color: var(--text-3); margin-top: 4px; font-weight: 400; line-height: 1.4; }
+.mi .ic { color: var(--text-3); }
+.lmenu.tall .mi { padding: 12px; align-items: center; }
+.menu-label { display: block; padding: 10px 12px 5px; font-size: 8px; font-weight: 650; color: var(--text-3); letter-spacing: 1.5px; }
+.sep { height: 1px; background: var(--ui-line); margin: 5px 4px; }
+.ldlg-back { position: fixed; inset: 0; background: #17142166; backdrop-filter: blur(5px); display: none; place-items: center; z-index: 60; padding: 20px; }
+.ldlg-back.open { display: grid; }
+.ldlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--chrome); border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: var(--shadow-3); padding: 25px; }
+.ldlg h3 { margin: 0 0 16px; font-size: 22px; font-weight: 580; letter-spacing: -.5px; }
+.ldlg label { display: block; font-size: 11px; color: var(--text-2); margin: 15px 0 7px; }
+.ldlg input[type=text], .ldlg textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--ui-line-strong); background: var(--chrome); color: var(--text); font: inherit; font-size: 13px; }
+.ldlg textarea { min-height: 135px; resize: vertical; line-height: 1.7; }
+.ldlg .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
+.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
+.sw { width: 28px; height: 28px; border-radius: 8px; border: 3px solid transparent; cursor: pointer; }
+.sw.on { border-color: var(--text); }
+.ldlg .status { font-size: 12px; color: var(--text-2); margin-top: 10px; min-height: 1.2em; line-height: 1.6; }
+.experience-dialog .experience-art { aspect-ratio: 16/8; margin: -7px -7px 21px; padding: 27px; }
+.experience-dialog .experience-art b { font-size: 35px; }
+.experience-dialog .experience-art small { font-size: 8px; }
+.experience-description { color: var(--text-2); font-size: 12px; line-height: 1.8; margin: -3px 0 16px; }
+.experience-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
+.experience-tags span { border: 1px solid var(--ui-line); background: var(--chrome-2); padding: 5px 8px; border-radius: 4px; font-size: 9px; color: var(--text-2); }
+.dialog-note { font-size: 10px; line-height: 1.6; color: var(--text-3); margin: 12px 0 0; }
+.ltoast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-text); padding: 12px 17px; border-radius: 9px; box-shadow: var(--shadow-3); font-size: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 70; max-width: calc(100vw - 32px); }
+.ltoast.show { opacity: 1; }
+.initial-loading { display: flex; align-items: center; gap: 10px; color: var(--text-3); padding-top: 60px; justify-content: center; font-size: 12px; }
+.loading-orbit { width: 15px; height: 15px; border: 2px solid var(--ui-line); border-top-color: var(--brand); border-radius: 100%; animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (min-width: 1680px) { .lib-main { padding: 40px 65px 70px; } .hero { padding-bottom: 48px; } .hero-stage { min-height: 320px; } .mini-dark { width: 335px; height: 207px; } .mini-dark b { font-size: 45px; } .mini-beige { left: 8%; } .mini-pop { right: 10%; } }
+@media (max-width: 1200px) { body.lib { grid-template-columns: 190px minmax(0, 1fr); } .lib-top { padding: 0 24px; gap: 9px; } .lib-brand { padding: 0 20px; } .lib-main { padding: 30px 28px 60px; } .breadcrumb { display: none; } .hero { gap: 20px; } .hero-stage { transform: scale(.87); transform-origin: center right; margin-left: -40px; } .hero h1 { font-size: 44px; } .section-head h2 { font-size: 18px; } .experience-art { padding: 18px; } .experiences-grid { gap: 17px; } }
+@media (max-width: 940px) { .hero { grid-template-columns: 1fr; padding-bottom: 30px; } .hero h1 { font-size: 45px; max-width: 480px; } .hero-stage { display: none; } .hero p { max-width: 420px; } .experiences-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .experience-art { padding: 20px; } .empty.compact { flex-wrap: wrap; } }
+@media (max-width: 700px) { body.lib { grid-template-columns: 1fr; grid-template-rows: 70px minmax(0, 1fr); } .lib-brand { position: absolute; left: 8px; height: 70px; padding: 0 10px; border: 0; font-size: 20px; } .lib-brand small { font-size: 6px; } .lib-logo { width: 27px; } .lib-top { padding: 0 15px 0 168px; gap: 7px; } .lib-top .spacer { display: none; } .lib-search { width: 100%; min-width: 0; padding: 0 8px; border: 0; } .lib-search kbd, #btn-new .lbl, .lib-user .uname, #btn-theme { display: none; } #btn-new { padding: 0; min-width: 35px; min-height: 35px; } .lib-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .lib-side { padding: 8px 13px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); flex-direction: row; } #side { flex-direction: row; align-items: center; min-height: 0; flex: none; gap: 4px; } .nav { min-height: 33px; width: auto; white-space: nowrap; font-size: 11px; gap: 7px; padding: 0 11px; } .nav .ic { width: 15px; height: 15px; } .nav .count { display: none; } .side-title { margin: 0 3px; font-size: 0; } .side-title button { width: 25px; height: 30px; } .lib-side .grow, .studio-note, .where, .ai-settings { display: none; } .side-foot { padding: 0; border: 0; } .lib-main { padding: 27px 22px 45px; } .hero { padding-top: 0; } .hero h1 { font-size: 41px; letter-spacing: -1.8px; } .hero p { font-size: 12px; margin: 16px 0 21px; } .eyebrow { font-size: 8px; margin-bottom: 17px; } .hero-actions { gap: 15px; } .section-head { gap: 10px; align-items: flex-start; } .section-head h2 { font-size: 17px; max-width: 230px; } .section-head .text-button { font-size: 10px; } .experiences-section { padding-top: 24px; } .experience-filters { gap: 2px; margin-bottom: 17px; } .experience-filter { padding: 7px 9px; font-size: 9px; } .experiences-grid { gap: 17px 12px; } .experience-art { padding: 13px; } .experience-art b { margin-top: 13px; } .experience-art small { letter-spacing: .8px; } .experience-meta { padding-top: 9px; } .experience-meta strong { font-size: 10px; } .experience-meta .experience-sub { font-size: 8px; line-height: 1.4; } .experience-meta .arrow { display: none; } .pop-star { font-size: 53px; } .pop-mark { border-width: 18px; } .code-cursor { width: 4px; height: 9px; left: 14px; bottom: 16px; } .code-lines { display: none; } .executive-bars { right: 11px; bottom: 13px; } .experience-art b { font-size: 10cqw; } .catalog-heading h1 { font-size: 30px; } .catalog-heading p { font-size: 12px; } .head h1 { font-size: 23px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .empty.compact { padding: 18px; gap: 12px; } .empty.compact .actions { justify-content: flex-start; } .empty.compact .empty-copy { min-width: 170px; } .over { padding: 6px; gap: 4px; opacity: 1; } .over .pill { font-size: 8px; padding: 0 6px; min-height: 25px; } .pill .ic { width: 10px; height: 10px; } .meta .info { font-size: 9px; } .meta .name { font-size: 11px; } .chip { font-size: 9px; } .ldlg { padding: 22px; } .ldlg .row .lib-btn { font-size: 11px; } }
+@media (max-width: 390px) { .lib-search input { font-size: 10px; } .lib-main { padding-left: 17px; padding-right: 17px; } .hero h1 { font-size: 36px; } .lib-brand { font-size: 18px; gap: 6px; } .lib-top { padding-left: 149px; } .hero-actions { gap: 12px; } .hero-actions .lib-btn { font-size: 11px; } .section-head p { line-height: 1.6; } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
+.lmenu.tall { max-width: 340px; } /* menu Nova: descrições quebram em vez de alargar o menu */
+
+/* Nova: diálogo largo (IA em uma tela; vitrine "Modelo pronto") */
+.ldlg.wide { width: min(760px, calc(100vw - 32px)); }
+.ldlg select { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ui-line-strong); background: var(--chrome); color: var(--text); font: inherit; font-size: 13px; }
+.ldlg option { background: var(--chrome); color: var(--text); }
+.dlg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
+.dlg-min { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
+.dlg-min input { width: 84px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ui-line-strong); background: var(--chrome); color: var(--text); font: inherit; font-size: 13px; }
+.dlg-min .hint { color: var(--text-3); font-size: 12px; }
+.dlg-att { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.dlg-att input[type=text] { flex: 1; min-width: 180px; width: auto; }
+.dlg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.dlg-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--selected); color: var(--text); font-size: 12px; }
+.dlg-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dlg-chip button { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px; display: inline-flex; }
+.dlg-chip.reading { background: var(--hover); color: var(--text-3); padding-right: 10px; }
+.dlg-chip .ic svg, .dlg-att .ic svg { width: 14px; height: 14px; }
+.vit-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
+.vit-filter { border: 1px solid var(--ui-line); background: none; border-radius: 999px; color: var(--text-2); font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; }
+.vit-filter:hover { background: var(--hover); }
+.vit-filter.active { background: var(--text); color: var(--canvas-bg); border-color: var(--text); }
+.vit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-height: min(60vh, 560px); overflow-y: auto; padding: 2px; }
+.vit-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--chrome); color: var(--text); font: inherit; cursor: pointer; }
+.vit-card:hover, .vit-card:focus-visible { border-color: var(--brand); box-shadow: var(--shadow-2); outline: none; }
+.vit-card[hidden] { display: none; }
+.vit-card b { font-size: 13px; font-weight: 600; }
+.vit-card .d { font-size: 11px; color: var(--text-3); line-height: 1.45; }
+.vit-sw { display: flex; height: 54px; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
+.vit-sw i { flex: 1; }
+.vit-sw i:first-child { flex: 2.4; }
+@media (max-width: 640px) { .dlg-two { grid-template-columns: 1fr; } }
+
+/* vitrine Modelo pronto: capa desenhada de verdade (16:9) no lugar das barras de cor */
+.vit-intro { margin: -4px 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
+.vit-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin-bottom: 10px; box-shadow: inset 0 0 0 1px var(--ui-line); }
+.vit-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ldlg.drop-over { outline: 2px dashed var(--brand); outline-offset: -6px; }
+.ldlg label .muted { color: var(--text-3); font-weight: 400; }
+.dlg-ask { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--brand); border-radius: 8px; color: var(--text); }
+.dlg-ask b { font-weight: 600; font-size: 13px; }
+.dlg-ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
+.dlg-ask-free { display: flex; gap: 6px; }
+.dlg-ask-free input { flex: 1; }