@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Poppins:wght@400;500;600;700;800&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    /* marca (mesmos tokens do portfólio) */
    --color-white: #f5f5f7;
    --color-white-dim: #b6b6c3;
    --color-black: #050507;
    --color-pink: #e0388f;
    --color-blue: #8A2BE2;
    --color-blue-light: #a768f0;
    --color-azul: #6495ED;

    /* superfícies */
    --surface: #141420;
    --surface-2: #1b1b29;
    --border-soft: rgba(255, 255, 255, 0.08);
    --gradient-brand: linear-gradient(135deg, var(--color-blue), var(--color-pink));

    /* sinais do neurônio (verde = o mesmo do "disponível" do portfólio) */
    --signal-exc: #3ddc84;
    --signal-inh: #ff4d6d;

    /* raio / sombra / movimento */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --shadow-glow: 0 20px 60px -25px rgba(138, 43, 226, .55);
    --shadow-soft: 0 15px 40px -20px rgba(0, 0, 0, .6);
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* palco 16:9 — tudo é desenhado em 1920x1080 e escalado pelo JS */
    --stage-w: 1920px;
    --stage-h: 1080px;
    --slide-pad-x: 12rem;
}

html {
    font-size: 10px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
}

::selection {
    background: var(--color-blue);
    color: var(--color-white);
}

a {
    color: inherit;
}

/* ==========================================================================
   Deck / palco
   ========================================================================== */

.deck {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--color-black);
}

.stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--stage-w);
    height: var(--stage-h);
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
    background: var(--color-black);
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 8rem var(--slide-pad-x) 13rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s var(--ease), visibility 0s linear .6s;
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s var(--ease), visibility 0s;
}

.slide-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* entrada em cascata (equivalente ao fade-up do AOS no portfólio) */
.slide.is-active [data-anim] {
    animation: fade-up .8s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}

/* fragmentos: aparecem um por vez ao avançar */
.fragment {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.fragment.is-visible {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Barra de progresso + rodapé
   ========================================================================== */

.deck-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, .04);
    z-index: 10;
}

.deck-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gradient-brand);
    transition: width .6s var(--ease);
}

.deck-foot {
    position: absolute;
    left: var(--slide-pad-x);
    right: var(--slide-pad-x);
    bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--border-soft);
    font-size: 1.5rem;
    color: var(--color-white-dim);
    z-index: 10;
    transition: opacity .4s var(--ease);
}

.deck.is-bare .deck-foot {
    opacity: 0;
    pointer-events: none;
}

.deck-foot-brand strong {
    color: var(--color-white);
    font-weight: 600;
}

.deck-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.deck-count {
    margin-right: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: .1rem;
}

.deck-count #deckCurrent {
    color: var(--color-white);
}

.deck-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--color-white-dim);
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

.deck-btn:hover:not(:disabled) {
    color: var(--color-white);
    border-color: var(--color-blue);
}

.deck-btn:disabled {
    opacity: .3;
    cursor: default;
}

.deck-btn svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   Componentes do portfólio (escalados para projeção)
   ========================================================================== */

.hero-rule,
.section-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .14rem;
    color: var(--color-white-dim);
}

.section-rule span:first-child {
    color: var(--color-white);
}

.hero-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-white-dim);
}

.hero-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kicker {
    display: block;
    margin-bottom: 2.4rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: var(--color-blue-light);
}

.slide-title {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.2rem;
}

.lead {
    font-size: 2.6rem;
    line-height: 1.65;
    color: var(--color-white-dim);
}

.featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.featured-tags span {
    padding: .6rem 1.6rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border-soft);
    font-size: 1.6rem;
    color: var(--color-white-dim);
}

.button-borders {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.button-borders:before,
.button-borders:after {
    content: "";
    position: absolute;
    width: calc(100% + 1.2rem);
    height: 50%;
    left: -0.6rem;
    border: 1px solid var(--color-blue);
    opacity: 0.3;
}

.button-borders:before {
    top: -0.6rem;
    border-bottom: 0px;
}

.button-borders:after {
    bottom: -0.6rem;
    border-top: 0px;
}

.primary-button {
    position: relative;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    color: var(--color-white);
    font-weight: 600;
    letter-spacing: 0.05rem;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: 1.8rem 5.6rem;
    background: linear-gradient(180deg, rgba(138, 43, 226, .12), rgba(138, 43, 226, 0));
    overflow: hidden;
    transition: 0.3s var(--ease);
    transition-property: border-color, color, box-shadow, transform;
    z-index: 1;
}

.primary-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-brand);
    opacity: 0;
    transition: opacity .3s var(--ease);
    z-index: -1;
}

.primary-button:hover {
    border-color: var(--color-pink);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.primary-button:hover::before {
    opacity: 1;
}

/* ==========================================================================
   Capa
   ========================================================================== */

.slide-cover {
    justify-content: space-between;
    padding-bottom: 7rem;
    background: radial-gradient(ellipse 45% 60% at 82% 45%, rgba(138, 43, 226, .12), transparent 70%);
}

/* rede neural animada (capa e slide de impacto); cada slide define sua máscara */
.neural-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.slide-cover > :not(.neural-bg),
.slide-impact > :not(.neural-bg) {
    position: relative;
    z-index: 1;
}

.slide-cover .neural-bg {
    -webkit-mask-image: radial-gradient(ellipse 40% 58% at 80% 45%, #000 35%, transparent 80%);
    mask-image: radial-gradient(ellipse 40% 58% at 80% 45%, #000 35%, transparent 80%);
}

.hero-statement {
    font-size: 13rem;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.2rem;
}

.hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--border-soft);
}

.hero-who {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hero-avatar {
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gradient-brand);
    padding: 3px;
}

.hero-who-text {
    display: flex;
    flex-direction: column;
    font-size: 1.8rem;
    color: var(--color-white-dim);
    line-height: 1.4;
}

.hero-who-text strong {
    color: var(--color-white);
    font-size: 2.1rem;
    font-weight: 700;
}

.hero-site {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-white-dim);
    letter-spacing: .04rem;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 3.6rem;
}

.key-hint {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.5rem;
    color: var(--color-white-dim);
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0 .8rem;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    border-bottom-width: 3px;
    background: var(--surface);
    font-family: inherit;
    font-size: 1.5rem;
    color: var(--color-white);
}

/* ==========================================================================
   Tipo 1 — Conceito
   ========================================================================== */

.concept-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-content: center;
    align-items: center;
    gap: 10rem;
}

.concept-main .lead {
    margin-top: 3.2rem;
    max-width: 34ch;
}

.point-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-top: 4.4rem;
}

.point-list li {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
}

.point-list li::before {
    content: "";
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 1.2rem;
    border-radius: 50%;
    background: var(--gradient-brand);
}

.highlight-card {
    position: relative;
    padding: 6rem 5.6rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .14), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

.highlight-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 5.6rem;
    width: 9rem;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: var(--gradient-brand);
}

.highlight-label {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

.highlight-label::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--gradient-brand);
}

.highlight-text {
    margin: 2rem 0 4rem;
    font-size: 3.8rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ==========================================================================
   Tipo 2 — Cards
   ========================================================================== */

.title {
    text-align: center;
}

.title h2 {
    display: inline-block;
    position: relative;
    padding-bottom: 2.4rem;
    font-size: 6.4rem;
    font-weight: 700;
    letter-spacing: -.2rem;
}

.title h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 9rem;
    height: 5px;
    border-radius: 5px;
    background: var(--gradient-brand);
}

.title p {
    margin-top: 3rem;
    font-size: 2.4rem;
    color: var(--color-white-dim);
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.6rem;
    margin-top: 7rem;
}

.featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 4.8rem 4.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.featured-card:hover {
    transform: translateY(-.8rem);
    border-color: var(--color-blue);
    box-shadow: var(--shadow-glow);
}

.featured-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    margin-bottom: 3.2rem;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    font-size: 3.4rem;
    font-weight: 800;
}

.featured-badge {
    position: absolute;
    top: 4.8rem;
    right: 4.4rem;
    padding: .6rem 1.6rem;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 600;
    background: rgba(138, 43, 226, .18);
    color: var(--color-blue-light);
    border: 1px solid rgba(138, 43, 226, .4);
}

.featured-card h3 {
    margin-bottom: 1.4rem;
    font-size: 3.2rem;
    font-weight: 700;
}

.featured-card p {
    flex: 1;
    margin-bottom: 3.2rem;
    font-size: 2.1rem;
    line-height: 1.6;
    color: var(--color-white-dim);
}

/* ==========================================================================
   Tipo 3 — Passo a passo
   ========================================================================== */

.flow-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8rem;
}

.flow-head .lead {
    max-width: 56rem;
    padding-bottom: 1rem;
}

.flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 9rem;
}

.flow-step {
    padding-right: 5rem;
}

/* etapas ainda não reveladas ficam "fantasmas" em vez de sumir */
.flow-step.fragment {
    opacity: .2;
    transform: none;
}

.flow-step.fragment.is-visible {
    opacity: 1;
}

.flow-rail {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.8rem;
    margin-right: -5rem; /* atravessa o padding até a bolinha da próxima etapa */
    margin-bottom: 4rem;
}

/* linha até a próxima etapa: cinza por baixo, gradiente cresce por cima */
.flow-rail::before,
.flow-rail::after {
    content: "";
    position: absolute;
    left: 2.8rem;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
}

.flow-rail::before {
    background: rgba(255, 255, 255, .14);
}

.flow-rail::after {
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease) .15s;
}

.flow-step.is-visible .flow-rail::after {
    transform: scaleX(1);
}

.flow-step:last-child .flow-rail::before,
.flow-step:last-child .flow-rail::after {
    display: none;
}

.flow-dot {
    position: relative;
    z-index: 1;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 3px solid var(--color-white-dim);
    background: var(--surface-2);
    transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}

.flow-step.is-visible .flow-dot {
    border-color: transparent;
    background: var(--gradient-brand);
    box-shadow: 0 0 0 .9rem rgba(138, 43, 226, .16), var(--shadow-glow);
}

.flow-num {
    display: block;
    margin-bottom: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-size: 5.6rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.flow-step h3 {
    margin-bottom: 1.2rem;
    font-size: 3rem;
    font-weight: 700;
}

.flow-step p {
    font-size: 2rem;
    line-height: 1.6;
    color: var(--color-white-dim);
}

/* ==========================================================================
   Pergunta + revelação (cards que aparecem um a um)
   O JS grava em data-step quantos fragmentos já apareceram no slide.
   ========================================================================== */

.question-title h2 {
    font-size: 7.2rem;
    transition: transform .7s var(--ease);
}

/* sozinha na tela, a pergunta fica um pouco maior */
.slide[data-step="0"] .question-title h2 {
    transform: scale(1.15);
}

/* a área dos cards cresce de 0 até o tamanho do conteúdo, empurrando a pergunta para cima */
.question-reveal {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .7s var(--ease);
}

.slide[data-step="0"] .question-reveal {
    grid-template-rows: 0fr;
}

.question-reveal-inner {
    min-height: 0;
}

.question-sub {
    margin-top: 2.4rem;
    text-align: center;
    font-size: 2.4rem;
    color: var(--color-white-dim);
    transition: opacity .5s var(--ease) .2s;
}

.slide[data-step="0"] .question-sub {
    opacity: 0;
}

/* versão mais compacta do card: cabe pergunta + subtítulo + 3 cards */
.question-body .featured-grid {
    margin-top: 4.8rem;
}

.question-body .featured-card {
    padding: 4rem;
}

.question-body .featured-icon {
    width: 6.4rem;
    height: 6.4rem;
    margin-bottom: 2.4rem;
    font-size: 2.8rem;
}

.question-body .featured-card h3 {
    margin-bottom: 1rem;
}

/* .featured-card redefine transition; aqui somamos o fade do fragmento */
.featured-card.fragment {
    transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.featured-card h3 .h3-alt {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.question-body .featured-card > p {
    flex: none;
    margin-bottom: 2.4rem;
}

.card-example {
    flex: 1;
    padding: 2rem 2.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .03);
}

.card-example .highlight-label {
    font-size: 1.4rem;
}

.featured-card .card-example p {
    margin: 1.2rem 0 0;
    font-size: 2rem;
    line-height: 1.55;
    color: var(--color-white);
}

/* ==========================================================================
   Impacto — frase única, centralizada
   ========================================================================== */

.slide-impact {
    align-items: center;
    justify-content: center;
    padding-bottom: 8rem;
    background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(138, 43, 226, .12), transparent 70%);
}

/* a rede aparece nas bordas e some no centro, emoldurando a frase */
.slide-impact .neural-bg {
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, #000 85%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, #000 85%);
}

.impact-statement {
    text-align: center;
    font-size: 12rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.2rem;
}

.impact-statement > span {
    display: block;
}

/* entrada mais lenta e dramática que o fade-up padrão */
.slide-impact.is-active [data-anim] {
    animation: impact-in 1.2s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 450ms + 250ms);
}

/* ==========================================================================
   Sobre mim
   ========================================================================== */

.about-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
    gap: 10rem;
}

.about-photo {
    position: relative;
    width: 40rem;
    height: 40rem;
    padding: 6px;
    border-radius: 50%;
    background: var(--gradient-brand);
    box-shadow: 0 30px 90px -30px rgba(138, 43, 226, .7);
}

/* órbita tracejada em volta da foto */
.about-photo::after {
    content: "";
    position: absolute;
    inset: -2.4rem;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .14);
}

.about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid var(--color-black);
    object-fit: cover;
}

.about-main .lead {
    margin-top: 1.6rem;
}

.about-facts {
    margin-top: 4.4rem;
    border-bottom: 1px solid var(--border-soft);
}

.about-fact {
    display: grid;
    grid-template-columns: 24rem 1fr;
    align-items: baseline;
    gap: 3rem;
    padding: 2.2rem 0;
    border-top: 1px solid var(--border-soft);
}

.about-fact dt {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

.status-badge {
    display: block;
    width: fit-content;
    margin-top: 1rem;
    padding: .4rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(138, 43, 226, .4);
    background: rgba(138, 43, 226, .18);
    font-size: 1.3rem;
    letter-spacing: .02rem;
    text-transform: none;
    color: var(--color-blue-light);
}

.fact-item {
    display: block;
    font-size: 2rem;
    line-height: 1.7;
    color: var(--color-white-dim);
}

.fact-item strong {
    margin-right: 1rem;
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-white);
}

/* ==========================================================================
   Contato — redes sociais + QR code
   ========================================================================== */

.social-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    align-items: center;
    gap: 10rem;
}

.social-list {
    list-style: none;
    margin-top: 4.8rem;
    border-top: 1px solid var(--border-soft);
}

.social-list li {
    border-bottom: 1px solid var(--border-soft);
}

.social-item {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 1.6rem 0;
    text-decoration: none;
}

.social-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(138, 43, 226, .25), rgba(224, 56, 143, .15));
    color: var(--color-white);
    transition: box-shadow .3s var(--ease);
}

.social-item:hover .social-icon {
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
}

.social-icon svg {
    width: 2.8rem;
    height: 2.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-icon svg.is-fill {
    fill: currentColor;
    stroke: none;
}

.social-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.social-label {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: var(--color-blue-light);
}

.social-text strong {
    font-size: 2.6rem;
    font-weight: 600;
    transition: color .25s var(--ease);
}

.social-item:hover strong {
    color: var(--color-pink);
}

.qr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    padding: 4.8rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .14), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

.qr-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 9rem;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: var(--gradient-brand);
}

/* cantoneiras de "leitor de QR": roxo no alto à esquerda, rosa embaixo à direita */
.qr-frame {
    --corner: 5.6rem;
    --line: 4px;
    --mid: #b532b8; /* meio do gradiente roxo→rosa */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42rem;
    height: 42rem;
    background:
        linear-gradient(var(--color-blue), var(--color-blue)) top left / var(--corner) var(--line),
        linear-gradient(var(--color-blue), var(--color-blue)) top left / var(--line) var(--corner),
        linear-gradient(var(--mid), var(--mid)) top right / var(--corner) var(--line),
        linear-gradient(var(--mid), var(--mid)) top right / var(--line) var(--corner),
        linear-gradient(var(--mid), var(--mid)) bottom left / var(--corner) var(--line),
        linear-gradient(var(--mid), var(--mid)) bottom left / var(--line) var(--corner),
        linear-gradient(var(--color-pink), var(--color-pink)) bottom right / var(--corner) var(--line),
        linear-gradient(var(--color-pink), var(--color-pink)) bottom right / var(--line) var(--corner);
    background-repeat: no-repeat;
}

/* fundo branco garante leitura pela câmera mesmo com PNG transparente */
.qr-img {
    position: absolute;
    top: 2.4rem;
    left: 2.4rem;
    width: calc(100% - 4.8rem);
    height: calc(100% - 4.8rem);
    padding: 2rem;
    border-radius: var(--radius-md);
    background: #fff;
    object-fit: contain;
    z-index: 1;
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    width: calc(100% - 4.8rem);
    height: calc(100% - 4.8rem);
    border: 2px dashed rgba(255, 255, 255, .14);
    border-radius: var(--radius-md);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.qr-placeholder svg {
    width: 8rem;
    height: 8rem;
    margin-bottom: .8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: .6;
}

.qr-placeholder code {
    padding: .4rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .05);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 1.6rem;
    color: var(--color-white);
}

/* ==========================================================================
   Títulos que trocam de acordo com a etapa (data-step)
   ========================================================================== */

.swap-titles {
    display: grid;
    max-width: 130rem;
}

