:root{
      --azul:#286dcc;
      --azul-escuro:#0f4c9b;
      --azul-titulo:#0f4c9b;
      --azul-claro:#eaf3ff;
      --azul-card:#f7fbff;
      --fundo:#eaf0f8;
      --texto:#10213d;
      --muted:#44546a;
      --borda:#c8d8ee;
      --borda-forte:#a8c5e8;
      --sombra:0 8px 22px rgba(15,76,155,.12);
      --sombra-suave:0 3px 10px rgba(15,76,155,.08);
      --verde:#079267;
      --verde-bg:#eafff6;
      --amarelo:#fff7d6;
      --amarelo-borda:#f2c94c;
      --vermelho:#cc3d3d;
      --vermelho-bg:#fff0f0;
      --roxo:#7c4dff;
      --roxo-bg:#f3efff;
      --ciano:#0d96b6;
      --ciano-bg:#e8fbff;
      --raio:18px;
      --largura-menu:260px;
      --topo:60px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
      background:
        radial-gradient(circle at top right,rgba(40,109,204,.08),transparent 34%),
        linear-gradient(180deg,#eef5ff 0%,var(--fundo) 260px,var(--fundo) 100%);
      color:var(--texto);
      line-height:1.65;
      font-size:16px;
    }

    a{color:inherit;text-decoration:none}
    strong{font-weight:800}
    code{
      font-family:"Consolas","Courier New",monospace;
      background:#eef4ff;
      border:1px solid #d5e5fb;
      border-radius:6px;
      padding:2px 6px;
    }

    .topbar{
      height:var(--topo);
      background:var(--azul);
      color:white;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 18px;
      box-shadow:0 2px 8px rgba(0,0,0,.22);
      position:fixed;
      inset:0 0 auto 0;
      z-index:50;
    }

    .top-left{display:flex;align-items:center;gap:14px;min-width:0}
    .back{
      background:#15539e;
      border:1px solid rgba(255,255,255,.28);
      color:white;
      border-radius:999px;
      padding:7px 14px;
      font-size:.9rem;
      font-weight:800;
      white-space:nowrap;
      transition:.15s ease;
    }
    .back:hover{background:#0d4384}
    .titulo-topo{
      font-weight:900;
      font-size:1.15rem;
      letter-spacing:-.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .professor{font-size:.9rem;font-weight:800;white-space:nowrap}

    .layout{
      display:grid;
      grid-template-columns:var(--largura-menu) 1fr;
      padding-top:var(--topo);
      min-height:100vh;
    }

    aside{
      background:rgba(255,255,255,.93);
      border-right:1px solid var(--borda);
      position:fixed;
      top:var(--topo);
      bottom:0;
      left:0;
      width:var(--largura-menu);
      overflow:auto;
      padding:18px 10px 24px;
      backdrop-filter:blur(10px);
    }

    .menu-label{
      color:#315575;
      font-size:.76rem;
      letter-spacing:.06em;
      font-weight:900;
      text-transform:uppercase;
      margin:0 0 10px 2px;
    }
    .side-block{
      background:#f7fbff;
      border:1px solid #d8e6f7;
      border-radius:14px;
      padding:10px;
      margin-bottom:12px;
    }
    .side-hint{
      font-size:.8rem;
      color:#5a6a7d;
      margin:8px 4px 0;
      line-height:1.35;
    }
    .side-link{
      display:block;
      padding:9px 11px;
      border-radius:10px;
      margin-bottom:6px;
      color:#081a32;
      font-weight:800;
      font-size:.9rem;
      border:1px solid transparent;
      transition:.15s ease;
    }
    .side-link:last-child{margin-bottom:0}
    .side-link:hover{background:#eef5ff;border-color:#c7dcf8;color:var(--azul-escuro)}
    .side-link.active{background:var(--azul);color:white;border-color:#164b91;box-shadow:0 2px 6px rgba(15,76,155,.25)}

    main{
      grid-column:2;
      padding:20px;
      max-width:1800px;
      width:100%;
    }

    .hero{
      background:linear-gradient(180deg,#ffffff,#f6faff);
      border:1px solid var(--borda);
      border-radius:var(--raio);
      padding:28px;
      box-shadow:var(--sombra);
      margin-bottom:18px;
      overflow:hidden;
      position:relative;
    }
    .hero:before{
      content:"";
      position:absolute;
      right:-80px;
      top:-80px;
      width:260px;
      height:260px;
      background:radial-gradient(circle,rgba(40,109,204,.12),transparent 68%);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:24px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .badge{
      display:inline-block;
      background:#e9f3ff;
      border:1px solid #c8defa;
      color:#064b9b;
      border-radius:999px;
      padding:5px 13px;
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    h1{
      color:var(--azul-titulo);
      font-size:clamp(2rem,4vw,3.35rem);
      line-height:1.08;
      margin:0 0 10px;
      letter-spacing:-.04em;
    }
    h2{color:#063f83;font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.18;margin:0 0 12px;letter-spacing:-.03em}
    h3{color:#0b4c99;font-size:1.2rem;margin:0 0 8px;letter-spacing:-.02em}
    p{margin:0 0 13px}
    .lead{color:#10213d;font-size:1.08rem;max-width:1050px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .mini-panel{
      background:#f7fbff;
      border:1px solid #c8d8ee;
      border-radius:16px;
      padding:16px;
      box-shadow:var(--sombra-suave);
    }
    .mini-title{font-weight:900;color:#063f83;margin-bottom:10px}
    .mini-flow{display:grid;gap:7px}
    .mini-step{
      display:flex;
      align-items:center;
      gap:8px;
      background:white;
      border:1px solid #d8e6f7;
      border-radius:11px;
      padding:8px 10px;
      font-size:.9rem;
      font-weight:800;
      color:#163a63;
    }
    .mini-dot{width:10px;height:10px;border-radius:50%;background:var(--azul);box-shadow:0 0 0 4px #e5f0ff;flex:none}
    .journey{
      background:white;
      border:1px solid var(--borda);
      border-radius:var(--raio);
      padding:14px;
      margin-bottom:18px;
      box-shadow:var(--sombra-suave);
    }
    .journey-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
    .journey-item{
      background:#f7fbff;
      border:1px solid #d8e6f7;
      border-radius:14px;
      padding:12px;
      min-height:82px;
    }
    .journey-item strong{display:block;color:#063f83;margin-bottom:2px}
    .journey-item span{font-size:.86rem;color:#5a6a7d;line-height:1.3;display:block}

    .content-card{
      background:white;
      border:1px solid var(--borda);
      border-radius:var(--raio);
      padding:26px;
      margin-bottom:18px;
      box-shadow:var(--sombra);
      position:relative;
    }
    .content-card.connector:after{
      content:"";
      position:absolute;
      left:38px;
      bottom:-18px;
      width:2px;
      height:18px;
      background:linear-gradient(180deg,var(--borda-forte),transparent);
    }
    .section-kicker{
      color:#436c93;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:.78rem;
      margin-bottom:6px;
    }

    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
    .note{border-radius:13px;padding:18px;border:1px solid var(--borda);background:#f7fbff}
    .note.idea{background:var(--roxo-bg);border-left:5px solid var(--roxo)}
    .note.warn{background:var(--amarelo);border-left:5px solid #f5a623}
    .note.good{background:var(--verde-bg);border-left:5px solid var(--verde)}
    .note.bad{background:var(--vermelho-bg);border-left:5px solid var(--vermelho)}
    .note.ai{background:var(--ciano-bg);border-left:5px solid var(--ciano)}
    .note h3{margin-bottom:8px}.note p:last-child{margin-bottom:0}

    .mito-lista{margin:0;padding:0;list-style:none}
    .mito-lista li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.08)}
    .mito-lista li:last-child{border-bottom:0}
    .x{color:var(--vermelho);font-weight:900}.ok{color:var(--verde);font-weight:900}

    .flow-box{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}
    .flow-step{
      background:#f7fbff;
      border:1px solid #c8d8ee;
      border-radius:14px;
      padding:14px;
      text-align:center;
      min-height:105px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      cursor:pointer;
      transition:.15s ease;
    }
    .flow-step:hover,.flow-step.active{border-color:var(--azul);box-shadow:0 4px 14px rgba(40,109,204,.18);transform:translateY(-2px);background:#eef6ff}
    .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--azul);color:white;font-weight:900;margin:0 auto 8px;font-size:.86rem}
    .flow-step strong{color:#063f83;font-size:.98rem}
    .flow-detail{background:#f7fbff;border:1px solid var(--borda);border-radius:14px;padding:16px;color:var(--texto);margin-top:8px}

    .quiz-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
    .option{border:1px solid #c8d8ee;background:#f7fbff;border-radius:12px;padding:13px;text-align:left;font-weight:800;color:#0b376b;cursor:pointer;font-size:.96rem;transition:.15s ease}
    .option:hover{background:#eaf3ff;border-color:var(--azul)}
    .option.selected{background:#dcecff;border-color:var(--azul);color:#063f83}
    .feedback{display:none;margin-top:14px;padding:16px;border-radius:13px;background:#eafff6;border:1px solid #a6eacb;color:#12382d}
    .feedback.show{display:block}

    .prompt{background:#f2f6fc;border:1px solid #c8d8ee;border-radius:13px;padding:15px 92px 15px 15px;font-family:Consolas,"Courier New",monospace;color:#10213d;font-size:.95rem;white-space:pre-wrap;position:relative}
    .copy-prompt-btn{
      position:absolute;
      top:10px;
      right:10px;
      border:1px solid #bdd4f2;
      background:white;
      color:var(--azul-escuro);
      border-radius:999px;
      padding:5px 9px;
      font-size:.75rem;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 2px 5px rgba(40,109,204,.12);
      transition:.15s ease;
    }
    .copy-prompt-btn:hover{background:#eaf3ff;border-color:var(--azul)}
    .copy-prompt-btn.copied{background:var(--verde-bg);border-color:#9ee7c4;color:#07885e}
    .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .button{display:inline-block;border:none;background:var(--azul);color:white;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer;box-shadow:0 3px 8px rgba(40,109,204,.22);transition:.15s ease}
    .button:hover{background:var(--azul-escuro);transform:translateY(-1px)}
    .button.secondary{background:white;color:var(--azul-escuro);border:1px solid #bdd4f2;box-shadow:none}
    .practice-toggle{margin-top:16px;margin-bottom:16px}
    .hidden-box{display:none;margin-top:14px}.hidden-box.show{display:block}
    .checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
    .check{background:#f7fbff;border:1px solid var(--borda);border-radius:12px;padding:12px;font-weight:700}

    .final{text-align:center;background:linear-gradient(180deg,#ffffff,#f2f7ff)}
    .frase{font-size:clamp(1.45rem,2.5vw,2.2rem);color:#063f83;font-weight:900;line-height:1.18;max-width:920px;margin:0 auto 12px;letter-spacing:-.035em}
    .footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
    .status{display:inline-block;border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:900;border:1px solid #9ee7c4;color:#07885e;background:#eafff6}


    .concept-strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      margin-top:16px;
    }
    .concept-mini{
      background:#f7fbff;
      border:1px solid var(--borda);
      border-radius:14px;
      padding:15px;
      box-shadow:var(--sombra-suave);
    }
    .concept-mini strong{display:block;color:#063f83;margin-bottom:6px}
    .concept-mini span{display:block;color:var(--muted);font-size:.94rem;line-height:1.45}
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border:1px solid var(--borda);
      border-radius:14px;
      margin-top:16px;
      background:white;
    }
    .compare-table th,.compare-table td{
      padding:14px;
      border-bottom:1px solid var(--borda);
      vertical-align:top;
      text-align:left;
    }
    .compare-table th{background:#eef6ff;color:#063f83;font-weight:900}
    .compare-table tr:last-child td{border-bottom:0}
    .compare-table td:first-child{font-weight:800;color:#12365f;width:26%}
    .visual-line{
      display:flex;
      align-items:stretch;
      gap:10px;
      margin:18px 0;
      flex-wrap:wrap;
    }
    .visual-chip{
      flex:1 1 130px;
      min-height:74px;
      background:#f7fbff;
      border:1px solid var(--borda);
      border-radius:14px;
      display:grid;
      place-items:center;
      text-align:center;
      padding:12px;
      font-weight:900;
      color:#063f83;
      position:relative;
    }
    .visual-chip:not(:last-child)::after{
      content:'→';
      position:absolute;
      right:-15px;
      top:50%;
      transform:translateY(-50%);
      color:var(--azul);
      font-weight:900;
      z-index:1;
    }
    .example-card{
      background:#fff;
      border:1px solid var(--borda);
      border-radius:14px;
      padding:16px;
      box-shadow:var(--sombra-suave);
    }
    .example-card .icon{font-size:1.45rem;display:block;margin-bottom:6px}
    .example-card h3{margin-bottom:6px}
    .truth-box{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
      margin-top:16px;
    }
    .mini-svg{
      background:#f7fbff;
      border:1px solid var(--borda);
      border-radius:16px;
      padding:12px;
      margin-top:14px;
    }
    .micro-question{
      background:#f8fbff;
      border:1px dashed #9abce6;
      border-radius:14px;
      padding:16px;
      margin-top:14px;
    }
    .micro-question button{margin-top:10px}
    .soft-divider{
      height:1px;
      background:linear-gradient(90deg,transparent,var(--borda),transparent);
      margin:24px 0;
    }
    .term-list{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin-top:14px;
    }
    .term{
      background:#f7fbff;
      border:1px solid var(--borda);
      border-left:5px solid var(--azul);
      border-radius:13px;
      padding:14px;
    }
    .term strong{color:#063f83;display:block;margin-bottom:4px}
    .term span{color:var(--muted)}
    .lab-steps{counter-reset:lab;display:grid;gap:10px;margin-top:14px}
    .lab-step{
      background:#f7fbff;
      border:1px solid var(--borda);
      border-radius:13px;
      padding:13px 14px 13px 52px;
      position:relative;
    }
    .lab-step::before{
      counter-increment:lab;
      content:counter(lab);
      position:absolute;
      left:14px;
      top:13px;
      width:26px;
      height:26px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--azul);
      color:white;
      font-weight:900;
      font-size:.85rem;
    }

    .tool-grid{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .tool-button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:1px solid #bdd4f2;
      background:white;
      color:var(--azul-escuro);
      border-radius:999px;
      padding:10px 15px;
      font-weight:900;
      box-shadow:var(--sombra-suave);
      transition:.15s ease;
    }
    .tool-button:hover{
      background:#eef6ff;
      border-color:var(--azul);
      transform:translateY(-1px);
    }
    .tool-note{
      margin-top:12px;
      color:#44546a;
      font-size:.94rem;
    }
    .pattern-demo{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
      margin-top:16px;
    }
    .pattern-sequence{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:10px 0 0;
    }
    .token-chip{
      display:inline-block;
      background:#eef6ff;
      border:1px solid #c8d8ee;
      color:#063f83;
      border-radius:999px;
      padding:7px 11px;
      font-weight:900;
      font-size:.9rem;
    }
    .token-chip.missing{
      background:#fff7d6;
      border-color:#f2c94c;
      color:#7a5700;
    }
    .learning-diagram{
      background:#f7fbff;
      border:1px solid var(--borda);
      border-radius:16px;
      padding:16px;
      margin-top:16px;
    }


    .generation-map{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      margin-top:16px;
    }
    .generation-step{
      background:#f7fbff;
      border:1px solid var(--borda);
      border-radius:14px;
      padding:15px;
      position:relative;
    }
    .generation-step::before{
      content:attr(data-step);
      display:inline-grid;
      place-items:center;
      width:30px;
      height:30px;
      border-radius:50%;
      background:var(--azul);
      color:white;
      font-weight:900;
      margin-bottom:8px;
      font-size:.85rem;
    }
    .probability-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border:1px solid var(--borda);
      border-radius:14px;
      background:white;
      margin-top:14px;
    }
    .probability-table th,
    .probability-table td{
      padding:12px 14px;
      border-bottom:1px solid #dbe7f5;
      text-align:left;
      vertical-align:top;
    }
    .probability-table th{
      background:#eaf3ff;
      color:#063f83;
      font-weight:900;
    }
    .probability-table tr:last-child td{border-bottom:0}
    .prob-bar{
      height:10px;
      border-radius:999px;
      background:#dcecff;
      overflow:hidden;
      min-width:120px;
    }
    .prob-fill{
      height:100%;
      background:var(--azul);
      border-radius:999px;
    }
    .word-builder{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      margin-top:12px;
    }
    .word-chip{
      background:#eef4ff;
      border:1px solid #c8d8ee;
      color:#063f83;
      border-radius:999px;
      padding:7px 11px;
      font-weight:900;
      font-size:.92rem;
    }
    .word-chip.next{
      background:#eafff6;
      border-color:#9ee7c4;
      color:#07885e;
    }
    .word-chip.alert{
      background:#fff7d6;
      border-color:#f2c94c;
      color:#7a5700;
    }
    .copy-prompt{
      float:right;
      border:1px solid #bdd4f2;
      background:white;
      color:var(--azul-escuro);
      border-radius:999px;
      padding:5px 9px;
      font-size:.78rem;
      font-weight:900;
      cursor:pointer;
      margin-left:8px;
    }
    .copy-prompt:hover{background:#eef5ff}

    @media(max-width:980px){
      .layout{display:block}
      aside{position:static;width:auto;border-right:none;border-bottom:1px solid var(--borda);display:flex;overflow:auto;gap:8px;padding:12px;top:auto;background:white}
      .side-block{display:flex;gap:8px;background:transparent;border:none;padding:0;margin:0;flex:0 0 auto}.menu-label,.side-hint{display:none}
      .side-link{white-space:nowrap;margin-bottom:0;flex:0 0 auto;background:#f7fbff;border:1px solid #d8e6f7}
      main{padding:14px}.hero-grid{grid-template-columns:1fr}.grid-2,.grid-3,.truth-box,.term-list,.pattern-demo,.generation-map{grid-template-columns:1fr}.concept-strip{grid-template-columns:1fr 1fr}.flow-box{grid-template-columns:1fr}.journey-row{grid-template-columns:1fr 1fr}.quiz-options{grid-template-columns:1fr 1fr}.visual-chip:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-18px;transform:translateX(-50%)}.visual-line{gap:18px}.professor{display:none}.titulo-topo{font-size:1rem}
    }
    @media(max-width:560px){
      body{font-size:15px}.topbar{padding:0 10px}.back{padding:6px 10px;font-size:.8rem}.titulo-topo{font-size:.92rem}.hero,.content-card{padding:18px}.quiz-options,.checklist,.journey-row,.concept-strip{grid-template-columns:1fr}h1{font-size:2.15rem}.mini-panel{padding:13px}
    }
  
    .copy-btn{
      display:inline-block;
      margin-top:12px;
      margin-bottom:10px;
      border:none;
      background:var(--azul);
      color:white;
      border-radius:999px;
      padding:8px 13px;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 3px 8px rgba(40,109,204,.18);
      font-size:.88rem;
    }

    .copy-btn:hover{
      background:var(--azul-escuro);
    }

  
.prompt{
  position:relative;
}



    .prompt{
      position:relative;
      padding:48px 15px 15px;
      background:#f2f6fc;
      border:1px solid #c8d8ee;
      border-radius:13px;
      font-family:Consolas,"Courier New",monospace;
      color:#10213d;
      font-size:.95rem;
      white-space:pre-wrap;
      min-height:72px;
    }

    .prompt-text{
      display:block;
    }

    .prompt-copy-inside{
      position:absolute;
      top:9px;
      right:9px;
      border:1px solid #0f4c9b;
      background:#286dcc;
      color:white;
      padding:6px 12px;
      border-radius:999px;
      cursor:pointer;
      font-size:.78rem;
      font-weight:900;
      box-shadow:0 3px 8px rgba(40,109,204,.22);
      transition:.18s ease;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
      z-index:2;
    }

    .prompt-copy-inside:hover{
      background:#0f4c9b;
      border-color:#063f83;
      color:white;
      transform:translateY(-1px);
    }

    .prompt-copy-inside.copied{
      background:#079267;
      border-color:#067653;
      color:white;
    }


/* Corrige o deslocamento dos links do menu com a barra superior fixa */
section[id]{
  scroll-margin-top: 90px;
}