@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"); /* product font, used by the Forma IA demo */
/* ArtForge — design tokens and hand-written component classes. */
:root {
  --font-archivo: "Archivo";
  --font-inter: "Inter";
  --font-instrument: "Instrument Serif";
  --font-geist-mono: "Geist Mono";

  --bg: #f2f1ee;
  --bg-raised: #faf9f7;
  --bg-sunken: #e9e8e4;
  --ink: #101014;
  --ink-strong: #000;
  --muted: #1010149e;
  --faint: #1010146b;
  --line: #10101429;
  --line-strong: #10101466;
  --accent: #ff7d69;
  --accent-ink: #c94a39;
  --invert-bg: #101014;
  --invert-fg: #f2f1ee;
  --danger: #b3261e;
  --scanline: #10101408;
  --brand-ink: #3B297B;
  --brand-coral: #FF7D69;
  color-scheme: light;
}
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --bg: #121316;
  --bg-raised: #101014;
  --bg-sunken: #060607;
  --ink: #f2f1ee;
  --ink-strong: #fff;
  --muted: #f2f1ee99;
  --faint: #f2f1ee61;
  --line: #f2f1ee26;
  --line-strong: #f2f1ee66;
  --accent: #ff7d69;
  --accent-ink: #ff9a88;
  --invert-bg: #fff;
  --invert-fg: #0b0b0c;
  --danger: #ff6259;
  --scanline: #ffffff06;
  --brand-ink: #ffffff;
  --brand-coral: #FF7D69;
  color-scheme: dark;
}

html { background: var(--bg); overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-inter), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--accent); color: #fff; }

/* Theme crossfade: tokens animate, descendants don't fight it. */
html.theme-anim {
  transition: --bg .4s, --bg-raised .4s, --bg-sunken .4s, --ink .4s, --ink-strong .4s, --muted .4s, --faint .4s,
    --line .4s, --line-strong .4s, --accent .4s, --accent-ink .4s, --invert-bg .4s, --invert-fg .4s;
}
html.theme-anim body * { transition-duration: 0s !important; }

/* Logo mark follows the ink colour. */
.themed-logo { filter: none; }
:root[data-theme="__none"] .themed-logo,
:root[data-theme="__none"] .themed-logo { filter: none; }

/* Mono HUD labels. */
.hud-label {
  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .6875rem;
  font-weight: 500;
}

/* Hover-inverting nav blocks. */
.invert-block { transition: background-color .12s linear, color .12s linear; }
.invert-block:hover, .invert-block[data-active="true"] { background: var(--invert-bg); color: var(--invert-fg); }

/* Corner crosshair ticks on section frames. */
.tick { pointer-events: none; width: 11px; height: 11px; position: absolute; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--line-strong); }
.tick::before { left: 0; right: 0; top: 5px; height: 1px; }
.tick::after { top: 0; bottom: 0; left: 5px; width: 1px; }

/* Wordmark letters stay hidden until the intro forms them. */
.wm-letter { opacity: 0; }
html[data-intro] .wm-letter { opacity: 0; }

/* Marquee strip. */
@keyframes marquee-scroll { to { transform: translate(-100%); } }
.marquee { display: flex; overflow: hidden; }
.marquee-track { flex-shrink: 0; min-width: 100%; animation: 36s linear infinite marquee-scroll; display: flex; }

/* Ruler readout digits roll vertically. */
.ruler-digits { height: 1em; line-height: 1; display: inline-flex; overflow: hidden; }
.ruler-digit-col { flex-direction: column; transition: transform .28s cubic-bezier(.2, .9, .2, 1); display: flex; }
.ruler-digit-col > span { height: 1em; display: block; }