.swap-titles > * {
    grid-area: 1 / 1;
    text-wrap: balance;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.swap-after {
    opacity: 0;
    transform: translateY(2rem);
}

.slide:not([data-step="0"]) .swap-before {
    opacity: 0;
    transform: translateY(-2rem);
}

.slide:not([data-step="0"]) .swap-after {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Régua do tempo (o JS posiciona cada [data-year] e cria as décadas)
   ========================================================================== */

.ruler-wrap {
    margin-top: 12rem;
}

.time-ruler {
    --line: 5.6rem; /* altura da linha a partir da base da régua */
    position: relative;
    height: 20rem;
}

/* a régua é só o "gatilho" do fragmento; quem anima são as partes dela */
.time-ruler.fragment {
    opacity: 1;
    transform: none;
}

.time-ruler::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--line);
    height: 2px;
    margin-bottom: -1px;
    background: rgba(255, 255, 255, .14);
    opacity: 0;
    transition: opacity .6s var(--ease);
}

.time-ruler.is-visible::before {
    opacity: 1;
}

/* trecho em gradiente: cresce da direita (2022) para a esquerda (1943) */
.ruler-span {
    position: absolute;
    bottom: var(--line);
    left: calc(var(--x) * 100%);
    width: calc(var(--w) * 100%);
    height: 4px;
    margin-bottom: -2px;
    border-radius: 4px;
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 1.4s var(--ease) .1s;
}

.time-ruler.is-visible .ruler-span {
    transform: scaleX(1);
}

.ruler-tick {
    position: absolute;
    top: calc(100% - var(--line));
    left: calc(var(--x) * 100%);
    translate: -50% 0;
    padding-top: 2rem;
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--color-white-dim);
    opacity: 0;
    transition: opacity .4s var(--ease);
    transition-delay: calc(var(--k) * 140ms + 150ms);
}

.ruler-tick::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1.2rem;
    background: rgba(255, 255, 255, .3);
}

.time-ruler.is-visible .ruler-tick {
    opacity: 1;
}

.ruler-mark {
    position: absolute;
    bottom: var(--line);
    left: calc(var(--x) * 100%);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 3.6rem;
    text-align: center;
    white-space: nowrap;
}

/* bolinha sobre a linha */
.ruler-mark::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 50%;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    box-shadow: 0 0 0 .8rem rgba(138, 43, 226, .16), var(--shadow-glow);
}

/* marco no começo da régua: o texto cresce para a direita da bolinha */
.ruler-mark.align-start {
    translate: -1.2rem 0;
    align-items: flex-start;
    text-align: left;
}

.ruler-mark.align-start::after {
    left: 1.2rem;
}

.ruler-mark.is-now::after {
    animation: pulse-ring 2s infinite;
}

.ruler-mark:not(.is-now) {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.time-ruler.is-visible .ruler-mark {
    opacity: 1;
    transform: none;
    transition-delay: 1.3s;
}

.ruler-year {
    font-variant-numeric: tabular-nums;
    font-size: 5.6rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ruler-text {
    margin-top: 1rem;
    font-size: 2.2rem;
    font-weight: 600;
}

/* ==========================================================================
   O que é uma rede neural (lista de camadas + diagrama)
   ========================================================================== */

.neural-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    align-items: center;
    gap: 8rem;
}

.neural-main .slide-title {
    font-size: 6.4rem;
}

.neural-main .lead {
    margin-top: 2.4rem;
    font-size: 2.2rem;
}

.layer-list {
    list-style: none;
    margin-top: 3.6rem;
    border-bottom: 1px solid var(--border-soft);
}

.layer-item {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 1.6rem 0;
    border-top: 1px solid var(--border-soft);
}

/* camadas ainda não explicadas ficam "fantasmas" */
.layer-item.fragment {
    opacity: .25;
    transform: none;
}

.layer-item.fragment.is-visible {
    opacity: 1;
}

.layer-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(138, 43, 226, .25), rgba(224, 56, 143, .15));
    font-size: 2rem;
    font-weight: 700;
    transition: box-shadow .4s var(--ease);
}

.layer-item.is-visible .layer-num {
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
}

.layer-item strong {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
}

.layer-item p {
    margin-top: .4rem;
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--color-white-dim);
}

.nn-card {
    padding: 4.8rem 4rem 3.2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .12), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

.nn-diagram {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* dentro do SVG, px = unidades do viewBox */
.nn-edge {
    stroke: rgba(255, 255, 255, .1);
    stroke-width: 1.5;
    transition: stroke-opacity .5s var(--ease);
}

.nn-node {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 2;
    transition: stroke .5s var(--ease);
}

.nn-label {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--color-white-dim);
    transition: fill .5s var(--ease);
}

/* camadas acesas conforme a etapa: 1 = entrada, 2 = ocultas, 3 = saída */
.slide-neural:not([data-step="0"]) .nn-node.is-input,
.slide-neural:is([data-step="2"], [data-step="3"]) .nn-node.is-hidden,
.slide-neural[data-step="3"] .nn-node.is-output {
    fill: url(#nnGrad);
    stroke: transparent;
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, .6));
}

.slide-neural:is([data-step="2"], [data-step="3"]) .nn-edge.to-hidden,
.slide-neural[data-step="3"] .nn-edge.to-output {
    stroke: url(#nnGrad);
    stroke-opacity: .6;
}

.slide-neural:not([data-step="0"]) .nn-label.is-input,
.slide-neural:is([data-step="2"], [data-step="3"]) .nn-label.is-hidden,
.slide-neural[data-step="3"] .nn-label.is-output {
    fill: var(--color-white);
}

/* rede completa: o sinal percorre as conexões da entrada para a saída */
.slide-neural[data-step="3"] .nn-edge {
    stroke-dasharray: 5 9;
    animation: nn-flow 1s linear infinite;
}

/* ==========================================================================
   Pulsos elétricos (cópias dos caminhos com data-pulse, criadas pelo JS)
   in → out → end formam um ciclo: chega nos dendritos, atravessa o axônio,
   acende os terminais. stream = fluxo contínuo enquanto o fio está ligado.
   ========================================================================== */

.flow {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(224, 56, 143, .9));
}

.flow-in,
.flow-out,
.flow-end {
    stroke-dasharray: 8 100;
    stroke-dashoffset: 116;
}

.slide.is-active .flow-in {
    animation: pulse-in 2.6s linear infinite;
}

.slide.is-active .flow-out {
    animation: pulse-out 2.6s linear infinite;
}

.slide.is-active .flow-end {
    animation: pulse-end 2.6s linear infinite;
}

.flow-stream {
    stroke-width: 4;
    stroke-dasharray: 4 22;
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.slide.is-active .flow-stream {
    animation: pulse-stream .55s linear infinite;
}

/* ==========================================================================
   A máquina de McCulloch-Pitts (pessoas + neurônio real → artificial)
   ========================================================================== */

.mcp-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-content: center;
    align-items: center;
    gap: 7rem;
}

.mcp-main .slide-title {
    font-size: 6.4rem;
}

.people {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 3.6rem;
}

.person {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 2.4rem 2.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface);
}

.person-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    font-size: 2.2rem;
    font-weight: 800;
    box-shadow: var(--shadow-glow);
}

.person strong {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
}

.person-role {
    display: block;
    margin-top: .2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-blue-light);
}

.person p {
    margin-top: .8rem;
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--color-white-dim);
}

.paper {
    margin-top: 3.2rem;
    font-size: 1.9rem;
    line-height: 1.5;
}

.paper .highlight-label {
    margin-bottom: .8rem;
    font-size: 1.4rem;
}

/* cards das ilustrações (McCulloch-Pitts, neurônio interativo, debate, perceptron) */
.mcp-card,
.mp-card,
.debate-card,
.pc-card,
.pcs-card,
.learn-card,
.limit-card {
    padding: 3.2rem 3.2rem 2.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .12), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

/* "abas" que mostram qual versão está na tela */
.mcp-tabs {
    display: inline-flex;
    gap: .6rem;
    margin-bottom: 1.6rem;
    padding: .6rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .03);
}

.mcp-tab {
    padding: 1rem 2.2rem;
    border-radius: 999px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-white-dim);
    transition: background .4s var(--ease), color .4s var(--ease);
}

.mcp-tab.fragment {
    opacity: 1;
    transform: none;
}

.slide-mcp[data-step="0"] .mcp-tab.is-bio,
.slide-mcp:not([data-step="0"]) .mcp-tab.is-art {
    background: var(--gradient-brand);
    color: var(--color-white);
}

.mcp-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mcp-svg text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

/* troca real ↔ artificial */
.mcp-bio,
.mcp-art {
    transform-box: view-box;
    transform-origin: center;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.slide-mcp[data-step="0"] .mcp-art {
    opacity: 0;
    transform: scale(.94);
}

.slide-mcp:not([data-step="0"]) .mcp-bio {
    opacity: 0;
    transform: scale(1.06);
}

.mcp-bio [data-pulse] {
    fill: none;
    stroke: rgba(167, 104, 240, .75);
    stroke-width: 6;
    stroke-linecap: round;
}

.mcp-bio [data-pulse="out"] {
    stroke-width: 7;
}

.bio-myelin rect {
    fill: #2a1f45;
    stroke: rgba(167, 104, 240, .9);
    stroke-width: 2;
}

.bio-boutons circle {
    fill: var(--color-pink);
}

.slide.is-active .bio-boutons circle {
    animation: bouton-flash 2.6s infinite;
}

.bio-soma {
    fill: url(#mcpSoma);
    stroke: rgba(167, 104, 240, .9);
    stroke-width: 3;
}

.bio-nucleus {
    fill: rgba(224, 56, 143, .75);
}

/* brilho do corpo quando os sinais chegam */
.soma-flash {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    opacity: 0;
    filter: drop-shadow(0 0 12px var(--color-pink));
}

.slide.is-active .soma-flash {
    animation: soma-flash 2.6s infinite;
}

.art-wire {
    fill: none;
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 3;
}

.mcp-art .flow {
    stroke-width: 5;
}

.art-node {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .45);
    stroke-width: 2;
}

.mcp-svg .art-node-text {
    font-size: 20px;
    font-weight: 700;
    fill: var(--color-white);
}

.art-sub {
    font-size: 13px;
}

.art-soma {
    fill: url(#mcpGrad);
}

.mcp-svg .art-soma-text {
    font-size: 38px;
    font-weight: 700;
    fill: var(--color-white);
}

.art-out {
    fill: var(--surface-2);
    stroke: url(#mcpGrad);
    stroke-width: 3;
}

.mcp-svg .art-out-text {
    font-size: 26px;
    font-weight: 800;
}

.art-out-text.is-zero {
    fill: var(--color-white-dim);
}

.art-out-text.is-one {
    fill: var(--color-white);
    opacity: 0;
}

/* a saída vira 1 no instante em que o pulso chega */
.slide.is-active .art-out-text.is-zero {
    animation: fire-hide 2.6s infinite;
}

.slide.is-active .art-out-text.is-one {
    animation: fire-show 2.6s infinite;
}

.mcp-svg .mcp-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: var(--color-white);
}

.mcp-svg .mcp-sub {
    font-size: 15px;
    fill: var(--color-white-dim);
}

/* ==========================================================================
   Disparar ou não disparar? (neurônio de McCulloch-Pitts interativo)
   O JS liga as classes: .is-on (entrada/fio), .is-firing, .is-blocked,
   .show-threshold (etapa 2+), .show-chart (etapa 4).
   ========================================================================== */

.mp-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-content: center;
    align-items: center;
    gap: 6rem;
}

.mp-main .slide-title {
    font-size: 6.4rem;
}

.mp-svg,
.mp-chart {
    display: block;
    overflow: visible;
}

.mp-svg {
    width: 100%;
    height: auto;
}

.mp-svg text,
.mp-chart text {
    font-family: 'Poppins', sans-serif;
    dominant-baseline: central;
}

/* fios */
.mp-wire-line,
.mp-out-line {
    fill: none;
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 3;
    transition: stroke .4s var(--ease);
}

.mp-wire-end {
    fill: rgba(255, 255, 255, .25);
    transition: fill .4s var(--ease);
}

.mp-wire-bar {
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke .4s var(--ease);
}

.mp-wire.is-on .flow-stream,
.mp-stage.is-firing .mp-output .flow-stream {
    opacity: 1;
}

.mp-wire.is-exc.is-on .mp-wire-line {
    stroke: rgba(61, 220, 132, .45);
}

.mp-wire.is-exc.is-on .mp-wire-end {
    fill: var(--signal-exc);
}

.mp-wire.is-exc .flow-stream {
    stroke: var(--signal-exc);
    filter: drop-shadow(0 0 5px var(--signal-exc));
}

.mp-wire.is-inh.is-on .mp-wire-line {
    stroke: rgba(255, 77, 109, .45);
}

.mp-wire.is-inh.is-on .mp-wire-bar {
    stroke: var(--signal-inh);
    filter: drop-shadow(0 0 6px var(--signal-inh));
}

.mp-wire.is-inh .flow-stream {
    stroke: var(--signal-inh);
    filter: drop-shadow(0 0 5px var(--signal-inh));
}

/* entradas */
.mp-input {
    cursor: pointer;
    outline: none;
}

.mp-chip {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill .3s var(--ease), stroke .3s var(--ease), transform .15s var(--ease);
}

.mp-input:hover .mp-chip,
.mp-input:focus-visible .mp-chip {
    stroke: var(--color-white);
}

.mp-input:active .mp-chip {
    transform: scale(.9);
}

.mp-input.is-exc.is-on .mp-chip {
    fill: rgba(61, 220, 132, .2);
    stroke: var(--signal-exc);
    filter: drop-shadow(0 0 10px rgba(61, 220, 132, .6));
}

.mp-input.is-inh.is-on .mp-chip {
    fill: rgba(255, 77, 109, .2);
    stroke: var(--signal-inh);
    filter: drop-shadow(0 0 10px rgba(255, 77, 109, .6));
}

.mp-svg .mp-value {
    font-size: 28px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--color-white-dim);
    pointer-events: none;
}

.mp-input.is-on .mp-value {
    fill: var(--color-white);
}

.mp-svg .mp-kind {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-anchor: middle;
}

.mp-input.is-exc .mp-kind,
.mp-input.is-exc .mp-badge {
    fill: var(--signal-exc);
}

.mp-input.is-inh .mp-kind,
.mp-input.is-inh .mp-badge {
    fill: var(--signal-inh);
}

.mp-svg .mp-badge-text {
    font-size: 17px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--color-black);
    pointer-events: none;
}

.mp-svg .mp-name {
    font-size: 18px;
    font-weight: 600;
    text-anchor: middle;
    fill: var(--color-white-dim);
}

.mp-sub {
    font-size: 12px;
}

/* limiar */
.mp-ring,
.mp-threshold {
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.mp-stage.show-threshold .mp-ring,
.mp-stage.show-threshold .mp-threshold {
    opacity: 1;
}

.mp-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, .08);
    stroke-width: 8;
}

.mp-ring-fill {
    fill: none;
    stroke: url(#mpGrad);
    stroke-width: 8;
    stroke-dasharray: 0 100;
    transition: stroke-dasharray .7s var(--ease);
}

.mp-threshold line {
    stroke: var(--color-white);
    stroke-width: 3;
    stroke-linecap: round;
}

.mp-svg .mp-threshold text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-anchor: middle;
    fill: var(--color-white);
}

/* corpo do neurônio */
.mp-soma,
.mp-sum,
.mp-burst,
.mp-veto {
    transform-box: fill-box;
    transform-origin: center;
}

.mp-soma-body {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 2;
    transition: fill .4s var(--ease), stroke .4s var(--ease);
}

.mp-svg .mp-sigma {
    font-size: 22px;
    font-weight: 600;
    text-anchor: middle;
    fill: var(--color-white-dim);
}

.mp-svg .mp-sum {
    font-size: 56px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--color-white);
    transition: opacity .3s var(--ease);
}

