@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #050505;
  --card: #171717;
  --border: #333;
  --text: #f5f5f5;
  --muted: #bdbdbd;
  --accent: #795aff;
  --accent-text: #a592ff;
  --bad: #ff7b7b;
  --good: #5fe08f;
  --font-title: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* unidade que escala com o projetor: 100u = largura de um palco 16:9 */
  --u: min(1vw, 1.7778vh);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font-family: var(--font-body); font-size: calc(var(--u) * 2.6); line-height: 1.25; -webkit-tap-highlight-color: transparent; }
code { font-family: var(--font-mono); color: var(--accent-text); background: var(--card); padding: 0 .25em; border-radius: .2em; }
b { color: var(--accent-text); font-weight: 700; }

#bar { position: fixed; inset: 0 0 auto 0; height: calc(var(--u) * .6); background: #1c1c1c; z-index: 5; }
#bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .25s; }
#count { position: fixed; right: calc(var(--u) * 2); bottom: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.5); color: #7a7a7a; font-family: var(--font-mono); z-index: 5; }

.slide { position: fixed; inset: 0; display: grid; place-items: center; padding: calc(var(--u) * 3.2) calc(var(--u) * 6); opacity: 0; }
.slide.in { opacity: 1; animation: in .25s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(calc(var(--u) * 1)); } }
@media (prefers-reduced-motion: reduce) { .slide.in { animation: none; } #bar::after { transition: none; } }
.inner { width: 100%; max-width: calc(var(--u) * 92); display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }

h1, h2, h3, .big { font-family: var(--font-title); letter-spacing: -.02em; }
h1 { font-size: calc(var(--u) * 7.5); line-height: 1.05; }
h2 { font-size: calc(var(--u) * 4.7); color: var(--text); line-height: 1.1; }
h3 { font-size: calc(var(--u) * 3.4); }
.big { font-size: calc(var(--u) * 7); font-weight: 700; line-height: 1.1; }
.lead { font-size: calc(var(--u) * 3.2); color: var(--muted); }
.meta { font-size: calc(var(--u) * 2.4); color: var(--muted); font-family: var(--font-mono); }

.k-cover .inner, .k-section .inner { gap: calc(var(--u) * 2.5); }
.k-cover .logo { width: calc(var(--u) * 12); height: auto; }
.k-cover h1 { font-size: calc(var(--u) * 8.5); }
.k-section .num { font-family: var(--font-mono); font-size: calc(var(--u) * 4); color: var(--accent-text); }
.k-section { background: radial-gradient(circle at 85% 90%, rgba(121, 90, 255, .28), transparent 55%); }
.k-break .big { color: var(--accent-text); }

.keys { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.keys li { font-family: var(--font-title); font-size: calc(var(--u) * 6); font-weight: 700; line-height: 1.1; padding-left: calc(var(--u) * 2.5); border-left: calc(var(--u) * .7) solid var(--accent); }

.steps { padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.steps li { counter-increment: s; font-size: calc(var(--u) * 4); font-weight: 600; display: flex; gap: calc(var(--u) * 2); align-items: baseline; }
.steps li::before { content: counter(s); flex: none; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-family: var(--font-mono); font-size: .8em; }

.agenda { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.5) calc(var(--u) * 4); }
.agenda li { display: flex; gap: calc(var(--u) * 1.5); font-size: calc(var(--u) * 2.9); }
.agenda b { font-family: var(--font-mono); min-width: 3.2em; }

pre.code { font-family: var(--font-mono); font-size: calc(var(--u) * 3.2); line-height: 1.55; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 3); white-space: pre-wrap; overflow-wrap: anywhere; }
pre.code .c { color: #9a9a9a; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
.col { background: var(--card); border: calc(var(--u) * .3) solid var(--border); border-radius: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); font-size: calc(var(--u) * 3.1); }
.col.bad { border-color: var(--bad); } .col.bad h3 { color: var(--bad); } .col.bad h3::before { content: "✕ "; }
.col.good { border-color: var(--good); } .col.good h3 { color: var(--good); } .col.good h3::before { content: "✓ "; }

.flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
.stack { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.node { background: var(--card); border: calc(var(--u) * .3) solid var(--accent); border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 2) calc(var(--u) * 2.5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * .6); min-width: calc(var(--u) * 14); }
.node .t { font-family: var(--font-title); font-size: calc(var(--u) * 3.6); font-weight: 700; }
.node .sub { font-size: calc(var(--u) * 2.3); color: var(--muted); }
.node.bad { border-color: var(--bad); } .node.good { border-color: var(--good); }
.node.muted { border-style: dashed; border-color: #666; }
.arrow { display: flex; flex-direction: column; align-items: center; color: var(--accent-text); }
.arrow i { font-style: normal; font-size: calc(var(--u) * 5); line-height: 1; }
.arrow span { font-size: calc(var(--u) * 2.1); color: var(--muted); max-width: calc(var(--u) * 14); text-align: center; }

.qrs { display: flex; gap: calc(var(--u) * 6); justify-content: center; }
.qrs figure { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 2.6); text-align: center; }
.qrs img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); background: #fff; padding: calc(var(--u) * 1.5); border-radius: calc(var(--u) * 1); }