/* The right rail replaces the native scrollbar when active. */
html[data-ruler="on"] { scrollbar-width: none; }
html[data-ruler="on"]::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Per-app accent tokens (light / dark ink). */
.app-photoforge { --app: #2f7bf5; --app-ink: #1a5bc4; }
.app-vectorforge { --app: #e8573f; --app-ink: #b83a24; }
.app-filmforge { --app: #8b5cf6; --app-ink: #6a3fd6; }
.app-lightforge { --app: #f2a516; --app-ink: #8a5800; }
.app-pageforge { --app: #e8204f; --app-ink: #b70228; }
.app-effectforge { --app: #e0368f; --app-ink: #b0206c; }
.app-designforge { --app: #7bb51c; --app-ink: #457008; }
.app-protoforge { --app: #02da96; --app-ink: #017a54; }
.app-textureforge { --app: #c2672b; --app-ink: #9c4a15; }
.app-materialforge { --app: #178a9c; --app-ink: #0e6674; }
.app-wordforge { --app: #4c6ef5; --app-ink: #253e99; }
.app-soundforge { --app: #14a9c4; --app-ink: #0b6f82; }
.app-deckforge { --app: #f26b1d; --app-ink: #ad4306; }
.app-cadforge { --app: #14a3c7; --app-ink: #09596d; }
.app-gridforge { --app: #1f9d55; --app-ink: #136938; }
.app-forge-anything { --app: #4e7bfb; --app-ink: #1659c4; }
:root[data-theme="dark"] .app-photoforge, :root:not([data-theme="light"]) .app-photoforge { --app-ink: #7fb0ff; }
:root[data-theme="dark"] .app-vectorforge, :root:not([data-theme="light"]) .app-vectorforge { --app-ink: #ff8a70; }
:root[data-theme="dark"] .app-filmforge, :root:not([data-theme="light"]) .app-filmforge { --app-ink: #b69cff; }
:root[data-theme="dark"] .app-lightforge, :root:not([data-theme="light"]) .app-lightforge { --app-ink: #ffc14d; }
:root[data-theme="dark"] .app-pageforge, :root:not([data-theme="light"]) .app-pageforge { --app-ink: #f23a62; }
:root[data-theme="dark"] .app-effectforge, :root:not([data-theme="light"]) .app-effectforge { --app-ink: #ff7ab8; }
:root[data-theme="dark"] .app-designforge, :root:not([data-theme="light"]) .app-designforge { --app-ink: #a6e04a; }
:root[data-theme="dark"] .app-protoforge, :root:not([data-theme="light"]) .app-protoforge { --app-ink: #3fe6ae; }
:root[data-theme="dark"] .app-textureforge, :root:not([data-theme="light"]) .app-textureforge { --app-ink: #e58a4e; }
:root[data-theme="dark"] .app-materialforge, :root:not([data-theme="light"]) .app-materialforge { --app-ink: #4fc4d6; }
:root[data-theme="dark"] .app-wordforge, :root:not([data-theme="light"]) .app-wordforge { --app-ink: #8da2fb; }
:root[data-theme="dark"] .app-soundforge, :root:not([data-theme="light"]) .app-soundforge { --app-ink: #52d1ea; }
:root[data-theme="dark"] .app-deckforge, :root:not([data-theme="light"]) .app-deckforge { --app-ink: #ff9657; }
:root[data-theme="dark"] .app-cadforge, :root:not([data-theme="light"]) .app-cadforge { --app-ink: #4cc7e6; }
:root[data-theme="dark"] .app-gridforge, :root:not([data-theme="light"]) .app-gridforge { --app-ink: #5ee089; }
:root[data-theme="dark"] .app-forge-anything, :root:not([data-theme="light"]) .app-forge-anything { --app-ink: #74aaff; }

/* Procedural clip canvases fill their frames like the footage they stand in for. */
canvas[data-clip] { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, :before, :after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .wm-letter, html[data-intro] .wm-letter { opacity: 1; }
}

/* ------------------------------------------------------------------ Forma IA demo (#studio-demo, js/studio.js) */
/* Shown as a window of the product itself (design system "Home do Aluno"): light layers, Outfit, violet,
   large radii and soft shadows, floating over the dark landing. Tokens are local so the landing is untouched. */
.sd {
  --s-canvas: #E4E5F1; --s-shell: #F8F8FC; --s-card: #FFFFFF; --s-card2: #F3F2FB; --s-ink: #16162A; --s-muted: #62627C;
  --s-line: #E7E6F1; --s-accent: #5F4FE0; --s-soft: #ECEAFD; --s-brand: #6E5FE8; --s-dash: #F1F0FB; --s-dashline: #C9C5EE;
  --s-mint: #CDEDE2; --s-mint-ink: #0E4A3B; --s-ok: #1F8A69; --s-shadow: 0 10px 30px rgba(40,36,90,.07);
  --s-btn: #16162A; --s-btn-ink: #FFFFFF; --s-on-accent: #FFFFFF; --s-accent-ink: #5F4FE0; --s-ph: #8B8BA6;
  --s-danger-soft: #FDE3E7; --s-danger-ink: #A3203A; --s-frame: 0 40px 100px rgba(40,36,90,.18), 0 0 0 1px rgba(40,36,90,.06);
  width: 100%; position: relative; text-align: left; font-family: "Outfit", system-ui, sans-serif; color: var(--s-ink);
  background: var(--s-shell); border-radius: 32px; padding: 14px; box-shadow: var(--s-frame);
}
:root[data-theme="dark"] .sd, :root:not([data-theme="light"]) .sd {
  --s-shell: #1A1A2B; --s-card: #232338; --s-card2: #2C2C45; --s-ink: #F3F3FA; --s-muted: #A9A9C2; --s-line: #34344E;
  --s-accent: #7D70F0; --s-accent-ink: #A79EFF; --s-soft: #34315A; --s-dash: #1F1F33; --s-dashline: #47476A;
  --s-mint: rgba(76,201,160,.16); --s-mint-ink: #4CC9A0; --s-ok: #4CC9A0; --s-shadow: 0 10px 30px rgba(0,0,0,.25);
  --s-btn: #6E5FE8; --s-btn-ink: #FFFFFF; --s-ph: #7C7C96; --s-danger-soft: rgba(255,143,163,.14); --s-danger-ink: #FF8FA3;
  --s-frame: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
.sd-ico { width: 15px; height: 15px; flex: none; }
.sd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 6px 14px; }
.sd-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--s-card2); overflow-x: auto; scrollbar-width: none; }
.sd-tab { font: 500 14px/1 "Outfit", sans-serif; color: var(--s-muted); padding: 0 16px; height: 40px; border-radius: 12px; display: flex; gap: 8px; align-items: center; white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s, box-shadow .15s; }
.sd-tab:hover { color: var(--s-ink); }
.sd-tab.is-on { color: var(--s-on-accent); background: var(--s-accent); box-shadow: 0 6px 16px rgba(95,79,224,.3); }
.sd-tab-n { font-size: 11px; font-weight: 600; opacity: .55; }
.sd-tab.is-on .sd-tab-n { opacity: .8; }
.sd-clock { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 48px; border-radius: 16px; background: var(--s-card); box-shadow: var(--s-shadow); font-size: 13px; color: var(--s-muted); }
.sd-clock-v { font-size: 22px; font-weight: 600; color: var(--s-muted); font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.sd-clock.is-on .sd-clock-v { color: var(--s-ink); }
.sd-clock.is-done .sd-clock-v { color: var(--s-accent-ink); }
.sd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-dashline); }
.sd-clock.is-on .sd-dot { background: var(--s-accent); animation: sd-blink 1s steps(2) infinite; }
.sd-clock.is-done .sd-dot { background: #2FAE86; }
@keyframes sd-blink { 50% { opacity: .2; } }

.sd-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; }
.sd-in, .sd-out { background: var(--s-card); border-radius: 24px; box-shadow: var(--s-shadow); padding: 22px; display: flex; flex-direction: column; }
.sd-out { position: relative; min-height: 540px; }
.sd-cap { font-size: 17px; font-weight: 600; color: var(--s-ink); }
.sd-lab { font-size: 13px; font-weight: 500; color: var(--s-ink); }
.sd-in-body { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.sd-field { display: flex; flex-direction: column; gap: 8px; }
.sd-input { min-height: 44px; border: 1px solid var(--s-line); border-radius: 14px; padding: 11px 14px; font-size: 14px; color: var(--s-ink); background: var(--s-card); }
.sd-input:empty::before { content: attr(data-ph); color: var(--s-ph); }
.sd-input.has-caret { border-color: var(--s-accent); box-shadow: 0 0 0 3px rgba(95,79,224,.12); }
.sd-input.has-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; background: var(--s-accent); vertical-align: -2px; margin-left: 1px; animation: sd-blink .8s steps(2) infinite; }
.sd-pills { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 14px; background: var(--s-card2); width: fit-content; max-width: 100%; }
.sd-pill { font-size: 13px; padding: 0 12px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--s-muted); min-width: 34px; }
.sd-pill.is-on { background: var(--s-accent); color: var(--s-on-accent); font-weight: 600; }
.sd-row2 { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 16px; }
.sd-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--s-ink); }
.sd-sw { width: 38px; height: 22px; border-radius: 11px; background: var(--s-accent); position: relative; flex: none; }
.sd-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.sd-gen { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px; background: var(--s-btn); color: var(--s-btn-ink); font: 500 15px/1 "Outfit", sans-serif; transition: transform .12s, opacity .2s, background-color .2s; }
.sd-gen.is-press { transform: scale(.97); background: var(--s-accent); }
.sd-gen.is-busy { opacity: .45; }
.sd-drop { display: flex; align-items: center; justify-content: center; gap: 10px; height: 76px; border: 1.5px dashed var(--s-dashline); border-radius: 18px; background: var(--s-dash); font-size: 14px; color: var(--s-muted); transition: border-color .2s, background-color .2s; }
.sd-drop.is-hot { border-color: var(--s-accent); background: var(--s-soft); color: var(--s-ink); }
.sd-files { display: flex; flex-direction: column; gap: 8px; }
.sd-file { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; border-radius: 16px; padding: 10px 12px; background: var(--s-card2); animation: sd-in .4s var(--d, 0ms) both cubic-bezier(.2, .9, .2, 1); }
.sd-file-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--s-danger-soft); color: var(--s-danger-ink); grid-row: span 2; }
.sd-file-t { display: flex; flex-direction: column; min-width: 0; }
.sd-file-t b { font-size: 14px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-file-t small { font-size: 12px; color: var(--s-muted); }
.sd-file-bar { height: 5px; border-radius: 9px; background: var(--s-line); grid-column: 2; overflow: hidden; }
.sd-file-bar i { display: block; height: 100%; border-radius: 9px; background: var(--s-accent); animation: sd-fill 1s var(--d, 0ms) both ease-out; }
@keyframes sd-fill { from { width: 0; } to { width: 100%; } }
.sd-read { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; }
.sd-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--s-ok); font-weight: 600; margin-right: 4px; }
.sd-brief { display: flex; flex-direction: column; gap: 6px; }
.sd-brief:empty { display: none; }
.sd-brief-i { font-size: 14px; color: var(--s-ink); padding: 10px 14px; border-radius: 14px; background: var(--s-card2); animation: sd-in .4s var(--d, 0ms) both cubic-bezier(.2, .9, .2, 1); }

.sd-out-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.sd-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--s-muted); }
.sd-status.is-work { color: var(--s-accent-ink); }
.sd-status.is-done { color: var(--s-mint-ink); background: var(--s-mint); padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.sd-spin { animation: sd-rot .8s linear infinite; }
@keyframes sd-rot { to { transform: rotate(360deg); } }
.sd-out-body { margin-top: 16px; flex: 1; display: flex; flex-direction: column; }
.sd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--s-muted); font-size: 15px; border: 1.5px dashed var(--s-dashline); border-radius: 24px; background: var(--s-dash); text-align: center; padding: 24px; }
.sd-empty-ic { width: 30px; height: 30px; color: var(--s-accent-ink); }
.sd-lesson, .sd-course { flex: 1; display: flex; flex-direction: column; position: relative; }
.sd-lhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 16px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.sd-lhead.is-in { opacity: 1; transform: none; }
.sd-badge { font-size: 12px; font-weight: 600; color: var(--s-accent-ink); background: var(--s-soft); padding: 5px 10px; border-radius: 8px; }
.sd-ltitle { font: 600 clamp(18px, 2vw, 22px)/1.2 "Outfit", sans-serif; letter-spacing: -.01em; color: var(--s-ink); flex: 1 1 60%; }
.sd-lmeta { font-size: 12px; font-weight: 600; color: var(--s-accent-ink); background: var(--s-soft); padding: 5px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.sd-orb-wrap { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s; }
.sd-orb-wrap.is-on { opacity: 1; }
.sd-orb { grid-area: 1 / 1; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ECEAFD 0%, #A79EFF 34%, #5F4FE0 68%, #3B297B 100%); box-shadow: 0 0 60px rgba(95,79,224,.45); animation: sd-breathe 1.4s ease-in-out infinite alternate; }
.sd-orb-t { grid-area: 1 / 1; font: 600 14px/1 "Outfit", sans-serif; color: #fff; }
@keyframes sd-breathe { from { transform: scale(.92); } to { transform: scale(1.04); } }
.sd-blocks, .sd-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd-block { display: flex; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--s-card2); animation: sd-in .45s both cubic-bezier(.2, .9, .2, 1); }
@keyframes sd-in { from { opacity: 0; transform: translateY(10px); } }
.sd-bic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, var(--s-card)); color: var(--c); }
.sd-bmain { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sd-btype { font-size: 12px; font-weight: 600; color: var(--c); }
.sd-btitle { font-size: 15px; font-weight: 600; color: var(--s-ink); }
.sd-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sd-lines i { height: 6px; border-radius: 9px; background: var(--s-line); width: 0; animation: sd-fill-w .7s both ease-out; }
.sd-lines i:nth-child(1) { --w: 96%; } .sd-lines i:nth-child(2) { --w: 88%; animation-delay: .15s; } .sd-lines i:nth-child(3) { --w: 61%; animation-delay: .3s; }
@keyframes sd-fill-w { to { width: var(--w); } }
.sd-img { margin-top: 6px; height: 54px; max-width: 240px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 30%, var(--s-card)), #A79EFF); overflow: hidden; animation: sd-develop 1s both; }
.sd-img svg { width: 100%; height: 100%; display: block; }
@keyframes sd-develop { from { filter: blur(8px) saturate(0); opacity: .3; } }
.sd-seq, .sd-quiz, .sd-vf { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.sd-chip { font-size: 12.5px; padding: 6px 10px; border-radius: 10px; background: var(--s-card); color: var(--s-ink); white-space: nowrap; box-shadow: 0 1px 0 var(--s-line); animation: sd-in .35s calc(var(--k, 0) * 90ms) both; }
.sd-chip.is-ok { background: var(--s-mint); color: var(--s-mint-ink); font-weight: 600; box-shadow: none; }
.sd-vf-q { font-size: 13px; color: var(--s-muted); margin-right: 4px; flex-basis: 100%; }
.sd-lfoot { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; opacity: 0; transition: opacity .4s; }
.sd-lfoot.is-in { opacity: 1; }
.sd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-tag { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--s-soft); color: var(--s-accent-ink); animation: sd-in .3s var(--d, 0ms) both; }
.sd-actions { display: flex; gap: 8px; }
.sd-btn { font: 500 14px/1 "Outfit", sans-serif; padding: 0 16px; height: 42px; display: inline-flex; align-items: center; border-radius: 12px; background: var(--s-card2); color: var(--s-ink); }
.sd-btn.is-primary { background: var(--s-accent); color: var(--s-on-accent); }
.sd-citem { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--s-card2); color: var(--s-ph); transition: color .3s, background-color .3s; }
.sd-cn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--s-card); font-size: 13px; font-weight: 700; }
.sd-cmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sd-cmain b { font-size: 15px; font-weight: 600; }
.sd-cbar { height: 5px; border-radius: 9px; background: var(--s-line); overflow: hidden; }
.sd-cbar i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--s-accent); }
.sd-citem.is-work, .sd-citem.is-done { color: var(--s-ink); }
.sd-citem.is-work { background: var(--s-soft); }
.sd-citem.is-work .sd-cn { background: var(--s-accent); color: var(--s-on-accent); }
.sd-citem.is-work .sd-cbar i { animation: sd-fill 1.5s both ease-in-out; }
.sd-citem.is-done .sd-cbar i { width: 100%; background: #2FAE86; }
.sd-citem.is-done .sd-cn { background: var(--s-mint); color: var(--s-mint-ink); }
.sd-cst { font-size: 12px; font-weight: 500; white-space: nowrap; }
.sd-citem.is-work .sd-cst { color: var(--s-accent-ink); }
.sd-citem.is-done .sd-cst { color: var(--s-ok); }
.sd-note { padding: 14px 8px 2px; font-size: 13px; color: var(--s-muted); }
.sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; text-align: left; }
.sd-stats > div { padding: 20px 22px; border-radius: 24px; background: #FFFFFF; border: 1px solid #E7E6F1; box-shadow: 0 10px 30px rgba(40,36,90,.07); }
:root[data-theme="dark"] .sd-stats > div, :root:not([data-theme="light"]) .sd-stats > div { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
.sd-stats dt { font: 600 clamp(18px, 2vw, 24px)/1.1 "Outfit", sans-serif; letter-spacing: -.01em; color: var(--ink-strong); }
.sd-stats dd { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ------------------------------------------------------------------ In-person events demo (#events-demo, js/events-demo.js) */
/* Same product window as the Forma IA demo (.sd), plus the agenda pieces. Follows the landing theme via the .sd tokens. */
.ev-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 14px; font-size: 13px; color: var(--s-muted); }
.ev-facts span { display: inline-flex; align-items: center; gap: 6px; }
.ev-seats { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--s-card2); margin-bottom: 10px; }
.ev-seats-t { font-size: 13px; color: var(--s-muted); }
.ev-seats-n { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-bar { display: block; height: 6px; border-radius: 9px; background: var(--s-line); overflow: hidden; }
.ev-bar i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--s-accent); transition: width .35s ease-out; }
.ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-person { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--s-card2); animation: sd-in .35s var(--d, 0ms) both; transition: background-color .25s, opacity .25s; }
.ev-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #16162A; }
.ev-who { display: flex; flex-direction: column; min-width: 0; }
.ev-who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-who small { font-size: 12px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--s-mint); color: var(--s-mint-ink); white-space: nowrap; }
.ev-person.is-wait { opacity: .6; } .ev-person.is-wait .ev-chip { background: var(--s-soft); color: var(--s-accent-ink); }
.ev-person.is-miss .ev-chip { background: var(--s-danger-soft); color: var(--s-danger-ink); }
.ev-person.is-walk { box-shadow: inset 0 0 0 1.5px var(--s-dashline); }
.ev-qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 112px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--s-shadow); }
.ev-qr i { aspect-ratio: 1; border-radius: 2px; background: #EFEFF6; } .ev-qr i.on { background: #16162A; }
.ev-hash { font-family: ui-monospace, "Geist Mono", monospace; font-size: 11px !important; display: inline-flex; align-items: center; gap: 4px; }
.ev-ok { width: 13px; height: 13px; color: var(--s-ok); }
.ev-freeze { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--s-soft); color: var(--s-accent-ink); animation: sd-in .4s both; }
.ev-freeze span { display: flex; flex-direction: column; } .ev-freeze b { font-size: 14px; } .ev-freeze small { font-size: 12px; color: var(--s-muted); }
.ev-evlist { display: flex; flex-direction: column; gap: 6px; }
.ev-ev { padding: 10px 14px; border-radius: 14px; background: var(--s-card2); display: flex; flex-direction: column; gap: 2px; }
.ev-ev b { font-size: 14px; } .ev-ev small { font-size: 12px; color: var(--s-muted); }
.ev-ev.is-on { background: var(--s-soft); box-shadow: inset 0 0 0 1.5px var(--s-accent); }
.ev-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ev-block { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--s-card2); }
.ev-bt { font-size: 12px; color: var(--s-muted); } .ev-block b { font-size: 16px; font-weight: 600; } .ev-block small { font-size: 12px; color: var(--s-muted); line-height: 1.4; }
.ev-stars { display: flex; gap: 2px; color: #E8A33A; } .ev-stars .sd-ico { width: 16px; height: 16px; fill: currentColor; } .ev-stars .is-off { color: var(--s-line); fill: currentColor; }
.ev-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--s-ink); }
.ev-integrity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-integrity li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--s-card2); }
.ev-integrity .ev-who small { font-family: ui-monospace, "Geist Mono", monospace; font-size: 11px; }
.ev-chip.ev-pending { background: var(--s-card); color: var(--s-muted); box-shadow: inset 0 0 0 1px var(--s-line); }
.ev-chip.is-ok .sd-ico { width: 13px; height: 13px; }
.ev-trail { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 0; }
.ev-trail li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 6px 0 6px 14px; border-left: 2px solid var(--s-line); position: relative; animation: sd-in .3s both; }
.ev-trail li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent); }
.ev-time { font-size: 12px; font-weight: 600; color: var(--s-accent-ink); font-variant-numeric: tabular-nums; }
.ev-trail b { display: block; font-size: 13px; font-weight: 600; } .ev-trail small { font-size: 11.5px; color: var(--s-muted); }
@media (max-width: 860px) { .ev-blocks { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .sd { border-radius: 24px; padding: 10px; }
  .sd-body { grid-template-columns: 1fr; }
  .sd-in-body { min-height: 400px; }
  .sd-out { min-height: 500px; }
  .sd-clock { width: 100%; justify-content: flex-end; }
  .sd-clock-label { margin-right: auto; }
  .sd-stats { grid-template-columns: 1fr 1fr; }
  .sd-in, .sd-out { padding: 16px; }
  .sd-tab { padding: 0 12px; }
}
@media (max-width: 480px) { .sd-row2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Media bank demo (#media-demo, js/media-demo.js) */
/* Same product window as the Forma IA demo (.sd), plus the search grid and media blocks. Scenes are inline SVG. */
.md-search { position: relative; }
.md-search > .sd-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--s-muted); }
.md-search .sd-input { padding-left: 38px; }
.md-src { font-size: 12px; color: var(--s-muted); min-height: 16px; margin: -6px 0 -6px; }
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.md-tile.is-empty { animation: none; background: var(--s-card2); }
.md-tile { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--s-card2); animation: sd-develop .8s var(--d, 0ms) both; transition: transform .2s, box-shadow .2s; }
.md-tile.is-hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--s-accent), 0 10px 20px rgba(40,36,90,.18); }
.md-tile.is-press { transform: scale(.96); }
.md-tile.is-picked::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: #fff; font-size: 12px; font-weight: 700; }
.md-pic { width: 100%; height: 100%; display: block; }
.md-dur { position: absolute; right: 5px; bottom: 5px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(15,15,30,.7); padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.md-tile.is-video .md-pic, .md-frame .md-pan { animation: md-pan 6s ease-in-out infinite alternate; transform-origin: 30% 60%; }
@keyframes md-pan { from { transform: scale(1); } to { transform: scale(1.12) translateX(-4%); } }
.md-hint { margin-top: auto; font-size: 12px; color: var(--s-muted); line-height: 1.45; }
.md-slot { display: flex; align-items: center; justify-content: center; gap: 8px; height: 64px; border: 1.5px dashed var(--s-dashline); border-radius: 18px; background: var(--s-dash); color: var(--s-muted); font-size: 14px; animation: sd-in .4s both; }
.md-row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.md-frame { position: relative; display: block; flex: none; width: 96px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--s-card); }
.md-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.md-name { font-size: 14px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-develop { animation: sd-develop 1s both; }
.md-play { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,15,30,.55); color: #fff; opacity: .5; transition: opacity .3s, background-color .3s; }
.md-play .sd-ico { width: 12px; height: 12px; margin-left: 2px; }
.md-vframe.is-ready .md-play { opacity: 1; background: var(--s-accent); }
.md-credit { font-size: 12px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-up { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--s-muted); min-width: 0; }
.md-up small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-bar { display: block; height: 5px; border-radius: 9px; background: var(--s-line); overflow: hidden; }
.md-bar i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--s-accent); transition: width .08s linear; }
.md-safe { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--s-ok); }
.md-assets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.md-assets li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 16px; background: var(--s-card2); animation: sd-in .4s var(--d, 0ms) both cubic-bezier(.2, .9, .2, 1); }
.md-thumb { width: 64px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; display: block; }
.md-lic { font-size: 11.5px; font-weight: 500; color: var(--s-accent-ink); background: var(--s-soft); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.md-where { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--s-mint); color: var(--s-mint-ink); }
.md-where > .sd-ico { margin-top: 2px; }
.md-where span { display: flex; flex-direction: column; gap: 2px; }
.md-where b { font-size: 14px; }
.md-where small { font-size: 12.5px; opacity: .85; }
/* Fixed height: the window keeps the same size in every step, like the Forma IA demo. */
.md .sd-out { height: 580px; min-height: 0; overflow: hidden; }
.md .sd-in { height: 580px; overflow: hidden; }
.md .md-blocks .sd-block { padding: 10px 14px; align-items: center; }
.md .md-blocks .sd-lines { display: none; }
.md .sd-lfoot { padding-top: 12px; }
@media (max-width: 860px) { .md .sd-in { height: auto; } .md .sd-out { height: 520px; } }
@media (max-width: 480px) { .md-lic { display: none; } .md-assets li { grid-template-columns: auto 1fr; } }

/* ------------------------------------------------------------------ Security and integrations demo (#trust-demo, js/trust-demo.js) */
/* Same product window as the Forma IA demo (.sd). Fixed height: the window never grows while it plays. */
.tr .sd-in, .tr .sd-out { height: 560px; min-height: 0; overflow: hidden; }
.tr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--s-card2); animation: sd-in .4s var(--d, 0ms) both cubic-bezier(.2, .9, .2, 1); transition: opacity .3s, background-color .3s; }
.tr-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--s-soft); color: var(--s-accent-ink); }
.tr-t { display: flex; flex-direction: column; min-width: 0; }
.tr-t b { font-size: 14px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-t small { font-size: 12px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--s-muted); white-space: nowrap; }
.tr-row.is-wait { opacity: .55; }
.tr-row.is-work { background: var(--s-soft); }
.tr-row.is-work .tr-chip { color: var(--s-accent-ink); }
.tr-row.is-ok .tr-chip { color: var(--s-ok); }
.tr-row.is-ok .tr-ic { background: var(--s-mint); color: var(--s-mint-ink); }
.tr-key, .tr-sso { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--s-card2); color: var(--s-accent-ink); }
.tr-key span, .tr-sso span { display: flex; flex-direction: column; min-width: 0; }
.tr-key b, .tr-sso b { font-size: 14px; color: var(--s-ink); }
.tr-key small, .tr-sso small { font-size: 12px; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.tr-sso { margin-top: auto; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.tr-sso.is-in { opacity: 1; transform: none; }
.tr-code { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: #16162A; color: #CFCBFF; font: 12px/1.6 ui-monospace, Menlo, monospace; display: flex; flex-direction: column; gap: 4px; overflow: hidden; word-break: break-all; }
.tr-code:empty { display: none; }
.tr-c1 { color: #8B8BA6; }
.tr-dns { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--s-line); font: 13px/1.2 ui-monospace, Menlo, monospace; color: var(--s-muted); }
.tr-dns b { color: var(--s-ink); font-weight: 600; }
.tr-browser { margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--s-line); background: var(--s-card); transition: opacity .5s, filter .5s; }
.tr-browser.tr-dim { opacity: .35; filter: grayscale(1); }
.tr-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--s-card2); }
.tr-dots { display: inline-flex; gap: 4px; }
.tr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--s-dashline); }
.tr-url { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 12px; color: var(--s-muted); background: var(--s-card); padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-lock { color: var(--s-ok); display: inline-flex; }
.tr-lock .sd-ico { width: 12px; height: 12px; }
.tr-view { padding: 16px; }
.tr-login { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 220px; margin: 0 auto; }
.tr-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #E36A5A; color: #fff; font-weight: 700; font-size: 13px; }
.tr-login b { font-size: 14px; }
.tr-in { width: 100%; height: 26px; border-radius: 8px; border: 1px solid var(--s-line); }
.tr-go { width: 100%; height: 28px; border-radius: 8px; background: #E36A5A; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.tr-two { display: flex; flex-direction: column; gap: 4px; }
.tr-two .tr-browser { margin-top: 6px; }
.tr-two .tr-view { padding: 0; }
.tr-player { position: relative; height: 104px; display: grid; place-items: center; overflow: hidden; }
.tr-pl-bg { position: absolute; inset: 0; background: linear-gradient(120deg, #3B297B, #5F4FE0 60%, #A79EFF); opacity: .85; }
.tr-player.is-playing .tr-pl-bg { animation: md-pan 6s ease-in-out infinite alternate; }
.tr-pl-play { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,15,30,.5); color: #fff; transition: opacity .3s; }
.tr-pl-play .sd-ico { width: 13px; height: 13px; margin-left: 2px; }
.tr-player.is-playing .tr-pl-play, .tr-player.is-denied .tr-pl-play { opacity: 0; }
.tr-pl-bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 9px; background: rgba(255,255,255,.25); overflow: hidden; }
.tr-pl-bar i { display: block; height: 100%; width: 0; background: #fff; }
.tr-player.is-playing .tr-pl-bar i { animation: sd-fill 6s linear both; }
.tr-player.is-denied .tr-pl-bg { background: #2B2B40; opacity: 1; }
.tr-player.is-denied .tr-pl-bar { display: none; }
.tr-pl-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: #fff; }
.tr-pl-msg:empty { display: none; }
.tr-player.is-playing .tr-pl-msg { inset: auto 12px 20px auto; font-size: 12px; background: rgba(15,15,30,.55); padding: 4px 8px; border-radius: 8px; }
.tr-player.is-denied .tr-pl-msg { color: #FF8FA3; }
.tr-person { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--s-card2); animation: sd-in .35s both; }
.tr-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ECEAFD; color: #3B297B; font-weight: 700; font-size: 13px; }
.tr-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.tr-fields div { padding: 8px 10px; border-radius: 12px; background: var(--s-card); min-width: 0; }
.tr-fields dt { font-size: 11px; color: var(--s-muted); }
.tr-fields dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tr-person.is-hidden .tr-fields div:nth-child(-n+3) dd { color: var(--s-muted); font-weight: 500; }
.tr-trail { max-height: 190px; overflow: hidden; }
@media (max-width: 860px) { .tr .sd-in { height: auto; } .tr .sd-out { height: 540px; } }
@media (max-width: 480px) { .tr-fields { grid-template-columns: 1fr; } .tr-dns { grid-template-columns: auto 1fr; } }

/* ------------------------------------------------------------------ Price teaser (#precos, js/price-teaser.js) */
.pt-sim { width: 100%; max-width: 760px; margin: 40px auto 0; text-align: left; }
.pt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pt-seg { display: inline-flex; border: 1px solid var(--line-strong); }
.pt-seg button { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px; color: var(--muted); cursor: pointer; }
.pt-seg button.is-on { background: var(--invert-bg); color: var(--invert-fg); }
.pt-lives { font-size: 15px; color: var(--muted); }
.pt-lives b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.pt-range { width: 100%; margin: 18px 0 6px; accent-color: var(--accent); }
.pt-ticks { position: relative; height: 16px; margin: 0 8px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pt-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; background: var(--line); border: 1px solid var(--line); }
.pt-out div { background: var(--bg); padding: 18px 20px; }
.pt-out dt { font-size: 12px; color: var(--muted); }
.pt-out dd { margin: 6px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 3vw, 32px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.pt-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.pt-incl { margin-top: 16px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 600px) { .pt-out { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Content creation switch (#studio: Forma IA | media bank) */
.cm-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 auto 18px; max-width: 640px; background: var(--line); border: 1px solid var(--line-strong); }
.cm-switch button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 14px; background: var(--bg); color: var(--muted); font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .15s, color .15s; }
.cm-switch button small { font-family: var(--font-body, inherit); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; opacity: .75; }
.cm-switch button:hover { color: var(--ink); }
.cm-switch button.is-on { background: var(--invert-bg); color: var(--invert-fg); }
.cm-pane[hidden] { display: none; }