.mp-stage.is-firing .mp-soma-body {
    fill: url(#mpGrad);
    stroke: transparent;
    filter: drop-shadow(0 0 24px rgba(224, 56, 143, .7));
}

.mp-stage.is-firing .mp-sigma {
    fill: rgba(255, 255, 255, .85);
}

.mp-stage.is-blocked .mp-soma-body {
    fill: rgba(255, 77, 109, .12);
    stroke: var(--signal-inh);
}

.mp-stage.is-blocked .mp-sum {
    opacity: .3;
}

.mp-veto {
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.mp-veto circle,
.mp-veto line {
    fill: none;
    stroke: var(--signal-inh);
    stroke-width: 7;
    stroke-linecap: round;
}

.mp-stage.is-blocked .mp-veto {
    opacity: .9;
    transform: none;
}

.mp-burst {
    fill: none;
    stroke: url(#mpGrad);
    stroke-width: 4;
    opacity: 0;
}

.mp-burst.burst {
    animation: mp-burst .9s var(--ease);
}

.mp-soma.shake {
    animation: mp-shake .5s var(--ease);
}

.mp-sum.pop {
    animation: mp-pop .45s var(--ease);
}

/* "+1" e "veto!" que sobem quando um sinal liga */
.mp-svg .mp-float {
    font-size: 22px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
    animation: mp-float 1.1s var(--ease) forwards;
}

.mp-float.is-exc {
    fill: var(--signal-exc);
}

.mp-float.is-inh {
    fill: var(--signal-inh);
}

/* saída: lâmpada */
.mp-stage.is-firing .mp-out-line {
    stroke: rgba(224, 56, 143, .5);
}

.mp-output .flow-stream {
    filter: drop-shadow(0 0 6px var(--color-pink));
}

.mp-glass {
    fill: rgba(255, 255, 255, .05);
    stroke: rgba(255, 255, 255, .4);
    stroke-width: 2.5;
    transition: fill .4s var(--ease), stroke .4s var(--ease);
}

.mp-filament {
    fill: none;
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 2;
    stroke-linejoin: round;
    transition: stroke .4s var(--ease);
}

.mp-base {
    fill: rgba(255, 255, 255, .3);
}

.mp-halo {
    fill: url(#mpHalo);
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.mp-rays {
    opacity: 0;
    transform-origin: 750px 170px;
    transition: opacity .4s var(--ease);
}

.mp-rays line {
    stroke: #ffe3a3;
    stroke-width: 4;
    stroke-linecap: round;
}

.mp-stage.is-firing .mp-glass {
    fill: #fff1c9;
    stroke: #fff6dd;
    filter: drop-shadow(0 0 18px rgba(255, 214, 140, .9));
}

.mp-stage.is-firing .mp-filament {
    stroke: #ff9f43;
}

.mp-stage.is-firing .mp-halo {
    opacity: 1;
}

.mp-stage.is-firing .mp-rays {
    opacity: 1;
    animation: mp-rays 1.2s ease-in-out infinite;
}

/* saída: interruptor */
.mp-switch-track {
    fill: rgba(255, 255, 255, .08);
    stroke: rgba(255, 255, 255, .25);
    stroke-width: 2;
    transition: fill .4s var(--ease);
}

.mp-switch-knob {
    fill: var(--color-white-dim);
    transition: transform .4s var(--ease), fill .4s var(--ease);
}

.mp-stage.is-firing .mp-switch-track {
    fill: url(#mpGrad);
    stroke: transparent;
}

.mp-stage.is-firing .mp-switch-knob {
    fill: var(--color-white);
    transform: translateX(36px);
}

.mp-svg .mp-switch-label {
    font-size: 18px;
    font-weight: 800;
    fill: rgba(255, 255, 255, .3);
    transition: fill .4s var(--ease);
}

.mp-switch-label.is-off {
    text-anchor: end;
}

.mp-svg .mp-switch-label.is-off,
.mp-stage.is-firing .mp-switch-label.is-on {
    fill: var(--color-white);
}

.mp-stage.is-firing .mp-switch-label.is-off {
    fill: rgba(255, 255, 255, .3);
}

.mp-svg .mp-caption {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-anchor: middle;
    fill: var(--color-white-dim);
}

/* painel: conta + gráfico */
.mp-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    min-height: 15rem;
    margin-top: 1.2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-soft);
}

.mp-readout {
    font-variant-numeric: tabular-nums;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.mp-readout b {
    font-weight: 800;
    color: var(--color-white);
}

.mp-readout .is-ok {
    color: var(--signal-exc);
}

.mp-readout .is-veto {
    color: var(--signal-inh);
}

.mp-stage.is-firing .mp-readout .mp-out {
    color: var(--color-pink);
}

.mp-hint {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.2rem;
    font-size: 1.5rem;
    color: var(--color-white-dim);
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.mp-hint::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--gradient-brand);
}

.mp-chart {
    flex-shrink: 0;
    width: 30rem;
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.mp-stage.show-chart .mp-chart,
.mp-stage.show-chart .mp-hint {
    opacity: 1;
}

.mp-axis {
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1.5;
}

.mp-chart .mp-tick {
    font-size: 12px;
    text-anchor: middle;
    fill: var(--color-white-dim);
}

.mp-chart .mp-tick.is-y {
    text-anchor: end;
}

.mp-chart .mp-chart-label {
    font-size: 13px;
    font-weight: 700;
    fill: var(--color-white);
}

.mp-theta-line {
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

/* o degrau se desenha quando o gráfico aparece */
.mp-step {
    fill: none;
    stroke: url(#mpChartGrad);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.2s var(--ease) .3s;
}

.mp-stage.show-chart .mp-step {
    stroke-dashoffset: 0;
}

.mp-dot {
    fill: var(--color-white);
    filter: drop-shadow(0 0 6px var(--color-pink));
    transition: transform .6s var(--ease), fill .3s var(--ease);
}

.mp-stage.is-blocked .mp-dot {
    fill: var(--signal-inh);
}

/* ==========================================================================
   Isso já era uma rede neural? (debate: balança + caderno)
   Etapas: 1–2 argumentos SIM · 3–4 argumentos NÃO · 5 veredito
   ========================================================================== */

/* registrar --tilt permite animar o ângulo e manter travessão e pratos sincronizados */
@property --tilt {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.debate-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-content: center;
    align-items: center;
    gap: 6rem;
}

.debate-main .slide-title {
    font-size: 6.4rem;
}

.debate-main .layer-item {
    padding: 1.4rem 0;
}

.debate-main .layer-item strong {
    font-size: 2.2rem;
}

.debate-main .layer-item p {
    font-size: 1.8rem;
}

.debate-tag {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.6rem;
    margin-top: .2rem;
    padding: 0 1.2rem;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .12rem;
}

.debate-tag.is-yes {
    color: var(--signal-exc);
    background: rgba(61, 220, 132, .12);
    border: 1px solid rgba(61, 220, 132, .4);
}

.debate-tag.is-no {
    color: var(--signal-inh);
    background: rgba(255, 77, 109, .12);
    border: 1px solid rgba(255, 77, 109, .4);
}

/* veredito com borda em gradiente */
.debate-verdict {
    margin-top: 2.4rem;
    padding: 2rem 2.4rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--gradient-brand) border-box;
    box-shadow: var(--shadow-glow);
}

.debate-verdict .highlight-label {
    font-size: 1.4rem;
}

.debate-verdict p {
    margin-top: .8rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.35;
}

/* balança */
.debate-scale {
    --tilt: 0deg;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transition: --tilt 1s cubic-bezier(.34, 1.4, .64, 1) .35s;
}

.debate-scale text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.slide-debate.is-active[data-step="0"] .debate-scale {
    animation: scale-sway 3s ease-in-out infinite;
}

.slide-debate[data-step="1"] .debate-scale {
    --tilt: -5deg;
}

.slide-debate[data-step="2"] .debate-scale {
    --tilt: -9deg;
}

.slide-debate[data-step="3"] .debate-scale {
    --tilt: -1deg;
}

.slide-debate[data-step="4"] .debate-scale,
.slide-debate[data-step="5"] .debate-scale {
    --tilt: 7deg;
}

.scale-beam {
    transform-origin: 450px 90px;
    transform: rotate(var(--tilt));
}

.scale-pan.is-yes {
    transform-origin: 170px 90px;
    transform: rotate(calc(var(--tilt) * -1));
}

.scale-pan.is-no {
    transform-origin: 730px 90px;
    transform: rotate(calc(var(--tilt) * -1));
}

.scale-base,
.scale-post {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .2);
    stroke-width: 2;
}

.scale-bar {
    fill: url(#dbGrad);
}

.scale-hook {
    fill: var(--color-white);
}

.scale-pan line {
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 2;
}

.scale-bowl {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 2;
}

.debate-scale .scale-label {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .14em;
}

.scale-pan.is-yes .scale-label {
    fill: var(--signal-exc);
}

.scale-pan.is-no .scale-label {
    fill: var(--signal-inh);
}

/* blocos caem no prato com um quique */
.scale-block {
    opacity: 0;
    transform: translateY(-160px);
    transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), opacity .25s var(--ease);
}

.slide-debate:not([data-step="0"]) .b-yes-1,
.slide-debate:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .b-yes-2,
.slide-debate:is([data-step="3"], [data-step="4"], [data-step="5"]) .b-no-1,
.slide-debate:is([data-step="4"], [data-step="5"]) .b-no-2 {
    opacity: 1;
    transform: none;
}

.debate-scale .scale-block text {
    font-size: 15px;
    font-weight: 700;
}

.scale-pan.is-yes .scale-block rect {
    fill: rgba(61, 220, 132, .18);
    stroke: var(--signal-exc);
    stroke-width: 2;
}

.scale-pan.is-yes .scale-block text {
    fill: var(--signal-exc);
}

.scale-pan.is-no .scale-block rect {
    fill: rgba(255, 77, 109, .18);
    stroke: var(--signal-inh);
    stroke-width: 2;
}

.scale-pan.is-no .scale-block text {
    fill: #ff8fa3;
}

.scale-pivot {
    fill: url(#dbGrad);
    filter: drop-shadow(0 0 10px rgba(224, 56, 143, .6));
}

.debate-scale .scale-pivot-text {
    font-size: 24px;
    font-weight: 800;
    fill: var(--color-white);
    transition: opacity .4s var(--ease);
}

.scale-pivot-text.is-answer,
.slide-debate[data-step="5"] .scale-pivot-text.is-question {
    opacity: 0;
}

.slide-debate[data-step="5"] .scale-pivot-text.is-answer {
    opacity: 1;
}

/* caderno: pautado, com margem rosa e letra de mão */
.notebook {
    position: relative;
    margin-top: 1.6rem;
    padding: 2rem 3.2rem 2rem 7.2rem;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background:
        linear-gradient(90deg, transparent 5.2rem, rgba(224, 56, 143, .45) 5.2rem, rgba(224, 56, 143, .45) calc(5.2rem + 2px), transparent calc(5.2rem + 2px)),
        repeating-linear-gradient(180deg, transparent 0 3.9rem, rgba(255, 255, 255, .07) 3.9rem 4rem),
        var(--surface-2);
}

.notebook .highlight-label {
    font-size: 1.4rem;
}

.nb-lines {
    list-style: none;
    margin-top: .6rem;
}

/* cada linha é "escrita" da esquerda para a direita */
.nb-line {
    --n: 0;
    font-family: 'Caveat', cursive;
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
    color: #e9e6f5;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s linear;
}

.nb-line:nth-child(2) {
    --n: 1;
}

.nb-line:nth-child(3) {
    --n: 2;
}

.nb-line:nth-child(4) {
    --n: 3;
}

.slide-debate:is([data-step="3"], [data-step="4"], [data-step="5"]) .nb-line:not(.is-later) {
    clip-path: inset(0 0 0 0);
    transition-delay: calc(var(--n) * .9s + .4s);
}

.slide-debate:is([data-step="4"], [data-step="5"]) .nb-line.is-later {
    clip-path: inset(0 0 0 0);
    transition-delay: .3s;
}

.nb-line.is-later {
    color: var(--color-blue-light);
}

.nb-line sub {
    font-size: .6em;
}

/* a Caveat não tem θ; uma serifada itálica imita melhor a letra de mão */
.nb-theta {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: .9em;
}

.nb-bad {
    color: var(--signal-inh);
}

.nb-good {
    color: var(--signal-exc);
}

/* carimbo que "bate" no papel depois das contas */
.nb-stamp {
    position: absolute;
    right: 3.2rem;
    top: 5.6rem;
    padding: .8rem 1.8rem;
    border: 3px solid var(--color-pink);
    border-radius: var(--radius-sm);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .14rem;
    text-transform: uppercase;
    color: var(--color-pink);
    opacity: 0;
    transform: rotate(-10deg) scale(1.8);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s var(--ease);
}

.slide-debate:is([data-step="3"], [data-step="4"], [data-step="5"]) .nb-stamp {
    opacity: .9;
    transform: rotate(-10deg) scale(1);
    transition-delay: 4s;
}

/* ==========================================================================
   Perceptron: grades de duas colunas (texto + ilustração)
   ========================================================================== */

.pc-grid,
.pcs-grid,
.learn-grid,
.limit-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-content: center;
    align-items: center;
    gap: 6rem;
}

.pc-main .slide-title,
.pcs-main .slide-title,
.learn-main .slide-title,
.limit-main .slide-title {
    font-size: 6.4rem;
}

/* ==========================================================================
   O Perceptron (quem criou + comparação + retina)
   ========================================================================== */

.pc-main .person {
    margin-top: 3rem;
}

.compare {
    margin-top: 3rem;
}

.compare-head,
.compare-row {
    display: grid;
    grid-template-columns: 13rem 1fr 1fr;
    align-items: center;
    gap: 2rem;
}

.compare-head {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .12rem;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

.compare-head span:last-child {
    color: var(--color-pink);
}

.compare-row {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.compare-label {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1rem;
    text-transform: uppercase;
    color: var(--color-blue-light);
}

/* o jeito antigo é riscado; o novo entra logo depois */
.compare-old {
    position: relative;
    width: fit-content;
    font-size: 2rem;
    color: var(--color-white-dim);
}

.compare-old::after {
    content: "";
    position: absolute;
    left: -.3rem;
    right: -.3rem;
    top: 55%;
    height: 2px;
    background: var(--signal-inh);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease) .5s;
}

.compare-row.is-visible .compare-old::after {
    transform: scaleX(1);
}

.compare-new {
    font-size: 2.1rem;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-1.2rem);
    transition: opacity .5s var(--ease) .9s, transform .5s var(--ease) .9s;
}

.compare-new::before {
    content: "✓ ";
    color: var(--signal-exc);
}

.compare-row.is-visible .compare-new {
    opacity: 1;
    transform: none;
}

.retina-wrap {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.retina-wrap .highlight-label {
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
}

.retina {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 3px;
    width: 34rem;
    padding: 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
}

/* cada fotocélula acende com um pequeno atraso por coluna: efeito de "varredura" */
.retina i {
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    transition: background .25s var(--ease), box-shadow .25s var(--ease);
    transition-delay: calc(var(--c) * 18ms);
}

.retina i.is-on {
    background: var(--color-white);
    box-shadow: 0 0 6px rgba(224, 56, 143, .9);
}

.retina-link {
    flex: 1;
    height: 4rem;
    overflow: visible;
}

.retina-link path {
    fill: none;
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 3;
}

.retina-link .flow-stream {
    opacity: 1;
}

.retina-out {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 22rem;
}

.lamp {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .03);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-white-dim);
    transition: color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.lamp-dot {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

.lamp.is-lit {
    border-color: transparent;
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
    color: var(--color-white);
}

.lamp.is-lit .lamp-dot {
    background: var(--color-white);
    box-shadow: 0 0 10px var(--color-white);
}

.retina-note {
    font-size: 1.5rem;
    color: var(--color-white-dim);
}

.retina-caption {
    margin-top: 2.4rem;
    font-size: 1.7rem;
    line-height: 1.55;
    color: var(--color-white-dim);
}

.nyt {
    margin-top: 2rem;
    padding: 1.8rem 2.2rem;
    border-left: 3px solid var(--color-pink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(255, 255, 255, .03);
    font-size: 1.8rem;
    line-height: 1.5;
}

.nyt .highlight-label {
    margin-bottom: .8rem;
    font-size: 1.3rem;
}

/* ==========================================================================
   Estrutura do Perceptron (x → w → Σ → degrau → saída)
   O JS liga: .show-weights (2+), .show-sum (3+), .show-step (4), .is-firing
   ========================================================================== */

.pcs-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.pcs-svg text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.pcs-sub {
    font-size: 12px;
}

.pcs-wire-line,
.pcs-link {
    fill: none;
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 3;
    transition: stroke .4s var(--ease), stroke-width .6s var(--ease);
}

.pcs-wire.is-on .flow-stream,
.pcs-stage.show-sum.has-input .pcs-link .flow-stream,
.pcs-stage.is-firing .pcs-link-out .flow-stream {
    opacity: 1;
}

.pcs-link .flow-stream {
    opacity: 0;
}

.pcs-wire.is-pos .pcs-wire-line {
    stroke: rgba(61, 220, 132, .45);
}

.pcs-wire.is-neg .pcs-wire-line {
    stroke: rgba(255, 77, 109, .45);
}

.pcs-wire.is-pos .flow-stream {
    stroke: var(--signal-exc);
    filter: drop-shadow(0 0 5px var(--signal-exc));
}

.pcs-wire.is-neg .flow-stream {
    stroke: var(--signal-inh);
    filter: drop-shadow(0 0 5px var(--signal-inh));
}

.pcs-weight {
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.pcs-stage.show-weights .pcs-weight {
    opacity: 1;
}

.pcs-weight rect {
    fill: var(--surface);
    stroke-width: 2;
}

.pcs-weight.is-pos rect {
    stroke: var(--signal-exc);
}

.pcs-weight.is-neg rect {
    stroke: var(--signal-inh);
}

.pcs-svg .pcs-weight text {
    font-size: 17px;
    font-weight: 700;
    fill: var(--color-white);
}

.pcs-input {
    cursor: pointer;
    outline: none;
}

.pcs-chip {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill .3s var(--ease), stroke .3s var(--ease), transform .15s var(--ease);
}

.pcs-input:hover .pcs-chip,
.pcs-input:focus-visible .pcs-chip {
    stroke: var(--color-white);
}

.pcs-input:active .pcs-chip {
    transform: scale(.9);
}

.pcs-input.is-on .pcs-chip {
    fill: rgba(167, 104, 240, .25);
    stroke: var(--color-blue-light);
    filter: drop-shadow(0 0 10px rgba(167, 104, 240, .6));
}

.pcs-svg .pcs-value {
    font-size: 26px;
    font-weight: 800;
    fill: var(--color-white-dim);
    pointer-events: none;
}

.pcs-input.is-on .pcs-value {
    fill: var(--color-white);
}

.pcs-svg .pcs-name {
    font-size: 18px;
    font-weight: 600;
    fill: var(--color-white-dim);
}

.pcs-sum-body {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 2;
    transition: fill .4s var(--ease), stroke .4s var(--ease);
}

.pcs-stage.show-sum .pcs-sum-body {
    fill: rgba(138, 43, 226, .35);
    stroke: var(--color-blue-light);
}

.pcs-svg .pcs-sigma {
    font-size: 22px;
    font-weight: 600;
    fill: var(--color-white-dim);
}

.pcs-svg .pcs-sum {
    font-size: 34px;
    font-weight: 800;
    fill: var(--color-white);
    transform-box: fill-box;
    transform-origin: center;
}

.pcs-sum.pop {
    animation: mp-pop .45s var(--ease);
}

.pcs-svg .pcs-caption {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    fill: var(--color-white-dim);
}

.pcs-step {
    opacity: .35;
    transition: opacity .5s var(--ease);
}

.pcs-stage.show-step .pcs-step {
    opacity: 1;
}

.pcs-step-box {
    fill: #0b0b12;
    stroke: rgba(255, 255, 255, .2);
    stroke-width: 2;
}

.pcs-step-axis {
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1.5;
}

.pcs-step-zero {
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.pcs-step-line {
    fill: none;
    stroke: var(--color-pink);
    stroke-width: 3.5;
    stroke-linejoin: round;
}

.pcs-step-dot {
    fill: var(--color-white);
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--color-pink));
    transition: transform .6s var(--ease), opacity .3s var(--ease);
}

.pcs-stage.show-step .pcs-step-dot {
    opacity: 1;
}

.pcs-out-body {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 2;
    transition: fill .4s var(--ease), stroke .4s var(--ease);
}

.pcs-stage.is-firing .pcs-out-body {
    fill: var(--color-pink);
    stroke: transparent;
    filter: drop-shadow(0 0 20px rgba(224, 56, 143, .8));
}

.pcs-svg .pcs-out {
    font-size: 34px;
    font-weight: 800;
    fill: var(--color-white);
}

.pcs-panel {
    min-height: 11rem;
    margin-top: 1.2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-soft);
}

.pcs-readout {
    font-variant-numeric: tabular-nums;
    font-size: 2.3rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.pcs-readout b {
    font-weight: 800;
    color: var(--color-white);
}

.pcs-readout .is-ok {
    color: var(--signal-exc);
}

.pcs-readout .is-veto {
    color: var(--signal-inh);
}

.pcs-stage.show-step .mp-hint {
    opacity: 1;
}

/* ==========================================================================
   Como o Perceptron aprendia (cartão → pesos → resposta)
   ========================================================================== */

.learn-callback {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem;
    padding: .8rem 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(167, 104, 240, .4);
    background: rgba(167, 104, 240, .1);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-blue-light);
}

.learn-stage {
    position: relative;
}

.learn-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
}

.learn-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.learn-col .highlight-label {
    font-size: 1.4rem;
}

.learn-arrow {
    align-self: center;
    margin-top: 3rem;
    font-size: 3rem;
    color: var(--color-white-dim);
}

.learn-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24rem;
    height: 18rem;
    border-radius: var(--radius-md);
    border: 2px dashed rgba(255, 255, 255, .14);
}

/* cartão de papel, como os cartões perfurados da época */
.punch-card {
    display: grid;
    grid-template-columns: repeat(6, 3rem);
    gap: .5rem;
    padding: 1.4rem;
    border-radius: 1rem;
    background: #efe9da;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7);
    opacity: 0;
    transform: translateX(-4rem) rotate(-6deg);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.learn-stage.show-card .punch-card {
    opacity: 1;
    transform: none;
}

.learn-slot.enter .punch-card {
    animation: card-in .5s var(--ease);
}

.punch-card i {
    aspect-ratio: 1;
    border-radius: .4rem;
    background: rgba(0, 0, 0, .08);
}

.punch-card i.is-on {
    background: #16131f;
}

.weight-grid {
    display: grid;
    grid-template-columns: repeat(6, 3.6rem);
    gap: .5rem;
}

.weight-grid i {
    --a: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: .6rem;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .05);
    font-style: normal;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-white-dim);
    transition: background .4s var(--ease);
}

/* rosa = vota "direita", azul = vota "esquerda"; mais forte quanto maior o peso */
.weight-grid i.is-pos {
    background: rgba(224, 56, 143, calc(.2 + var(--a) * .6));
    color: var(--color-white);
}

.weight-grid i.is-neg {
    background: rgba(100, 149, 237, calc(.2 + var(--a) * .6));
    color: var(--color-white);
}

.weight-grid i.flash {
    animation: cell-flash .7s var(--ease);
}

.learn-legend {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.3rem;
    color: var(--color-white-dim);
}

.learn-legend i {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .3rem;
}

.learn-legend i.is-neg {
    background: var(--color-azul, #6495ED);
}

.learn-legend i.is-pos {
    margin-left: .8rem;
    background: var(--color-pink);
}

.learn-answer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    min-width: 20rem;
    padding: 1.8rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .03);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.learn-sum {
    font-variant-numeric: tabular-nums;
    font-size: 1.7rem;
    color: var(--color-white-dim);
}

.learn-guess {
    font-size: 2.4rem;
    font-weight: 800;
}

.learn-verdict {
    min-height: 3.2rem;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
}

.learn-stage.is-right .learn-answer {
    border-color: var(--signal-exc);
    background: rgba(61, 220, 132, .08);
}

.learn-stage.is-right .learn-verdict {
    color: var(--signal-exc);
}

.learn-stage.is-wrong .learn-answer {
    border-color: var(--signal-inh);
    background: rgba(255, 77, 109, .08);
}

.learn-stage.is-wrong .learn-verdict {
    color: var(--signal-inh);
}

.learn-truth {
    font-size: 1.6rem;
    color: var(--color-white-dim);
}

.learn-status {
    min-height: 3.4rem;
    margin-top: 2.4rem;
    font-size: 2.2rem;
    font-weight: 600;
}

.learn-formula {
    margin-top: .8rem;
    font-size: 1.7rem;
    color: var(--color-blue-light);
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.learn-stage.show-formula .learn-formula {
    opacity: 1;
}

.learn-history {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-soft);
}

.learn-history .highlight-label {
    font-size: 1.4rem;
}

.learn-dots {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: .6rem;
}

.learn-dots i {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    animation: dot-in .3s var(--ease);
}

.learn-dots i.is-ok {
    background: var(--signal-exc);
}

.learn-dots i.is-bad {
    background: var(--signal-inh);
}

.learn-badge {
    padding: .6rem 1.8rem;
    border-radius: 999px;
    background: var(--gradient-brand);
    font-size: 1.6rem;
    font-weight: 800;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .4s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.learn-stage.is-done .learn-badge {
    opacity: 1;
    transform: none;
}

/* confete quando ele aprende */
.confetti {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 1rem;
    height: 1.6rem;
    border-radius: .2rem;
    background: var(--c);
    pointer-events: none;
    animation: confetti 1.4s var(--ease) forwards;
}

/* ==========================================================================
   A limitação (E × XOR)
   ========================================================================== */

.limit-stage {
    display: flex;
    align-items: center;
    gap: 3.2rem;
}

.limit-svg {
    display: block;
    flex: 1;
    min-width: 0;
    height: auto;
    overflow: visible;
}

.limit-svg text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.limit-frame {
    fill: #0b0b12;
    stroke: var(--border-soft);
    stroke-width: 2;
}

.limit-svg .limit-tick {
    font-size: 15px;
    fill: var(--color-white-dim);
}

.limit-svg .limit-axis {
    font-size: 20px;
    font-weight: 700;
    fill: var(--color-white);
}

.limit-sub {
    font-size: 13px;
}

/* reta de decisão (posicionada pelo JS) */
.sep {
    opacity: 0;
    transition: transform .8s var(--ease), opacity .4s var(--ease);
}

.sep.no-anim {
    transition: none;
}

.slide-limit:is([data-step="1"], [data-step="2"]) .sep {
    opacity: 1;
}

.sep-pos {
    fill: rgba(224, 56, 143, .14);
}

.sep-neg {
    fill: rgba(100, 149, 237, .14);
}

.sep-line {
    stroke: var(--color-white);
    stroke-width: 3;
}

/* solução com duas retas (etapa 3) */
.band,
.band-line,
.limit-svg .band-label {
    opacity: 0;
    transition: opacity .6s var(--ease);
}

.slide-limit[data-step="3"] .band,
.slide-limit[data-step="3"] .band-line,
.slide-limit[data-step="3"] .limit-svg .band-label {
    opacity: 1;
}

.band {
    fill: rgba(224, 56, 143, .16);
}

.band-line {
    stroke: var(--color-white);
    stroke-width: 3;
    stroke-dasharray: 10 8;
}

.limit-svg .band-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: var(--color-white);
}

/* pontos: rosa = 1, azul = 0 */
.pt-dot {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .4);
    stroke-width: 2;
    transition: fill .5s var(--ease), stroke .5s var(--ease);
}

.limit-svg .pt text {
    font-size: 18px;
    font-weight: 800;
    fill: var(--color-white);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.slide-limit[data-step="1"] .pt[data-and="1"] .pt-dot,
.slide-limit:is([data-step="2"], [data-step="3"]) .pt[data-xor="1"] .pt-dot {
    fill: var(--color-pink);
    stroke: transparent;
}

.slide-limit[data-step="1"] .pt[data-and="0"] .pt-dot,
.slide-limit:is([data-step="2"], [data-step="3"]) .pt[data-xor="0"] .pt-dot {
    fill: #6495ED;
    stroke: transparent;
}

.slide-limit[data-step="1"] .pt .pt-and,
.slide-limit:is([data-step="2"], [data-step="3"]) .pt .pt-xor {
    opacity: 1;
}

.pt-ring {
    fill: none;
    stroke: var(--signal-inh);
    stroke-width: 5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.pt.is-wrong .pt-ring {
    opacity: 1;
    animation: wrong-pulse .9s var(--ease);
}

.limit-side {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 28rem;
    flex-shrink: 0;
}

.limit-side .highlight-label {
    font-size: 1.4rem;
}

.limit-fn {
    font-size: 2.4rem;
    font-weight: 800;
}

.t-xor {
    display: none;
}

.slide-limit:is([data-step="2"], [data-step="3"]) .t-and {
    display: none;
}

.slide-limit:is([data-step="2"], [data-step="3"]) .t-xor {
    display: inline;
}

.truth {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
}

.truth th {
    padding: 0 2rem .8rem 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .08rem;
    color: var(--color-white-dim);
}

.truth td {
    padding: .6rem 2rem .6rem 0;
    color: var(--color-white-dim);
}

.truth .is-1 {
    font-weight: 800;
    color: var(--color-pink);
}

.truth .is-0 {
    font-weight: 800;
    color: #6495ED;
}

.limit-status {
    min-height: 6rem;
    margin-top: .8rem;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.limit-status .is-veto {
    color: var(--signal-inh);
}

.limit-stamp {
    width: fit-content;
    padding: .8rem 1.6rem;
    border: 3px solid var(--signal-inh);
    border-radius: var(--radius-sm);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .1rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--signal-inh);
    opacity: 0;
    transform: rotate(-6deg) scale(1.8);
    transition: opacity .2s var(--ease), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.limit-stage.show-stamp .limit-stamp {
    opacity: .95;
    transform: rotate(-6deg) scale(1);
}

/* ==========================================================================
   Perceptron multicamadas (MLP): rede 2-2-1 resolvendo o XOR
   O JS liga: .show-in (1+), .show-hid (2+), .show-out (3+), .show-sig (4)
   ========================================================================== */

.mlp-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-content: center;
    align-items: center;
    gap: 5rem;
}

.mlp-main .slide-title {
    font-size: 5.8rem;
    white-space: nowrap;
}

.mlp-main .layer-list {
    margin-top: 2.4rem;
}

.mlp-main .layer-item {
    padding: 1.2rem 0;
}

.mlp-main .layer-item em {
    font-style: normal;
    font-weight: 500;
    color: var(--color-white-dim);
}

.mlp-main .layer-item p {
    margin-top: .2rem;
}

/* subtítulos dos dois blocos da lista */
.layer-group {
    padding: 1.6rem 0 .8rem;
    border-top: 1px solid var(--border-soft);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-blue-light);
}

.layer-group + .layer-item {
    border-top: none;
}

/* quem criou: três avatares sobrepostos */
.mlp-authors {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    margin-top: 2.4rem;
    padding: 1.8rem 2.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface);
}

.mlp-avatars {
    display: flex;
    flex-shrink: 0;
}

.mlp-avatars .person-avatar {
    width: 5.2rem;
    height: 5.2rem;
    font-size: 1.7rem;
    border: 3px solid var(--surface);
    box-shadow: none;
}

.mlp-avatars .person-avatar + .person-avatar {
    margin-left: -1.4rem;
}

.mlp-authors strong {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
}

.mlp-authors p {
    margin-top: .2rem;
    font-size: 1.7rem;
    line-height: 1.45;
    color: var(--color-white-dim);
}

.mlp-card {
    padding: 3.2rem 3.2rem 2.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .12), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

.mlp-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mlp-svg text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.mlp-sub {
    font-size: 12px;
}

.mlp-svg .mlp-caption,
.bp-svg .mlp-caption {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    fill: var(--color-white-dim);
    transition: fill .4s var(--ease);
}

.mlp-stage.show-in .mlp-col-in,
.mlp-stage.show-hid .mlp-col-hid,
.mlp-stage.show-out .mlp-col-out {
    fill: var(--color-blue-light);
}

/* fios: apagados até a camada de destino ser explicada */
.mlp-wire-line {
    fill: none;
    stroke: rgba(255, 255, 255, .12);
    stroke-width: 3;
    transition: stroke .4s var(--ease);
}

.mlp-stage.show-hid .mlp-wire-in.is-pos .mlp-wire-line,
.mlp-stage.show-out .mlp-wire-out.is-pos .mlp-wire-line {
    stroke: rgba(61, 220, 132, .45);
}

.mlp-stage.show-hid .mlp-wire-in.is-neg .mlp-wire-line {
    stroke: rgba(255, 77, 109, .45);
}

.mlp-wire.is-on .flow-stream {
    opacity: 1;
}

.mlp-wire.is-pos .flow-stream {
    stroke: var(--signal-exc);
    filter: drop-shadow(0 0 5px var(--signal-exc));
}

.mlp-wire.is-neg .flow-stream {
    stroke: var(--signal-inh);
    filter: drop-shadow(0 0 5px var(--signal-inh));
}

/* neurônios: "fantasmas" até a sua camada entrar */
.mlp-node {
    opacity: .3;
    transition: opacity .5s var(--ease);
}

.mlp-stage.show-in .mlp-in,
.mlp-stage.show-hid .mlp-hid,
.mlp-stage.show-out .mlp-out {
    opacity: 1;
}

.mlp-body {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 2;
    transition: fill .3s var(--ease), stroke .3s var(--ease), filter .3s var(--ease);
}

.mlp-in.is-on .mlp-body,
.mlp-hid.is-on .mlp-body {
    fill: rgba(167, 104, 240, .25);
    stroke: var(--color-blue-light);
    filter: drop-shadow(0 0 10px rgba(167, 104, 240, .6));
}

.mlp-out.is-on .mlp-body {
    fill: var(--color-pink);
    stroke: transparent;
    filter: drop-shadow(0 0 18px rgba(224, 56, 143, .8));
}

.mlp-svg .mlp-val {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    fill: var(--color-white);
}

.mlp-stage.show-sig .mlp-hid .mlp-val,
.mlp-stage.show-sig .mlp-out .mlp-val {
    font-size: 21px;
}

.mlp-svg .mlp-name,
.bp-svg .mlp-name {
    font-size: 18px;
    font-weight: 600;
    fill: var(--color-white-dim);
}

/* mini gráfico dentro do neurônio: degrau → sigmóide */
.mlp-act {
    fill: none;
    stroke: var(--color-white-dim);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .5s var(--ease);
}

.mlp-act-sig,
.mlp-stage.show-sig .mlp-act-step {
    opacity: 0;
}

.mlp-stage.show-sig .mlp-act-sig {
    opacity: 1;
}

/* plano do XOR */
.mlp-view {
    transition: opacity .6s var(--ease);
}

.mlp-chart,
.mlp-stage.show-sig .mlp-plane {
    opacity: 0;
}

.mlp-stage.show-sig .mlp-chart {
    opacity: 1;
}

.mlp-svg .mlp-tick {
    font-size: 15px;
    fill: var(--color-white-dim);
}

.mlp-line {
    stroke: var(--color-white);
    stroke-width: 3;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s var(--ease);
}

.mlp-stage.show-hid .mlp-line {
    stroke-dashoffset: 0;
}

.mlp-line-tag {
    opacity: 0;
    transition: opacity .4s var(--ease) .6s;
}

.mlp-stage.show-hid .mlp-line-tag {
    opacity: 1;
}

.mlp-line-tag rect {
    fill: var(--surface);
    stroke: var(--color-white);
    stroke-width: 2;
}

.mlp-svg .mlp-line-tag text {
    font-size: 16px;
    font-weight: 700;
    fill: var(--color-white);
}

.mlp-band {
    fill: rgba(224, 56, 143, .18);
    opacity: 0;
    transition: opacity .6s var(--ease);
}

.mlp-stage.show-out .mlp-band {
    opacity: 1;
}

/* pontos: rosa = 1, azul = 0 (como no slide do XOR) */
.mlp-pt-dot {
    stroke: transparent;
}

.mlp-pt[data-xor="1"] .mlp-pt-dot {
    fill: var(--color-pink);
}

.mlp-pt[data-xor="0"] .mlp-pt-dot {
    fill: var(--color-azul);
}

.mlp-svg .mlp-pt text {
    font-size: 18px;
    font-weight: 800;
    fill: var(--color-white);
}

/* a combinação que está passando pela rede agora */
.mlp-pt-ring {
    fill: none;
    stroke: var(--color-white);
    stroke-width: 3;
    opacity: 0;
    transition: opacity .25s var(--ease);
}

.mlp-pt.is-current .mlp-pt-ring {
    opacity: 1;
}

.mlp-stage.show-out .mlp-pt.is-current .mlp-pt-ring {
    stroke: var(--signal-exc);
    filter: drop-shadow(0 0 6px var(--signal-exc));
}

/* gráfico da função de ativação */
.mlp-chart-step {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 3;
    stroke-dasharray: 7 6;
    stroke-linejoin: round;
}

.mlp-chart-sig,
.mlp-legend-sig {
    fill: none;
    stroke: var(--color-pink);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(224, 56, 143, .6));
}

.mlp-chart-sig {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.4s var(--ease) .3s;
}

.mlp-stage.show-sig .mlp-chart-sig {
    stroke-dashoffset: 0;
}

.mlp-chart-dot {
    fill: var(--color-white);
    filter: drop-shadow(0 0 6px var(--color-pink));
    transition: transform .6s var(--ease);
}

.mlp-svg .mlp-legend text {
    font-size: 14px;
    font-weight: 600;
    text-anchor: start;
    fill: var(--color-white-dim);
}

/* textos abaixo do desenho */
.mlp-panel {
    min-height: 10.4rem;
    margin-top: 1.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--border-soft);
}