/* modo apresentador (tecla N) */
#panel { display: none; position: fixed; inset: auto 0 0 0; z-index: 10; background: #0d0d0dee; border-top: calc(var(--u) * .3) solid var(--accent); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); font-size: calc(var(--u) * 2.2); gap: calc(var(--u) * 3); grid-template-columns: 1fr auto; backdrop-filter: blur(6px); }
body.presenter #panel { display: grid; }
#notes { white-space: pre-wrap; }
#panel .side { text-align: right; font-family: var(--font-mono); color: var(--muted); font-size: calc(var(--u) * 1.7); display: flex; flex-direction: column; gap: .3em; }
#clock { font-size: calc(var(--u) * 3); color: var(--text); }
body.presenter { --u: min(1vw, 1.3vh); }
body.presenter .slide { bottom: 26vh; }
body.presenter #count { bottom: calc(26vh + 1vh); }
body.presenter #panel { height: 26vh; overflow: auto; font-size: max(2.1vh, 14px); align-content: start; }
body.presenter #panel .side { font-size: max(1.7vh, 12px); }
body.presenter #clock { font-size: max(3vh, 18px); }

/* celular em pé: empilha e reduz */
@media (max-aspect-ratio: 1/1) {
  :root { --u: min(1.9vw, 1.7778vh); }
  .compare, .agenda { grid-template-columns: 1fr; }
  .qrs { flex-direction: column; align-items: center; }
}

/* index */
.home { position: static; display: block; opacity: 1; overflow: auto; height: 100%; padding: calc(var(--u) * 5) calc(var(--u) * 7); }
.home .inner { margin: 0 auto; }
.cards { display: grid; gap: calc(var(--u) * 2); }
.card { display: block; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); }
.card:hover, .card:focus-visible { border-color: var(--accent); outline: none; }
.card h2 { color: var(--text); }
.card p { color: var(--muted); font-size: calc(var(--u) * 2.4); margin-top: .4em; }

/* pilha de camadas: linhas compactas para caber 4 itens */
.stack .node { flex-direction: row; justify-content: space-between; align-items: baseline; padding: calc(var(--u) * 1.6) calc(var(--u) * 3); }
.stack .node .sub { font-size: calc(var(--u) * 2.8); }
pre.code.dense { font-size: calc(var(--u) * 2.7); line-height: 1.4; padding: calc(var(--u) * 2) calc(var(--u) * 3); }

/* fluxos numa linha só: setas nunca ficam sozinhas */
.flow { flex-wrap: nowrap; gap: calc(var(--u) * .8); }
.flow .node { min-width: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.4); flex: 0 1 auto; }
.flow .node .t { font-size: calc(var(--u) * 3); }
.flow .node .sub { font-size: calc(var(--u) * 1.9); }
.flow .arrow i { font-size: calc(var(--u) * 3.6); }
.flow .arrow span { font-size: calc(var(--u) * 1.8); max-width: calc(var(--u) * 9); }
@media (max-aspect-ratio: 1/1) { .flow { flex-direction: column; } .flow .arrow i { transform: rotate(90deg); } }
.flow .node .t { white-space: nowrap; }

