/* =============================================================================
   Tema do estúdio aplicado às páginas do Fliper IA (que usam a estrutura do
   styles.css). Troca o roxo de fliperama pelo preto do estúdio, a tipografia
   pela do estúdio e os botões pelos do estúdio, inclusive no console da demo.
   ============================================================================= */
:root{
  --ink: #050505; --ink-1: #0d0d0d; --ink-2: #161616; --line: #262626; --line-hi: #3a3a3a;
  --text: #f2f2f2; --muted: #a8a8a8; --dim: #707070;
  --magenta: #ff2e88; --cyan: #ffc531; --amber: #ffc531;
  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --col: 1240px;
}
body{ padding-top: var(--s-navh, 72px); background: var(--ink); }
h1, h2, h3{ font-family: var(--display); font-stretch: 75%; font-weight: 900; letter-spacing: -.005em; }
h1{ font-size: clamp(44px, 8vw, 120px); line-height: .9; }
.pagehead{ background: radial-gradient(70% 120% at 85% 0%, rgba(255,46,136,.14), transparent 60%), var(--ink); }
.slot{ font-family: var(--body); font-weight: 700; letter-spacing: .18em; color: var(--muted); }
.slot::before{ background: var(--magenta); }
.crumbs, .crumbs a{ font-family: var(--body); letter-spacing: .14em; }

.cta{ font-family: var(--body); font-weight: 800; font-size: 14px; letter-spacing: .12em; background: #fff; color: #000; border-radius: 0; padding: 17px 26px; }
.cta:hover{ background: var(--amber); }
.cta:disabled{ background: #fff; }
.cta-sm{ font-size: 12px; padding: 12px 16px; }
.cta .coin{ color: #000; opacity: .6; }
.cta-ghost{ background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.cta-ghost:hover{ background: #fff; color: #000; }

.row input, .row select{ background: var(--ink-2); border-color: var(--line); border-radius: 0; }
.row input:hover, .row select:hover{ border-color: #555; }

/* console da demo (/play) no visual do estúdio: grafite, linhas finas, dourado e rosa */
.machine{ --line-hi: #333; border-radius: 0; background: var(--ink-1); }
.machine .cta{ background: #fff; color: #000; border-radius: 0; }
.machine .cta:hover{ background: var(--amber); }
.machine h3{ font-stretch: 75%; text-transform: uppercase; }
.playgate{ background: rgba(5,5,5,.86); }
.playgate-box{ border-radius: 0; background: var(--ink); border-color: var(--line); border-top: 3px solid var(--magenta); }
.playgate-box h3{ font-size: 30px; line-height: .95; }
.chrome{ background: var(--ink); font-family: var(--body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dots i{ border-radius: 0; }
.dots i:nth-child(2){ background: var(--amber); }
.chrome .engine .dot{ box-shadow: none; }
.rail, .promptbar{ background: var(--ink); }
.rail h4{ font-family: var(--body); color: var(--muted); }
.screenwrap{ background: #050505; }
.screenwrap::after{ background: radial-gradient(120% 130% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%); }
.field{ border-radius: 0; border-color: var(--line); background: var(--ink-1); }
.chips.cards .chip{ border-radius: 0; background: var(--ink-1); border-color: var(--line); }
.chips.cards .chip:hover{ border-color: #555; }
.chips.cards .chip[aria-pressed="true"]{ background: var(--ink-2); border-color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
.gc-bar{ border-radius: 0; height: 4px; }
.gc-title{ font-stretch: 75%; font-weight: 900; font-size: 20px; }
.gc-sub{ font-family: var(--body); }
.playhint{ font-family: var(--body); }
.board{ border-radius: 0; }
.board h3{ font-family: var(--body); font-weight: 700; }