.mlp-readout {
    font-variant-numeric: tabular-nums;
    font-size: 2.3rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.mlp-readout b {
    font-weight: 800;
    color: var(--color-white);
}

.mlp-readout .is-ok {
    color: var(--signal-exc);
}

.mlp-note {
    margin-top: .6rem;
    font-size: 1.8rem;
    color: var(--color-blue-light);
}

/* ==========================================================================
   Backpropagation: ida (forward) e volta do erro (backward)
   O JS liga: .show-in/.show-hid/.show-out/.show-err (valores à vista),
   .is-fwd (pulsos indo), .is-back (pulsos voltando), .show-hist (etapa 3)
   ========================================================================== */

.bp-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-content: center;
    align-items: center;
    gap: 5rem;
}

.bp-main .slide-title {
    font-size: 5.8rem;
    white-space: nowrap;
}

.bp-what {
    margin-top: 2.4rem;
    padding: 1.8rem 2.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface);
}

.bp-what .highlight-label {
    font-size: 1.4rem;
    color: var(--color-blue-light);
}

.bp-what p {
    margin-top: .8rem;
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--color-white-dim);
}

.bp-what b {
    color: var(--color-white);
}

.bp-main .layer-list {
    margin-top: 2.4rem;
}

.bp-main .layer-item {
    padding: 1.2rem 0;
}