/* padrão de slide didático: título-afirmação + pontos + analogia */
.pts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); font-size: calc(var(--u) * 2.8); line-height: 1.2; }
.pts li { position: relative; padding-left: 1.3em; }
.pts li::before { content: "▸"; position: absolute; left: 0; color: var(--accent-text); }
.analogy { background: var(--card); border-left: calc(var(--u) * .7) solid var(--accent); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.5); font-size: calc(var(--u) * 2.7); line-height: 1.25; }
.analogy span { display: block; font-family: var(--font-mono); font-size: .62em; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text); margin-bottom: .3em; }
.flow .node { padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); }
.flow .node .t { font-size: calc(var(--u) * 3.3); }
.flow .node .sub { font-size: calc(var(--u) * 2.2); max-width: calc(var(--u) * 20); }
.flow .arrow span { font-size: calc(var(--u) * 2.1); max-width: calc(var(--u) * 12); }

.prac { display: grid; grid-template-columns: 1fr 1.15fr; gap: calc(var(--u) * 2) calc(var(--u) * 3); }
.prac h4 { font-family: var(--font-mono); font-size: calc(var(--u) * 1.9); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text); margin-bottom: calc(var(--u) * .8); font-weight: 600; }
.prac pre.code { white-space: pre; overflow: hidden; font-size: calc(var(--u) * 2.05); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); }
.prac ol { list-style: none; padding: 0; counter-reset: w; display: flex; flex-direction: column; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.5); }
.prac li { counter-increment: w; display: flex; gap: calc(var(--u) * 1.2); align-items: baseline; }
.prac li::before { content: counter(w); flex: none; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-family: var(--font-mono); font-size: .8em; }
.prac .see { grid-column: 2; grid-row: 1 / 3; background: var(--card); border: calc(var(--u) * .3) solid var(--good); border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.5); }
.prac .see h4 { color: var(--good); }
.prac .mock { font-family: var(--font-mono); font-size: calc(var(--u) * 2.2); line-height: 1.5; white-space: pre-wrap; }
.prac .mock b { color: var(--bad); }
.prac .see p { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.4); color: var(--muted); }

.analogy { padding: calc(var(--u) * 1.3) calc(var(--u) * 2.5); }
.flow .node .sub { font-size: calc(var(--u) * 2.1); }

/* ajustes do padrão didático (3 a 5 pontos por slide) */
.steps { gap: calc(var(--u) * 1.4); }
.steps li { font-size: calc(var(--u) * 3); font-weight: 500; }
.col h3 { font-size: calc(var(--u) * 3); }
.col ul { font-size: calc(var(--u) * 2.8); gap: calc(var(--u) * 1.1); }
.col { padding: calc(var(--u) * 2.2) calc(var(--u) * 2.8); gap: calc(var(--u) * 1.3); }
.stack .node { padding: calc(var(--u) * 1.1) calc(var(--u) * 2.5); }
.stack .node .t { font-size: calc(var(--u) * 3.1); }
pre.code.dense { font-size: calc(var(--u) * 2.5); line-height: 1.4; }
.prac.wide { grid-template-columns: 1fr 1fr; }
.prac.wide .cmd { grid-column: 1 / -1; }
.prac.wide .where { grid-column: 1; grid-row: 2; }
.prac.wide .see { grid-column: 2; grid-row: 2; }
.prac.wide pre.code { font-size: calc(var(--u) * 2.6); }
.prac.wide .mock { font-size: calc(var(--u) * 2); }

.stack { gap: calc(var(--u) * .8); }
.stack .node { padding: calc(var(--u) * .8) calc(var(--u) * 2.5); }
.stack .node .t { font-size: calc(var(--u) * 2.9); }
.stack .node .sub { font-size: calc(var(--u) * 2.5); }
.k-practical h2 { font-size: calc(var(--u) * 4.3); } .k-practical .inner { gap: calc(var(--u) * 1.6); }