.bp-main .layer-item em {
    font-style: normal;
    font-weight: 500;
    color: var(--color-white-dim);
}

.bp-main .layer-item p {
    margin-top: .2rem;
}

/* linha do tempo: onde começou */
.bp-timeline {
    list-style: none;
    margin-top: .8rem;
}

.bp-timeline li {
    display: flex;
    gap: 1.4rem;
    padding: .3rem 0;
    font-size: 1.7rem;
    line-height: 1.45;
    color: var(--color-white-dim);
}

.bp-timeline b {
    flex-shrink: 0;
    width: 5.2rem;
    font-weight: 800;
    color: var(--color-blue-light);
}

.bp-timeline .is-key {
    color: var(--color-white);
}

.bp-timeline .is-key b {
    color: var(--color-pink);
}

.bp-card {
    padding: 3.2rem 3.2rem 2.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .12), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

.bp-row {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.bp-svg {
    display: block;
    flex: 1;
    min-width: 0;
    height: auto;
    overflow: visible;
}

.bp-svg text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

/* fios: verdes/vermelhos pelo sinal do peso; na volta, a espessura = culpa */
.bp-wire-line {
    fill: none;
    stroke-width: 3;
    transition: stroke .4s var(--ease), stroke-width .5s var(--ease);
}

.bp-wire.is-pos .bp-wire-line {
    stroke: rgba(61, 220, 132, .4);
}

.bp-wire.is-neg .bp-wire-line {
    stroke: rgba(255, 77, 109, .4);
}

.bp-stage.is-fwd .flow-stream {
    opacity: 1;
    stroke: var(--color-white);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8));
}

.bp-stage.is-back .flow-stream {
    opacity: 1;
    stroke: var(--color-pink);
    filter: drop-shadow(0 0 6px var(--color-pink));
    animation-direction: reverse;
}

.bp-stage.is-back .bp-wire-line {
    stroke: rgba(224, 56, 143, .35);
}

/* pesos */
.bp-pill rect {
    fill: var(--surface);
    stroke-width: 2;
    transition: stroke .3s var(--ease), fill .3s var(--ease);
}

.bp-pill.is-pos rect {
    stroke: var(--signal-exc);
}

.bp-pill.is-neg rect {
    stroke: var(--signal-inh);
}

.bp-svg .bp-pill text {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    fill: var(--color-white);
}

.bp-pill-in {
    transform-box: fill-box;
    transform-origin: center;
}

.bp-pill-in.bump {
    animation: bp-bump .6s var(--ease);
}

.bp-pill-in.bump rect {
    animation: bp-flash .9s var(--ease);
}

/* neurônios */
.bp-body {
    fill: var(--surface-2);
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 2;
    transition: fill .3s var(--ease), stroke .3s var(--ease), filter .3s var(--ease);
}

.bp-stage.show-in .bp-in .bp-body,
.bp-stage.show-hid .bp-hid .bp-body,
.bp-stage.show-out .bp-out .bp-body {
    fill: rgba(167, 104, 240, .25);
    stroke: var(--color-blue-light);
    filter: drop-shadow(0 0 10px rgba(167, 104, 240, .6));
}

.bp-stage.is-back .bp-hid .bp-body,
.bp-stage.is-back .bp-out .bp-body {
    stroke: var(--color-pink);
    filter: drop-shadow(0 0 12px rgba(224, 56, 143, .7));
}

.bp-svg .bp-val {
    font-size: 21px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    fill: var(--color-white);
}

.bp-in .bp-val {
    font-size: 26px;
}

.bp-svg .bp-dir {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.bp-dir-fwd {
    fill: var(--color-white);
}

.bp-dir-back {
    fill: var(--color-pink);
}

.bp-stage.is-fwd .bp-dir-fwd,
.bp-stage.is-back .bp-dir-back {
    opacity: 1;
}

/* painel lateral: esperado, erro, histórico */
.bp-side {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 24rem;
    flex-shrink: 0;
}

.bp-box {
    padding: 1.4rem 1.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
}

.bp-box .highlight-label {
    font-size: 1.3rem;
}

.bp-box strong {
    display: block;
    margin-top: .4rem;
    font-size: 3.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bp-target {
    color: var(--signal-exc);
}

.bp-error {
    color: var(--signal-inh);
    transition: color .4s var(--ease);
}

.bp-error-box.is-low .bp-error {
    color: var(--signal-exc);
}

.bp-bar {
    height: .8rem;
    margin-top: .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.bp-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--signal-inh);
    transition: width .5s var(--ease), background .4s var(--ease);
}

.bp-error-box.is-low .bp-bar i {
    background: var(--signal-exc);
}

.bp-hist {
    opacity: .3;
    transition: opacity .4s var(--ease);
}

.bp-stage.show-hist .bp-hist {
    opacity: 1;
}

.bp-spark {
    display: block;
    width: 100%;
    height: 7rem;
    margin-top: .8rem;
    overflow: visible;
}

.bp-spark-base {
    stroke: rgba(255, 255, 255, .15);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bp-spark-line {
    fill: none;
    stroke: var(--color-pink);
    stroke-width: 3;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@keyframes bp-flash {
    0%,
    40% {
        fill: rgba(224, 56, 143, .45);
    }

    100% {
        fill: var(--surface);
    }
}

@keyframes bp-bump {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   O segundo inverno da IA: hardware (CPU × GPU) e falta de dados
   O JS liga: .show-hw (1+), .show-data (2+)
   ========================================================================== */

.slide-w2 {
    background: radial-gradient(ellipse 60% 55% at 75% 50%, rgba(100, 149, 237, .1), transparent 70%);
}

.slide-w2 .snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .35;
}

.slide-w2 .kicker {
    color: #9db7f5;
}

.w2-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-content: center;
    align-items: center;
    gap: 5rem;
}

.w2-main .slide-title {
    font-size: 6.4rem;
}

.w2-lead {
    margin-top: 2.4rem;
    font-size: 2.2rem;
    line-height: 1.5;
    color: var(--color-white-dim);
}

.w2-lead b {
    color: var(--color-white);
}

.w2-main .layer-list {
    margin-top: 3.2rem;
}

.slide-w2 .layer-item.is-visible .layer-num {
    background: linear-gradient(135deg, #6495ED, #a768f0);
    box-shadow: 0 20px 60px -25px rgba(100, 149, 237, .7);
}

.w2-card {
    padding: 2.8rem 3.2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(157, 183, 245, .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(100, 149, 237, .14), transparent 45%),
        var(--surface);
    box-shadow: 0 20px 60px -25px rgba(100, 149, 237, .5);
}

.w2-panel {
    opacity: .25;
    transition: opacity .6s var(--ease);
}

.w2-panel + .w2-panel {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--border-soft);
}

.w2-stage.show-hw .w2-hw,
.w2-stage.show-data .w2-data {
    opacity: 1;
}

.w2-panel .highlight-label {
    font-size: 1.4rem;
    color: #9db7f5;
}

.w2-panel .highlight-label::before {
    background: linear-gradient(135deg, #6495ED, #e3ecff);
}

/* ---------- hardware ---------- */
.w2-hw-row {
    display: grid;
    grid-template-columns: 15rem 1fr 19rem;
    align-items: center;
    gap: 2.4rem;
    margin-top: 1.8rem;
}

.w2-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.2rem;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, .14);
    background: #0b0b12;
    text-align: center;
}

.w2-chip strong {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 800;
}

.w2-chip > span {
    font-size: 1.4rem;
    color: var(--color-white-dim);
}

.w2-cores {
    display: grid;
    gap: .5rem;
}

.w2-cpu-cores {
    grid-template-columns: repeat(2, 3.4rem);
}

.w2-cpu-cores i {
    height: 3.4rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .08);
    transition: background .12s, box-shadow .12s;
}

.w2-cpu-cores i.is-busy {
    background: #6495ED;
    box-shadow: 0 0 12px rgba(100, 149, 237, .9);
}

.w2-gpu-cores {
    grid-template-columns: repeat(12, .9rem);
    gap: .3rem;
}

.w2-gpu-cores i {
    height: .9rem;
    border-radius: .2rem;
    background: rgba(255, 255, 255, .1);
}

.w2-gpu {
    border-style: dashed;
}

.w2-gpu > :not(.w2-lock) {
    opacity: .45;
}

.w2-lock {
    position: absolute;
    top: 34%;
    left: 50%;
    padding: .5rem 1rem;
    border: 2px solid #9db7f5;
    border-radius: var(--radius-sm);
    background: rgba(5, 5, 7, .85);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .06rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #9db7f5;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-6deg) scale(1.6);
    transition: opacity .2s var(--ease), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.w2-stage.show-hw .w2-lock {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-6deg) scale(1);
    transition-delay: 1.2s;
}

.w2-work-label {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

/* fila de contas esperando a CPU */
.w2-queue {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.w2-queue i {
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(157, 183, 245, .45);
    transition: opacity .15s, transform .15s;
}

.w2-queue i.is-done {
    opacity: .08;
    transform: scale(.6);
}

.w2-progress {
    height: .8rem;
    margin-top: 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.w2-progress i {
    display: block;
    width: 0;
    min-width: .4rem;
    height: 100%;
    border-radius: inherit;
    background: #6495ED;
}

.w2-count {
    margin-top: .8rem;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-white-dim);
}

.w2-count b {
    color: var(--color-white);
}

.w2-pct {
    color: var(--signal-inh);
    font-weight: 700;
}

/* ---------- dados ---------- */
.w2-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3.2rem;
    margin-top: 1.8rem;
}

.w2-sources {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.w2-sources li {
    position: relative;
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.2rem;
    align-items: center;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(157, 183, 245, .3);
    background: #0b0b12;
    opacity: .4;
    transform: scale(.94);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.w2-stage.show-data .w2-sources li {
    opacity: 1;
    transform: none;
}

.w2-stage.show-data .w2-sources li:nth-child(2) { transition-delay: .15s; }
.w2-stage.show-data .w2-sources li:nth-child(3) { transition-delay: .3s; }
.w2-stage.show-data .w2-sources li:nth-child(4) { transition-delay: .45s; }

.w2-sources svg {
    grid-row: span 2;
    width: 3.6rem;
    height: 3.6rem;
    fill: none;
    stroke: #9db7f5;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .6;
}

.w2-sources strong {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white-dim);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 77, 109, .7);
}

/* o ano em que essa fonte passou a existir */
.w2-year {
    font-size: 1.3rem;
    font-weight: 600;
    color: #9db7f5;
}

.w2-sources-cap {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--signal-inh);
}

.w2-bars {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.w2-bar-label {
    font-size: 1.6rem;
    color: var(--color-white-dim);
}

.w2-bar-label b {
    margin-right: .6rem;
    color: var(--color-white);
}

.w2-bar-track {
    height: 1.4rem;
    margin: .6rem 0 .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.w2-bar-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 1.6s var(--ease) .6s;
}

.w2-bar-old .w2-bar-track i {
    min-width: .4rem;
    background: var(--signal-inh);
}

.w2-bar-new .w2-bar-track i {
    background: linear-gradient(90deg, #6495ED, #e3ecff);
}

/* 9.298 ÷ 14 milhões ≈ 0,07%: a barra antiga é só um risquinho */
.w2-stage.show-data .w2-bar-new .w2-bar-track i {
    width: 100%;
}

.w2-bar-value {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-white-dim);
}

.w2-bar-old .w2-bar-value {
    color: var(--signal-inh);
    font-weight: 700;
}

.w2-big {
    color: var(--color-white);
}

/* ==========================================================================
   CNN: imagem → convolução → ativação (ReLU) → pooling
   O JS liga: .show-cmp (só etapa 1), .show-conv (2+), .show-relu (3+), .show-pool (4)
   Células: rosa = positivo, azul = negativo, escuro = 0
   ========================================================================== */

.cnn-grid-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-content: center;
    align-items: center;
    gap: 5rem;
}

.cnn-main .slide-title {
    font-size: 5.8rem;
    white-space: nowrap;
}

.cnn-callback {
    margin-top: 1rem;
    font-size: 1.6rem !important;
    font-weight: 600;
    color: var(--color-blue-light) !important;
}

.cnn-main .layer-list {
    margin-top: 2.4rem;
}

.cnn-main .layer-item {
    padding: 1.1rem 0;
}

.cnn-main .layer-item p {
    margin-top: .2rem;
    font-size: 1.8rem;
}

.cnn-card {
    padding: 3.2rem 3.2rem 2.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .12), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

.cnn-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30rem;
}

.cnn-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: opacity .5s var(--ease);
}

.cnn-label {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-white-dim);
    transition: color .4s var(--ease);
}

.cnn-dim {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.cnn-grid {
    --c: 2.6rem;
    --g: .3rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), var(--c));
    gap: var(--g);
}

.cnn-img {
    --n: 8;
    --c: 2.4rem;
}

.cnn-conv,
.cnn-relu {
    --n: 6;
}

.cnn-pool {
    --n: 3;
    --c: 3.6rem;
}

.cnn-grid > b {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--c);
    border-radius: .4rem;
    background: rgba(255, 255, 255, .05);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: transparent;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.cnn-pool > b {
    font-size: 1.6rem;
}

/* pixels da imagem */
.cnn-img > b.is-ink {
    background: var(--color-white);
}

/* valores: a cor vem de --v (0 a 1) */
.cnn-grid > b.is-pos {
    background: rgba(224, 56, 143, calc(.2 + var(--v) * .8));
    color: var(--color-white);
}

.cnn-grid > b.is-neg {
    background: rgba(100, 149, 237, calc(.2 + var(--v) * .8));
    color: var(--color-white);
}

.cnn-grid > b.is-zero {
    background: rgba(255, 255, 255, .07);
    color: var(--color-white-dim);
}

.cnn-grid > b.is-current {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px var(--color-white);
}

/* ReLU: os negativos "apagam" */
.cnn-relu > b.is-killed {
    animation: cnn-kill .6s var(--ease);
}

/* janela que desliza (filtro na imagem, bloco 2×2 no pooling) */
.cnn-win {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--c) * 3 + var(--g) * 2);
    height: calc(var(--c) * 3 + var(--g) * 2);
    border: 3px solid var(--color-pink);
    border-radius: .6rem;
    background: rgba(224, 56, 143, .18);
    box-shadow: 0 0 14px rgba(224, 56, 143, .7);
    opacity: 0;
    pointer-events: none;
    transform: translate(calc(var(--x, 0) * (var(--c) + var(--g)) - 3px), calc(var(--y, 0) * (var(--c) + var(--g)) - 3px));
    transition: transform .12s linear, opacity .3s var(--ease);
}

.cnn-win-pool {
    width: calc(var(--c) * 2 + var(--g));
    height: calc(var(--c) * 2 + var(--g));
    border-color: #6495ED;
    background: rgba(100, 149, 237, .15);
    box-shadow: 0 0 14px rgba(100, 149, 237, .7);
    transition: transform .25s var(--ease), opacity .3s var(--ease);
}

.cnn-win.is-on {
    opacity: 1;
}

/* operações entre as grades */
.cnn-op {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    transition: opacity .5s var(--ease);
}

.cnn-op-name {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: var(--color-blue-light);
}

.cnn-arrow {
    font-size: 2.4rem;
    color: var(--color-white-dim);
}

.cnn-filter {
    display: grid;
    grid-template-columns: repeat(3, 2.2rem);
    gap: .2rem;
}

.cnn-filter b {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2rem;
    border-radius: .3rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-white);
}

.cnn-filter b.is-pos {
    background: rgba(224, 56, 143, .7);
}

.cnn-filter b.is-neg {
    background: rgba(100, 149, 237, .7);
}

.cnn-filter b.is-zero {
    background: rgba(255, 255, 255, .1);
}

/* etapas: o que ainda não foi explicado fica apagado */
.cnn-col-conv,
.cnn-col-relu,
.cnn-col-pool,
.cnn-op {
    opacity: .2;
}

.cnn-stage.show-conv :is(.cnn-op-conv, .cnn-col-conv),
.cnn-stage.show-relu :is(.cnn-op-relu, .cnn-col-relu),
.cnn-stage.show-pool :is(.cnn-op-pool, .cnn-col-pool) {
    opacity: 1;
}

.cnn-stage.show-conv .cnn-col-conv .cnn-label,
.cnn-stage.show-relu .cnn-col-relu .cnn-label,
.cnn-stage.show-pool .cnn-col-pool .cnn-label {
    color: var(--color-blue-light);
}

/* MLP × CNN */
.cnn-compare {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 23rem;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    padding-left: 2.4rem;
    background: var(--surface);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease);
}

.cnn-stage.show-cmp .cnn-compare {
    opacity: 1;
}

.cnn-cmp {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.8rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
}

.cnn-cmp .highlight-label {
    font-size: 1.4rem;
}

.cnn-cmp p {
    font-size: 1.6rem;
    line-height: 1.45;
    color: var(--color-white-dim);
}

.cnn-cmp b {
    color: var(--color-white);
}

.cnn-cmp-art {
    display: block;
    width: 100%;
    height: 12rem;
}

.cnn-cmp-mlp line {
    stroke: rgba(255, 77, 109, .45);
    stroke-width: 1.2;
}

.cnn-cmp-mlp rect {
    fill: var(--color-white-dim);
}

.cnn-cmp-mlp circle {
    fill: var(--surface-2);
    stroke: var(--color-blue-light);
    stroke-width: 2.5;
}

.cnn-cmp-cnn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

.cnn-mini {
    position: relative;
    width: 10rem;
    height: 10rem;
    border-radius: .6rem;
    background:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 2rem 2rem,
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 2rem 2rem,
        #14141f;
}

.cnn-mini-win {
    position: absolute;
    top: 0;
    left: 0;
    width: 6rem;
    height: 6rem;
    border: 3px solid var(--color-pink);
    border-radius: .4rem;
    background: rgba(224, 56, 143, .18);
    box-shadow: 0 0 12px rgba(224, 56, 143, .6);
}

.slide.is-active .cnn-stage.show-cmp .cnn-mini-win {
    animation: cnn-slide 3.2s steps(1) infinite;
}

.cnn-mini-out {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .4rem;
    background: var(--color-pink);
    box-shadow: 0 0 14px rgba(224, 56, 143, .7);
}

@keyframes cnn-slide {
    0% { transform: translate(0, 0); }
    11% { transform: translate(2rem, 0); }
    22% { transform: translate(4rem, 0); }
    33% { transform: translate(0, 2rem); }
    44% { transform: translate(2rem, 2rem); }
    55% { transform: translate(4rem, 2rem); }
    66% { transform: translate(0, 4rem); }
    77% { transform: translate(2rem, 4rem); }
    88% { transform: translate(4rem, 4rem); }
}

@keyframes cnn-kill {
    0% {
        transform: scale(1);
        background: rgba(100, 149, 237, .9);
    }

    40% {
        transform: scale(.6);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   RNN: tudo de uma vez × uma palavra por vez, usos e memória curta
   O JS liga: .view-read (0–1), .view-uses (2), .view-mem (3), .is-playing (1)
   ========================================================================== */

.rnn-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-content: center;
    align-items: center;
    gap: 5rem;
}

.rnn-main .slide-title {
    font-size: 5.8rem;
    white-space: nowrap;
}

.rnn-main .layer-list {
    margin-top: 2.4rem;
}

.rnn-main .layer-item {
    padding: 1.2rem 0;
}

.rnn-main .layer-item p {
    margin-top: .2rem;
    font-size: 1.8rem;
}

.rnn-uses-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .8rem;
}

.rnn-uses-chips span {
    padding: .4rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(167, 104, 240, .4);
    background: rgba(167, 104, 240, .1);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-blue-light);
}

.rnn-card {
    padding: 3.2rem 3.2rem 2.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at 100% 0%, rgba(224, 56, 143, .12), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-glow);
}

/* as três vistas ocupam o mesmo lugar e trocam com um fade */
.rnn-views {
    display: grid;
    min-height: 32rem;
}

.rnn-view {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility 0s .5s;
}

.rnn-stage.view-read .rnn-v-read,
.rnn-stage.view-uses .rnn-v-uses,
.rnn-stage.view-mem .rnn-v-mem {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s var(--ease) .2s, visibility 0s;
}

/* ---------- vista 1 ---------- */
.rnn-lane {
    padding: 1.6rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
}

.rnn-lane + .rnn-lane {
    margin-top: 1.6rem;
}

.rnn-lane .highlight-label {
    font-size: 1.4rem;
}

.rnn-lane-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.2rem;
}

.rnn-tokens {
    display: flex;
    gap: .6rem;
}

.rnn-tokens span,
.rnn-sentence span {
    padding: .5rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-white-dim);
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

.rnn-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 8.4rem;
    height: 5.6rem;
    padding: 0 1.6rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-blue-light);
    background: rgba(167, 104, 240, .15);
    font-size: 1.7rem;
    font-weight: 800;
}

/* MLP/CNN: as 5 palavras entram juntas na rede */
.slide.is-active .rnn-stage.is-playing .rnn-lane-mlp .rnn-tokens span {
    animation: rnn-all 3.2s var(--ease) infinite;
}

.slide.is-active .rnn-stage.is-playing .rnn-lane-mlp .rnn-box {
    animation: rnn-gulp 3.2s var(--ease) infinite;
}

/* RNN: a palavra que está sendo lida e as já lidas */
.rnn-tokens span.is-reading,
.rnn-sentence span.is-reading {
    background: var(--color-pink);
    border-color: transparent;
    color: var(--color-white);
}

.rnn-tokens span.is-read {
    opacity: .35;
}

.rnn-cell {
    margin-top: 1.6rem;
}

.rnn-loop {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 5rem;
    margin-bottom: -.2rem;
    transform: translateX(-50%);
    overflow: visible;
}

.rnn-loop path {
    fill: none;
    stroke: var(--color-pink);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rnn-cell.is-pulse {
    animation: rnn-pulse .45s var(--ease);
}

/* a memória: cada palavra vira uma faixa que vai apagando */
.rnn-mem {
    display: flex;
    gap: .3rem;
    padding: .6rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(224, 56, 143, .5);
}

.rnn-mem i {
    width: 2.4rem;
    height: 4rem;
    border-radius: .4rem;
    background: var(--color-pink);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.rnn-lane-cap {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: var(--color-white-dim);
}

/* ---------- vista 2 ---------- */
.rnn-v-uses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.rnn-use {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.rnn-stage.view-uses .rnn-use {
    opacity: 1;
    transform: none;
}

.rnn-stage.view-uses .rnn-use:nth-child(2) { transition-delay: .35s; }
.rnn-stage.view-uses .rnn-use:nth-child(3) { transition-delay: .6s; }

.rnn-use > svg:first-child {
    width: 4rem;
    height: 4rem;
    fill: none;
    stroke: var(--color-blue-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rnn-use strong {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.rnn-use p {
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--color-white-dim);
}

.rnn-use-art {
    display: flex;
    align-items: center;
    height: 6rem;
    margin-top: auto;
}

.rnn-type {
    gap: .6rem;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.rnn-type b {
    color: var(--color-pink);
    border-right: 2px solid var(--color-pink);
    padding-right: .2rem;
}

.slide.is-active .rnn-stage.view-uses .rnn-type b {
    animation: rnn-guess 2.4s steps(1) infinite;
}

.rnn-series {
    width: 100%;
    overflow: visible;
}

.rnn-series path {
    fill: none;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.rnn-series-past {
    stroke: var(--color-white-dim);
}

.rnn-series-next {
    stroke: var(--color-pink);
    stroke-dasharray: 6 6;
}

.slide.is-active .rnn-stage.view-uses .rnn-series-next {
    animation: rnn-dash 1s linear infinite;
}

.rnn-series circle {
    fill: var(--color-pink);
}

.rnn-wave {
    gap: .4rem;
}

.rnn-wave i {
    flex: 1;
    height: 20%;
    border-radius: 999px;
    background: var(--color-blue-light);
}

.slide.is-active .rnn-stage.view-uses .rnn-wave i {
    animation: rnn-wave 1s var(--ease) infinite alternate;
}

.rnn-wave i:nth-child(3n) { animation-delay: -.3s !important; }
.rnn-wave i:nth-child(3n + 1) { animation-delay: -.6s !important; }
.rnn-wave i:nth-child(4n) { animation-delay: -.8s !important; }

/* ---------- vista 3 ---------- */
.rnn-sentence {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.rnn-sentence span.is-key {
    border-color: var(--color-pink);
    color: var(--color-white);
}

.rnn-sentence span.is-blank {
    min-width: 9rem;
    text-align: center;
    border-style: dashed;
}

.rnn-sentence span.is-fail {
    border-color: var(--signal-inh);
    background: rgba(255, 77, 109, .15);
    color: var(--signal-inh);
}

.rnn-sentence span.is-ok {
    border-color: var(--signal-exc);
    background: rgba(61, 220, 132, .15);
    color: var(--signal-exc);
}

.rnn-mem-row {
    margin-top: 2.4rem;
}

.rnn-mem-row .highlight-label,
.rnn-recall span {
    font-size: 1.4rem;
}

.rnn-mem-long {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: .4rem;
    height: 4.4rem;
    margin-top: 1rem;
}

/* o quanto cada palavra ainda está na memória vem de --a (0 a 1) */
.rnn-mem-long i {
    position: relative;
    border-radius: .4rem;
    background: rgba(167, 104, 240, var(--a, 0));
    transition: background .4s var(--ease);
}

.rnn-mem-long i.is-key {
    background: rgba(224, 56, 143, var(--a, 0));
    box-shadow: inset 0 0 0 1px rgba(224, 56, 143, .5);
}

.rnn-mem-long i.is-key::after {
    content: "Brasil";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: .4rem;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    color: var(--color-pink);
}

.rnn-recall {
    display: grid;
    grid-template-columns: auto 1fr 7rem;
    align-items: center;
    gap: 1.6rem;
    margin-top: 3.6rem;
    color: var(--color-white-dim);
}

.rnn-recall b {
    color: var(--color-pink);
}

.rnn-recall .w2-progress {
    margin-top: 0;
}

.rnn-recall-bar i {
    background: var(--color-pink);
    transition: width .35s var(--ease);
}

.rnn-recall-pct {
    font-size: 2.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@keyframes rnn-all {
    0%,
    20% {
        opacity: 1;
        transform: none;
    }

    50% {
        opacity: 0;
        transform: translateX(14rem) scale(.4);
    }

    80% {
        opacity: 0;
        transform: none;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rnn-gulp {
    0%,
    45% {
        transform: none;
    }

    55% {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(167, 104, 240, .8);
    }

    70%,
    100% {
        transform: none;
    }
}

@keyframes rnn-pulse {
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(224, 56, 143, .7);
    }
}

@keyframes rnn-guess {
    0% { opacity: 0; }
    30% { opacity: 1; }
}

@keyframes rnn-dash {
    to { stroke-dashoffset: -12; }
}

@keyframes rnn-wave {
    from { height: 15%; }
    to { height: 95%; }
}

.mlp-readout .is-veto {
    color: var(--signal-inh);
}

/* ==========================================================================
   LSTM e GRU: portões por palavra + curva da lembrança de "Brasil"
   O JS liga: .is-gru (etapa 2) e .is-on em cada portão aberto
   ========================================================================== */

.lg-full {
    margin-left: .6rem;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    color: var(--color-white-dim);
}

.lg-who {
    display: block;
    margin-top: .2rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-blue-light);
}

.lg-stage .rnn-sentence span {
    padding: .4rem .9rem;
    font-size: 1.5rem;
}

.lg-cell {
    position: relative;
    margin-top: 2rem;
    padding: 2rem 2.4rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-blue-light);
    background: rgba(167, 104, 240, .08);
}

.lg-model {
    position: absolute;
    top: -1.4rem;
    left: 2rem;
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: .2rem 1.2rem;
    border-radius: 999px;
    background: var(--surface);
    font-size: 1.4rem;
    color: var(--color-white-dim);
}

.lg-model b {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-white);
}

.lg-belt {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.6rem;
}

.lg-belt-label {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

/* a "esteira": listras andando */
.lg-belt-track {
    position: relative;
    display: flex;
    align-items: center;
    height: 4.4rem;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1.2rem, transparent 1.2rem 2.4rem), #0b0b12;
    background-size: 2.4rem 100%;
}

.slide.is-active .lg-belt-track {
    animation: lg-belt 1s linear infinite;
}

.lg-item {
    padding: .4rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--color-pink);
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-2rem);
    transition: opacity .4s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.lg-item.is-stored {
    opacity: 1;
    transform: none;
}

.lg-gates {
    display: grid;
    gap: 1.2rem;
    margin-top: 1.6rem;
}

.lg-gates-lstm {
    grid-template-columns: repeat(3, 1fr);
}

.lg-gates-gru {
    display: none;
    grid-template-columns: repeat(2, 1fr);
}

.lg-stage.is-gru .lg-gates-lstm {
    display: none;
}

.lg-stage.is-gru .lg-gates-gru {
    display: grid;
}

.lg-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, .12);
    background: #0b0b12;
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.lg-gate b {
    font-size: 1.5rem;
    font-weight: 700;
}

.lg-gate span {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.lg-gate.is-on {
    border-color: var(--signal-exc);
    background: rgba(61, 220, 132, .12);
    box-shadow: 0 0 14px rgba(61, 220, 132, .35);
}

.lg-gate.is-on span {
    color: var(--signal-exc);
}

.lg-chart {
    position: relative;
    margin-top: 2rem;
}

.lg-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lg-chart .highlight-label {
    font-size: 1.4rem;
}

.lg-legend {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.lg-legend i {
    width: 1.8rem;
    height: .4rem;
    margin-left: 1rem;
    border-radius: 999px;
}

.lg-legend .is-rnn,
.lg-line-rnn {
    background: rgba(255, 255, 255, .45);
    stroke: rgba(255, 255, 255, .45);
}

.lg-legend .is-lstm,
.lg-line-lstm {
    background: var(--color-pink);
    stroke: var(--color-pink);
}

.lg-legend .is-gru,
.lg-line-gru {
    background: var(--color-azul);
    stroke: var(--color-azul);
}

.lg-chart svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: .8rem;
    overflow: visible;
}

.lg-chart text {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    text-anchor: end;
    dominant-baseline: central;
    fill: var(--color-white-dim);
}

.lg-axis {
    stroke: rgba(255, 255, 255, .25);
}

.lg-grid {
    stroke: rgba(255, 255, 255, .1);
    stroke-dasharray: 4 4;
}

.lg-line {
    fill: none;
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lg-line-rnn {
    stroke-dasharray: 6 6;
}

.lg-note {
    position: absolute;
    right: 0;
    bottom: -1.6rem;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--color-white-dim);
}

.lg-stage .mlp-panel {
    min-height: 0;
    margin-top: 2.4rem;
}

@keyframes lg-belt {
    to {
        background-position: 2.4rem 0;
    }
}

/* ==========================================================================
   Vistas que trocam por etapa (Deep Learning, Transformer)
   O JS põe data-view no .vstage; a .view com o mesmo data-v aparece.
   ========================================================================== */

.views {
    display: grid;
    min-height: 31rem;
}

.view {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility 0s .5s;
}

.vstage[data-view="0"] .view[data-v="0"],
.vstage[data-view="1"] .view[data-v="1"],
.vstage[data-view="2"] .view[data-v="2"],
.vstage[data-view="3"] .view[data-v="3"],
.vstage[data-view="4"] .view[data-v="4"] {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s var(--ease) .2s, visibility 0s;
}

/* ==========================================================================
   A revolução do Deep Learning
   ========================================================================== */

.rnn-main .slide-title.dl-title {
    font-size: 5.8rem;
    white-space: normal;
}

.dl-status {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.dl-pill {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 77, 109, .4);
    background: rgba(255, 77, 109, .08);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white-dim);
    transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}

.dl-pill i::before {
    content: "✗";
    font-style: normal;
    color: var(--signal-inh);
}

.dl-pill.is-done {
    border-color: rgba(61, 220, 132, .5);
    background: rgba(61, 220, 132, .1);
    color: var(--color-white);
}

.dl-pill.is-done i::before {
    content: "✓";
    color: var(--signal-exc);
}

.dl-pill.is-done.pop {
    animation: mp-pop .45s var(--ease);
}

/* 0 · rede profunda */
.dl-deep {
    display: block;
    width: 100%;
    height: auto;
}

.dl-deep line {
    stroke: rgba(167, 104, 240, .22);
    stroke-width: 1;
}

.dl-deep circle {
    fill: var(--surface-2);
    stroke: var(--color-blue-light);
    stroke-width: 2;
}

.dl-deep text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-anchor: middle;
    fill: var(--color-white-dim);
}

.dl-caption {
    margin-top: 1.2rem;
    text-align: center;
    font-size: 1.9rem;
    color: var(--color-white-dim);
}

.dl-caption b {
    color: var(--color-pink);
}

/* 1 · ReLU */
.dl-relu {
    display: grid;
    grid-template-columns: 17rem 1fr;
    align-items: center;
    gap: 3.2rem;
}

.dl-fn svg {
    display: block;
    width: 100%;
    height: auto;
}

.dl-fn path {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dl-fn-sig {
    stroke: rgba(255, 255, 255, .45);
    stroke-dasharray: 6 6;
}

.dl-fn-relu {
    stroke: var(--color-pink);
}

.dl-fn .lg-legend {
    justify-content: center;
    margin-top: .8rem;
}

.dl-chain-title {
    display: block;
    margin-bottom: 1.2rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

.dl-row {
    display: grid;
    grid-template-columns: 9rem 1fr 10rem;
    align-items: end;
    gap: 1.6rem;
}

.dl-row + .dl-row {
    margin-top: 1.6rem;
}

.dl-row b {
    align-self: center;
    font-size: 1.6rem;
}

.dl-bars {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    height: 6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.dl-bars i {
    flex: 1;
    height: 0;
    min-height: 2px;
    border-radius: .3rem .3rem 0 0;
    transition: height .35s var(--ease);
}

.dl-row-sig .dl-bars i {
    background: rgba(255, 255, 255, .5);
}

.dl-row-relu .dl-bars i {
    background: var(--color-pink);
}

.dl-end {
    align-self: center;
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.dl-row-sig .dl-end {
    color: var(--signal-inh);
}

.dl-row-relu .dl-end {
    color: var(--signal-exc);
}

.dl-chain-axis {
    display: flex;
    justify-content: space-between;
    margin: .6rem 11.6rem 0 10.6rem;
    font-size: 1.3rem;
    color: var(--color-white-dim);
}

/* 2 · AlexNet + GPU */
.dl-alex {
    display: grid;
    grid-template-columns: 1fr 22rem;
    align-items: center;
    gap: 4rem;
}

.dl-chart {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 2.4rem;
}

.dl-chart .dl-chain-title {
    grid-column: 1 / -1;
}

.dl-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

.dl-col b {
    min-height: 4rem;
    font-size: 1.5rem;
    line-height: 1.3;
    text-align: center;
    color: var(--color-white-dim);
}

.dl-col-bar {
    position: relative;
    width: 100%;
    height: 0;
    border-radius: .6rem .6rem 0 0;
    background: rgba(255, 255, 255, .25);
    transition: height .9s var(--ease);
}

.vstage[data-view="2"] .dl-col-bar {
    height: calc(var(--h) / 30 * 18rem);
}

.dl-col:nth-child(3) .dl-col-bar { transition-delay: .2s; }
.dl-col:nth-child(4) .dl-col-bar { transition-delay: .9s; }

.dl-col-bar span {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: .4rem;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
}

.dl-col.is-alex .dl-col-bar {
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
}

.dl-col.is-alex b {
    color: var(--color-white);
}

.dl-gpu .w2-gpu-cores i {
    background: rgba(61, 220, 132, .7);
}

.dl-gpu {
    border-color: rgba(61, 220, 132, .5);
}

.w2-lock.dl-unlock {
    top: 30%;
    border-color: var(--signal-exc);
    color: var(--signal-exc);
}

.vstage[data-view="2"] .dl-unlock {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-6deg) scale(1);
    transition-delay: 1.6s;
}

/* 3 · Big Data */
.dl-timeline {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}

.dl-timeline li {
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--color-white-dim);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.dl-timeline b {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-blue-light);
}

.vstage[data-view="3"] .dl-timeline li {
    opacity: 1;
    transform: none;
}

.dl-timeline li:nth-child(2) { transition-delay: .25s !important; }
.dl-timeline li:nth-child(3) { transition-delay: .5s !important; }
.dl-timeline li:nth-child(4) { transition-delay: .75s !important; }
.dl-timeline li:nth-child(5) { transition-delay: 1s !important; }

.dl-flood {
    display: grid;
    grid-template-columns: repeat(40, 1fr);
    gap: .4rem;
    margin-top: 2.4rem;
}

.dl-flood i {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-pink);
    opacity: 0;
    transform: scale(.3);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.dl-flood i.is-on {
    opacity: var(--a);
    transform: none;
}

/* ==========================================================================
   O Transformer
   ========================================================================== */

/* 0 · GPT */
.tf-letters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.tf-letters > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2.4rem 1.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    opacity: .55;
}

.tf-letters b {
    font-size: 9rem;
    font-weight: 800;
    line-height: 1;
}

.tf-letters span {
    font-size: 2rem;
    font-weight: 700;
}

.tf-letters em {
    font-size: 1.5rem;
    font-style: normal;
    color: var(--color-white-dim);
}

.tf-letters .is-t {
    opacity: 1;
    border-color: var(--color-pink);
    box-shadow: var(--shadow-glow);
}

.tf-letters .is-t b {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 1 · tabela */
.tf-table {
    display: grid;
    grid-template-columns: 12rem 1fr 1fr;
    gap: 1.2rem 1.6rem;
    align-items: center;
}

.tf-table > b {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    color: var(--color-white-dim);
}

.tf-table > b.is-t {
    color: var(--color-pink);
}

.tf-table > span {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-white-dim);
}

.tf-table em {
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius-sm);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}

.tf-table .is-bad {
    border: 1px solid rgba(255, 77, 109, .3);
    background: rgba(255, 77, 109, .07);
    color: var(--color-white-dim);
}

.tf-table .is-bad::before {
    content: "✗ ";
    color: var(--signal-inh);
}

.tf-table .is-good {
    border: 1px solid rgba(61, 220, 132, .4);
    background: rgba(61, 220, 132, .08);
    color: var(--color-white);
}

.tf-table .is-good::before {
    content: "✓ ";
    color: var(--signal-exc);
}

/* 2 · self-attention */
.tf-attn {
    position: relative;
    padding-top: 17rem;
}

.tf-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tf-arcs path {
    fill: none;
    stroke: var(--color-pink);
    stroke-linecap: round;
    transition: stroke-width .5s var(--ease), opacity .5s var(--ease);
}

.tf-arcs text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--color-white);
}

.tf-words,
.tf-toks {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.tf-words {
    justify-content: center;
}

.tf-words span,
.tf-toks span {
    padding: .6rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .12);
    background: var(--surface-2);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--color-white-dim);
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .3s var(--ease);
}

.tf-words span.is-focus {
    background: var(--color-pink);
    border-color: transparent;
    color: var(--color-white);
}

.tf-words span.is-top {
    border-color: var(--color-pink);
    color: var(--color-white);
}

/* 3 · paralelo */
.tf-lane-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-top: 1.2rem;
}

.tf-toks span {
    font-size: 1.5rem;
    padding: .5rem 1rem;
}

.tf-toks span.is-done {
    background: var(--color-blue-light);
    border-color: transparent;
    color: var(--color-white);
}

.tf-lane-tf .tf-toks span.is-done {
    background: var(--color-pink);
}

.tf-steps {
    flex-shrink: 0;
    font-size: 2.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tf-lane-rnn .tf-steps {
    color: var(--signal-inh);
}

.tf-lane-tf .tf-steps {
    color: var(--signal-exc);
}

/* 4 · encoder-decoder */
.tf-ed {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.4rem;
}

.tf-block {
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-blue-light);
    background: rgba(167, 104, 240, .08);
}

.tf-dec {
    border-color: var(--color-pink);
    background: rgba(224, 56, 143, .08);
}

.tf-block .highlight-label {
    font-size: 1.5rem;
    color: var(--color-white);
}

.tf-block p {
    margin: .4rem 0 1.4rem;
    font-size: 1.5rem;
    color: var(--color-white-dim);
}

.tf-dec .tf-toks span {
    opacity: 0;
}

.tf-dec .tf-toks span.is-done {
    opacity: 1;
    background: var(--color-pink);
}

.tf-enc .tf-toks span.is-done {
    opacity: 1;
}

.tf-enc .tf-toks span.is-look {
    box-shadow: 0 0 0 2px var(--color-pink);
    color: var(--color-white);
}

.tf-meaning {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.tf-meaning i {
    width: 3.6rem;
    height: .8rem;
    border-radius: 999px;
    background: var(--gradient-brand);
    opacity: .3;
    transition: opacity .3s var(--ease);
}

.tf-meaning.is-on i {
    opacity: 1;
}

.tf-meaning span {
    margin-top: .6rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-white-dim);
}

/* ==========================================================================
   Embeddings: vetores, mapa de significados, analogia e uso no GPT
   O JS liga: data-view, .show-map (2+), .show-analogy (3)
   ========================================================================== */

/* a etapa 0 mostra só a 1ª palavra; a etapa 1, as três */
.vstage.emb-stage[data-view="0"] .view[data-v="1"] {
    opacity: 1;
    visibility: visible;
}

.emb-stage[data-view="0"] .emb-vec:not(:first-child) {
    opacity: 0;
}

.emb-stage[data-view="3"] .view[data-v="2"] {
    opacity: 1;
    visibility: visible;
}

.emb-vecs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.emb-vec {
    display: grid;
    grid-template-columns: 14rem auto 1fr;
    align-items: center;
    gap: 2rem;
    transition: opacity .5s var(--ease);
}

.emb-word {
    justify-self: end;
    padding: .8rem 1.8rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 2.2rem;
    font-weight: 700;
}

.emb-vec[data-word="carro"] .emb-word {
    border-color: rgba(100, 149, 237, .5);
}

.emb-bars {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .6rem;
}

/* cada número: barra para cima (positivo) ou para baixo (negativo) */
.emb-bars > b {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.4rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-white);
    overflow: hidden;
}

.emb-bars > b::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    height: calc(var(--v) * 50%);
    background: var(--color-pink);
    opacity: .75;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform .5s var(--ease) var(--d, 0s);
}

.emb-bars > b.is-neg::before {
    top: 50%;
    bottom: auto;
    background: var(--color-azul);
    transform-origin: top;
}

.emb-bars > b span {
    position: relative;
}

.emb-vec.is-on .emb-bars > b::before {
    transform: scaleY(1);
}

/* mapa */
.emb-map {
    display: block;
    width: 100%;
    height: auto;
}

.emb-map text {
    font-family: 'Poppins', sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.emb-group ellipse {
    fill: rgba(167, 104, 240, .07);
    stroke: rgba(167, 104, 240, .35);
    stroke-dasharray: 5 5;
}

.emb-group text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    fill: var(--color-blue-light);
}

.emb-group,
.emb-pts g {
    opacity: 0;
    transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34, 1.4, .64, 1);
}

.emb-pts g {
    transform: translate(var(--fx), var(--fy));
}

.emb-stage.show-map .emb-group,
.emb-stage.show-map .emb-pts g {
    opacity: 1;
    transform: none;
}

.emb-pts circle {
    fill: var(--color-blue-light);
}

.emb-pts text {
    font-size: 15px;
    font-weight: 700;
    fill: var(--color-white);
}

.emb-pts g.is-focus circle {
    fill: var(--color-pink);
    filter: drop-shadow(0 0 6px var(--color-pink));
}

.emb-near line {
    stroke-width: 2.5;
    stroke-dasharray: 6 5;
}

.emb-near .is-near {
    stroke: var(--signal-exc);
    fill: var(--signal-exc);
}

.emb-near .is-far {
    stroke: var(--signal-inh);
    fill: var(--signal-inh);
}

.emb-near text {
    font-size: 13px;
    font-weight: 800;
    stroke: none;
}

.emb-near {
    opacity: 0;
    transition: opacity .5s var(--ease) 1s;
}

.emb-stage[data-view="2"] .emb-near {
    opacity: 1;
}

/* analogia: a mesma seta de homem → rei, aplicada em mulher */
.emb-arrow {
    stroke-width: 3.5;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
}

.emb-arrow-a {
    stroke: var(--color-blue-light);
}

.emb-arrow-b {
    stroke: var(--color-pink);
}

#embArrow path {
    fill: context-stroke;
}

.emb-stage.show-analogy .emb-arrow {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s var(--ease), opacity .2s;
}

.emb-stage.show-analogy .emb-arrow-a {
    transition-delay: .3s;
}

.emb-stage.show-analogy .emb-arrow-b {
    transition-delay: 1.8s;
}

.emb-stage.show-analogy .emb-pts g:not(.is-analogy) {
    opacity: .3;
}

.emb-pts g.is-target circle {
    fill: var(--color-pink);
}

.emb-stage.show-analogy .emb-pts g.is-target {
    animation: emb-land .6s var(--ease) 2.8s both;
}

/* no ChatGPT */
.emb-pipe {
    display: grid;
    grid-template-columns: 1fr auto 22rem;
    align-items: center;
    gap: 2.4rem;
}

.emb-tokens {
    display: flex;
    justify-content: space-around;
    gap: 1.2rem;
}

.emb-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.emb-token span {
    padding: .5rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 1.7rem;
    font-weight: 700;
}

.emb-token i {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.emb-token i b {
    width: 4.4rem;
    height: 1.2rem;
    border-radius: .3rem;
    background: var(--color-pink);
    opacity: var(--a);
}

.emb-token em {
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 800;
    color: var(--color-white-dim);
}

.emb-tf p {
    margin-bottom: 0 !important;
}

@keyframes emb-land {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   Onde os embeddings estão hoje: busca, RAG, recomendação
   O JS liga: data-view e .is-on nas partes que vão acendendo
   ========================================================================== */

/* 0 · resumo */
.use-intro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.use-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 3.2rem 1.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
}

.use-icon svg {
    width: 7rem;
    height: 7rem;
    fill: none;
    stroke: var(--color-blue-light);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.use-icon b {
    font-size: 2rem;
}

/* 1 · busca */
.use-query {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 2rem;
    border-radius: 999px;
    border: 2px solid var(--color-blue-light);
    background: #0b0b12;
    font-size: 2rem;
    font-weight: 600;
}

.use-query svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: var(--color-blue-light);
    stroke-width: 2.4;
    stroke-linecap: round;
}

.use-caret {
    width: 2px;
    height: 2.4rem;
    background: var(--color-pink);
    animation: rnn-guess 1s steps(1) infinite;
}

.use-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-top: 2rem;
}

.use-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.use-col.is-on {
    opacity: 1;
    transform: none;
}

.use-col .highlight-label {
    font-size: 1.4rem;
}

.use-res {
    padding: 1.2rem 1.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    background: #0b0b12;
}

.use-res b {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.35;
}

.use-res span {
    font-size: 1.4rem;
    font-weight: 700;
}

.use-col.is-bad .use-res {
    border-color: rgba(255, 77, 109, .35);
}

.use-col.is-bad .use-res b {
    color: var(--color-white-dim);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 77, 109, .6);
}

.use-col.is-bad .use-res span {
    color: var(--signal-inh);
}

.use-col.is-good .use-res {
    border-color: rgba(61, 220, 132, .45);
}

.use-col.is-good .use-res span {
    color: var(--signal-exc);
}

/* 2 · RAG */
.use-rag {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1.2fr auto 1fr;
    align-items: stretch;
    gap: 1rem;
}

.use-rag .cnn-arrow {
    align-self: center;
    opacity: .3;
    transition: opacity .3s var(--ease);
}

.use-rag .cnn-arrow.is-on {
    opacity: 1;
    color: var(--color-pink);
}

.rag-step {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    opacity: .3;
    transition: opacity .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.rag-step.is-on {
    opacity: 1;
    border-color: var(--color-blue-light);
    box-shadow: 0 0 20px -6px rgba(167, 104, 240, .6);
}

.rag-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    font-size: 1.4rem;
    font-weight: 800;
}

.rag-step b {
    font-size: 1.7rem;
}

.rag-step p {
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-white-dim);
}

.rag-vec {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .4rem;
}

.rag-vec i {
    height: 1rem;
    border-radius: .3rem;
    background: var(--color-pink);
}

.rag-vec i:nth-child(2n) { width: 70%; opacity: .7; }
.rag-vec i:nth-child(3n) { width: 45%; opacity: .5; }

.rag-dots {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .5rem;
    margin-top: .4rem;
}

.rag-dots i {
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(167, 104, 240, .35);
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}

.rag-dots i.is-hit {
    background: var(--signal-exc);
    box-shadow: 0 0 8px var(--signal-exc);
}

.rag-hit {
    color: var(--signal-exc) !important;
    font-weight: 700;
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.rag-db.is-found .rag-hit {
    opacity: 1;
}

.rag-answer {
    color: var(--color-white) !important;
    font-weight: 600;
}

/* 3 · recomendação */
.use-genres text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    fill: var(--color-blue-light);
}

.use-songs circle {
    fill: rgba(255, 255, 255, .28);
    transition: fill .4s var(--ease), r .4s var(--ease);
}

.use-songs circle.is-heard {
    fill: var(--color-blue-light);
}

.use-songs circle.is-sugg {
    fill: var(--signal-exc);
    filter: drop-shadow(0 0 6px var(--signal-exc));
}

.use-you {
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.use-you.is-on {
    opacity: 1;
}

.use-you-dot {
    fill: var(--color-pink);
    filter: drop-shadow(0 0 8px var(--color-pink));
}

.use-you-ring {
    fill: rgba(61, 220, 132, .06);
    stroke: var(--signal-exc);
    stroke-width: 2;
    stroke-dasharray: 6 5;
    transform: scale(0);
    transition: transform .6s cubic-bezier(.34, 1.4, .64, 1);
}

.use-you.is-search .use-you-ring {
    transform: scale(1);
}

.use-you text {
    font-size: 15px;
    font-weight: 800;
    fill: var(--color-pink);
}

.use-legend {
    display: flex;
    justify-content: center;
    gap: 2.4rem;
    margin-top: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.use-legend span {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.use-legend i {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
}

.use-legend i.is-heard {
    background: var(--color-blue-light);
}

.use-legend i.is-sugg {
    background: var(--signal-exc);
}

/* ==========================================================================
   O que é um LLM: sigla, caixas aninhadas, próxima palavra, escala, treino
   ========================================================================== */

.llm-letters em {
    color: var(--color-blue-light);
}

/* 1 · um dentro do outro */
.llm-nest {
    position: relative;
    padding: 4.4rem 2.4rem 2.4rem;
    border-radius: var(--radius-md);
    border: 2px solid;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.llm-n1 {
    border-color: rgba(100, 149, 237, .6);
    background: rgba(100, 149, 237, .06);
}

.llm-n2 {
    border-color: rgba(167, 104, 240, .7);
    background: rgba(167, 104, 240, .08);
}

.llm-n3 {
    border-color: var(--color-pink);
    background: rgba(224, 56, 143, .1);
    box-shadow: var(--shadow-glow);
}

.vstage[data-view="1"] .llm-nest {
    opacity: 1;
    transform: none;
}

.vstage[data-view="1"] .llm-n2 { transition-delay: .7s; }
.vstage[data-view="1"] .llm-n3 { transition-delay: 1.4s; }

.llm-nest-name {
    position: absolute;
    top: 1.2rem;
    left: 2.4rem;
    font-size: 1.8rem;
    font-weight: 800;
}

.llm-nest-name em {
    margin-left: .6rem;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-white-dim);
}

.llm-chat {
    display: inline-flex;
    flex-direction: column;
    padding: 1.2rem 2rem;
    border-radius: var(--radius-sm);
    background: var(--gradient-brand);
    font-size: 2rem;
    font-weight: 800;
    opacity: 0;
    transition: opacity .5s var(--ease) 2.2s;
}

.llm-chat small {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: .85;
}

.vstage[data-view="1"] .llm-chat {
    opacity: 1;
}

/* 2 · próxima palavra */
.llm-ctx {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
    padding: 1.6rem 2.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    font-size: 3.2rem;
    font-weight: 700;
}

.llm-ctx-text b {
    color: var(--color-pink);
}

.llm-ctx-blank {
    color: var(--color-white-dim);
    animation: rnn-guess 1s steps(1) infinite;
}

.llm-cands {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.llm-cand {
    display: grid;
    grid-template-columns: 12rem 1fr 6rem;
    align-items: center;
    gap: 1.6rem;
    font-size: 1.9rem;
    font-weight: 700;
}

.llm-cand i {
    display: block;
    height: 2.4rem;
    width: 0;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .2);
    transition: width .5s var(--ease), background .3s var(--ease);
}

.llm-cand span:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-white-dim);
}

.llm-cand.is-pick {
    color: var(--color-pink);
}

.llm-cand.is-pick i {
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
}

/* 3 · escala */
.llm-rows {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.llm-row {
    display: grid;
    grid-template-columns: 22rem 1fr;
    align-items: center;
    gap: 1.6rem;
}

.llm-row-name b {
    display: block;
    font-size: 1.8rem;
}

.llm-row-name span {
    font-size: 1.4rem;
    color: var(--color-white-dim);
}

.llm-track {
    position: relative;
    height: 3rem;
    border-radius: .6rem;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px calc(100% / 12)),
        rgba(255, 255, 255, .03);
}

.llm-track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: .6rem;
    background: rgba(167, 104, 240, .6);
    transition: width 1.2s var(--ease) var(--d, 0s);
}

.llm-row.is-big .llm-track i {
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
}

.llm-track em {
    position: absolute;
    top: 50%;
    left: calc(var(--w) + 1.2rem);
    transform: translateY(-50%);
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .4s var(--ease) calc(var(--d, 0s) + 1s);
}

.llm-row.is-big .llm-track em {
    left: auto;
    right: 1.2rem;
}

.vstage[data-view="3"] .llm-track i {
    width: var(--w);
}

.vstage[data-view="3"] .llm-track em {
    opacity: 1;
}

.llm-axis {
    margin-top: 1.6rem;
    text-align: right;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-white-dim);
}

/* 4 · o treino */
.llm-train {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.4rem;
}

.llm-brain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.llm-brain b {
    margin-top: 1rem;
    font-size: 1.9rem;
}

.llm-brain span {
    font-size: 1.5rem;
    color: var(--color-white-dim);
}

.llm-grid {
    display: grid;
    grid-template-columns: repeat(12, 1.8rem);
    gap: .4rem;
}

.llm-grid i {
    height: 1.8rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, var(--a));
    transition: background .5s var(--ease);
}

.llm-grid-b i {
    background: rgba(255, 255, 255, .06);
}

.llm-grid-b i.is-on {
    background: color-mix(in srgb, var(--color-pink) calc(var(--b) * 100%), var(--color-blue) );
}

.llm-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.llm-mid small {
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--color-blue-light);
}

/* ==========================================================================
   Como o ChatGPT foi treinado: criança ↔ etapas do treino
   ========================================================================== */

.tr-tag {
    margin-left: .6rem;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-blue-light);
}

.tr-map {
    display: grid;
    gap: .8rem;
    margin-bottom: 2.4rem;
}

.tr-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.6rem;
    padding: 1rem 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    opacity: .3;
    transition: opacity .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.tr-row.is-on {
    opacity: 1;
}

.tr-row.is-now {
    border-color: var(--color-pink);
    box-shadow: 0 0 20px -6px rgba(224, 56, 143, .6);
}

.tr-kid {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--color-white-dim);
}

.tr-kid::before {
    content: "criança: ";
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-blue-light);
}

.tr-eq {
    font-size: 2rem;
    color: var(--color-pink);
}

.tr-row b {
    justify-self: end;
    font-size: 1.9rem;
}

.tr-views {
    min-height: 22rem;
}

.tr-intro p {
    text-align: center;
    font-size: 2rem;
    line-height: 1.5;
    color: var(--color-white-dim);
}

.tr-tokens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.tr-tokens span {
    padding: .6rem .8rem;
    border-radius: .5rem;
    font-size: 2.4rem;
    font-weight: 700;
    white-space: pre;
    background: hsl(var(--h) 60% 45% / .35);
    border: 1px solid hsl(var(--h) 70% 65% / .7);
    opacity: 0;
    transform: translateY(.8rem);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.tr-tokens span.is-on {
    opacity: 1;
    transform: none;
}

.tr-count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 2.8rem;
    color: var(--color-white-dim);
    font-size: 1.7rem;
}

.tr-count b {
    font-size: 4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-white);
}

.tr-ask {
    margin-bottom: 1.6rem;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.tr-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.tr-ans {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.6rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease), opacity .4s var(--ease);
}

.tr-ans .highlight-label {
    font-size: 1.3rem;
}

.tr-ans p {
    font-size: 1.7rem;
    line-height: 1.45;
}

.tr-ans small {
    font-size: 1.4rem;
    font-weight: 700;
}

.tr-ans.is-bad {
    border-color: rgba(255, 77, 109, .4);
}

.tr-ans.is-bad p {
    color: var(--color-white-dim);
}

.tr-ans.is-bad small {
    color: var(--signal-inh);
}

.tr-ans.is-good {
    border-color: rgba(61, 220, 132, .5);
}

.tr-ans.is-good small {
    color: var(--signal-exc);
}

.tr-thumb {
    position: absolute;
    top: 1.2rem;
    right: 1.6rem;
    font-size: 2.8rem;
    font-style: normal;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .3s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.tr-vote.is-voted .tr-thumb {
    opacity: 1;
    transform: none;
}

.tr-vote[data-vote="up"].is-voted {
    border-color: var(--signal-exc);
    box-shadow: 0 0 20px -6px rgba(61, 220, 132, .6);
}

.tr-vote[data-vote="down"].is-voted {
    border-color: rgba(255, 77, 109, .6);
    opacity: .6;
}

/* ==========================================================================
   Os limites
   ========================================================================== */

.lim-intro {
    text-align: center;
}

.lim-big {
    font-size: 6rem;
    font-weight: 800;
    letter-spacing: -.1rem;
}

.lim-big b {
    color: var(--signal-inh);
}

.lim-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.lim-q,
.lim-a {
    max-width: 80%;
    padding: 1.4rem 2rem;
    border-radius: 1.8rem;
    font-size: 1.9rem;
    line-height: 1.45;
}

.lim-q {
    align-self: flex-end;
    border-bottom-right-radius: .4rem;
    background: rgba(167, 104, 240, .25);
}

.lim-a {
    align-self: flex-start;
    border-bottom-left-radius: .4rem;
    border: 1px solid var(--border-soft);
    background: #0b0b12;
    opacity: 0;
    transition: opacity .5s var(--ease) .6s;
}

.vstage[data-view="1"] .lim-a {
    opacity: 1;
}

.lim-stamp {
    position: absolute;
    right: 4rem;
    bottom: -2rem;
    padding: .6rem 1.6rem;
    border: 3px solid var(--signal-inh);
    border-radius: var(--radius-sm);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .1rem;
    text-transform: uppercase;
    color: var(--signal-inh);
    background: rgba(5, 5, 7, .85);
    opacity: 0;
    transform: rotate(-8deg) scale(1.8);
    transition: opacity .2s var(--ease) 2s, transform .35s cubic-bezier(.34, 1.56, .64, 1) 2s;
}

.vstage[data-view="1"] .lim-stamp {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
}

.lim-time {
    display: grid;
    grid-template-columns: 3fr auto 1fr;
    align-items: center;
    height: 6rem;
    margin-bottom: 2.4rem;
}

.lim-seen,
.lim-unseen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.6rem;
    font-weight: 700;
}

.lim-seen {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--gradient-brand);
}

.lim-unseen {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border: 2px dashed rgba(255, 255, 255, .2);
    border-left: none;
    color: var(--color-white-dim);
}

.lim-cut {
    position: relative;
    width: 4px;
    height: 140%;
    background: var(--signal-inh);
}

.lim-cut b {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--signal-inh);
}

.lim-ctx {
    font-size: 2.8rem;
}

.lim-cands .llm-cand:not(.is-pick) i {
    background: rgba(255, 255, 255, .2);
}

.vstage[data-view="3"] .lim-cands .llm-cand i {
    width: var(--w);
}

/* ==========================================================================
   Fechamento
   ========================================================================== */

.end-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.impact-statement.end-statement {
    font-size: 9.6rem;
}

.end-line {
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 150rem;
    margin-top: 7rem;
}

/* o trilho da linha do tempo */
.end-line::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-blue), var(--color-pink));
    opacity: .5;
}

.end-line li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding-top: 3.4rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--color-white-dim);
}

.end-line li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--gradient-brand);
    box-shadow: 0 0 14px rgba(224, 56, 143, .6);
}

.end-line b {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-white);
}

.end-line .is-ice::before {
    background: linear-gradient(135deg, #6495ED, #e3ecff);
    box-shadow: 0 0 14px rgba(100, 149, 237, .7);
}

.end-line .is-ice b {
    color: #9db7f5;
}

.end-line .is-now::before {
    width: 3rem;
    height: 3rem;
    top: -.4rem;
    animation: pulse-ring 2s var(--ease) infinite;
}

.end-line .is-now b {
    color: var(--color-pink);
}

.slide-end.is-active .end-line li {
    animation: fade-up .6s var(--ease) backwards;
}

.slide-end.is-active .end-line li:nth-child(1) { animation-delay: 1.3s; }
.slide-end.is-active .end-line li:nth-child(2) { animation-delay: 1.45s; }
.slide-end.is-active .end-line li:nth-child(3) { animation-delay: 1.6s; }
.slide-end.is-active .end-line li:nth-child(4) { animation-delay: 1.75s; }
.slide-end.is-active .end-line li:nth-child(5) { animation-delay: 1.9s; }
.slide-end.is-active .end-line li:nth-child(6) { animation-delay: 2.05s; }
.slide-end.is-active .end-line li:nth-child(7) { animation-delay: 2.2s; }
.slide-end.is-active .end-line li:nth-child(8) { animation-delay: 2.35s; }

.end-thanks {
    margin-top: 6rem;
    font-size: 2.6rem;
    font-weight: 700;
}

.end-thanks span {
    margin-left: 1.6rem;
    font-weight: 500;
    color: var(--color-blue-light);
}

/* ==========================================================================
   Agradecimentos (último slide)
   ========================================================================== */

.thanks-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.thanks-photo {
    width: 18rem;
    height: 18rem;
    padding: .5rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    box-shadow: 0 0 60px -10px rgba(224, 56, 143, .7);
}

.thanks-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: .5rem solid var(--color-black);
    object-fit: cover;
}

.impact-statement.thanks-title {
    margin-top: 3.2rem;
    font-size: 15rem;
    line-height: 1;
}

.thanks-sub {
    margin-top: 2.4rem;
    font-size: 3.2rem;
    color: var(--color-white-dim);
}

.thanks-sub b {
    color: var(--color-white);
}

.thanks-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
    max-width: 150rem;
    margin-top: 5.6rem;
}

.thanks-chip {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 2rem 1rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(20, 20, 32, .85);
    text-align: left;
}

.thanks-chip .social-icon {
    width: 4.4rem;
    height: 4.4rem;
}

.thanks-chip .social-icon svg {
    width: 2rem;
    height: 2rem;
}

.thanks-chip small {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-blue-light);
}

.thanks-chip b {
    font-size: 1.7rem;
    font-weight: 600;
}

.thanks-who {
    margin-top: 4.4rem;
    font-size: 1.8rem;
    color: var(--color-white-dim);
}

.thanks-who b {
    color: var(--color-white);
}

/* ==========================================================================
   O primeiro inverno da IA (impacto + neve)
   ========================================================================== */

.slide-winter {
    background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(100, 149, 237, .14), transparent 70%);
}

/* geada nas bordas */
.slide-winter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(170, 200, 255, .1) 100%);
}

.slide-winter .snow {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.snow i {
    position: absolute;
    top: -2rem;
    left: var(--left);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--color-white);
    opacity: var(--alpha);
    filter: blur(.5px);
}

.slide.is-active .snow i {
    animation: snowfall var(--dur) linear var(--delay) infinite;
}

.winter-text {
    text-align: center;
}

.slide-winter .kicker {
    margin-bottom: 3rem;
    color: #9db7f5;
}

.ice-gradient {
    background: linear-gradient(135deg, #6495ED, #e3ecff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.winter-sub {
    max-width: 110rem;
    margin: 4.8rem auto 0;
    font-size: 2.6rem;
    line-height: 1.6;
    color: var(--color-white-dim);
}

/* ==========================================================================
   Animações
   ========================================================================== */

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes impact-in {
    from {
        opacity: 0;
        transform: translateY(4rem) scale(.98);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(138, 43, 226, .6), var(--shadow-glow);
    }

    70% {
        box-shadow: 0 0 0 1.6rem rgba(138, 43, 226, 0), var(--shadow-glow);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(138, 43, 226, 0), var(--shadow-glow);
    }
}

@keyframes nn-flow {
    to {
        stroke-dashoffset: -14;
    }
}

/* pulso: 116 e 8 ficam fora do caminho (antes do início / depois do fim) */
@keyframes pulse-in {
    0% {
        stroke-dashoffset: 116;
    }

    35%,
    100% {
        stroke-dashoffset: 8;
    }
}

@keyframes pulse-out {
    0%,
    40% {
        stroke-dashoffset: 116;
    }

    72%,
    100% {
        stroke-dashoffset: 8;
    }
}

@keyframes pulse-end {
    0%,
    72% {
        stroke-dashoffset: 116;
    }

    84%,
    100% {
        stroke-dashoffset: 8;
    }
}

@keyframes pulse-stream {
    from {
        stroke-dashoffset: 26;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes soma-flash {
    0%,
    30% {
        opacity: 0;
    }

    38% {
        opacity: .9;
    }

    55%,
    100% {
        opacity: 0;
    }
}

@keyframes bouton-flash {
    0%,
    80%,
    100% {
        fill: #e0388f;
    }

    86% {
        fill: #fff;
    }
}

@keyframes fire-show {
    0%,
    80% {
        opacity: 0;
    }

    84%,
    96% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fire-hide {
    0%,
    80% {
        opacity: 1;
    }

    84%,
    96% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mp-burst {
    from {
        opacity: .9;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes mp-shake {
    20% {
        transform: translateX(-7px);
    }

    40% {
        transform: translateX(7px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes mp-pop {
    from {
        transform: scale(1.5);
    }

    to {
        transform: scale(1);
    }
}

@keyframes mp-float {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-36px);
    }
}

@keyframes card-in {
    from {
        opacity: 0;
        transform: translateX(-6rem) rotate(-8deg);
    }
}

@keyframes cell-flash {
    0% {
        transform: scale(1.35);
        box-shadow: 0 0 0 4px var(--color-white);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes dot-in {
    from {
        transform: scale(0);
    }
}

@keyframes confetti {
    to {
        opacity: 0;
        transform: translate(var(--x), var(--y)) rotate(var(--r));
    }
}

@keyframes wrong-pulse {
    0% {
        transform: scale(.6);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes snowfall {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(var(--drift), 560px);
    }

    100% {
        transform: translate(0, 1120px);
    }
}

@keyframes scale-sway {
    0%,
    100% {
        --tilt: -2.5deg;
    }

    50% {
        --tilt: 2.5deg;
    }
}

@keyframes mp-rays {
    50% {
        opacity: .55;
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* agradecimentos: cascata mais curta (são muitos itens) */
.slide-thanks.is-active [data-anim] {
    animation-delay: calc(var(--i, 0) * 180ms + 200ms);
}