@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --brand:#A78BFA;
  --brand-dark:#7C3AED;
  --brand-glow:rgba(167,139,250,.2);
  --bg:#0E1120;
  --surface:#161929;
  --surface2:#1C2038;
  --border:#252A42;
  --text:#E2E8F4;
  --muted:#8891B4;
  --ok:#34D399;
  --err:#F87171;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:960px;margin:0 auto;padding:0 20px 80px}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.topbar .logo{display:flex;align-items:center;gap:10px}
.topbar .logo img{height:26px;width:auto;display:block}
.topbar .logo .fallback{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.topbar .logo .fallback span{color:var(--brand)}
.topbar nav{font-family:var(--mono);font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px}
.topbar nav a{white-space:nowrap;color:var(--muted)}
.topbar nav a:hover{color:var(--brand);text-decoration:none}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.1em}
@media(max-width:420px){.topbar .logo img{height:22px}.topbar nav{font-size:.74rem}}

/* FOOTER */
footer{margin-top:60px;padding:24px 0;border-top:1px solid var(--border);text-align:center;font-size:.82rem;color:var(--muted)}
footer b{color:var(--brand);font-family:var(--display);font-weight:700}
.rodape-marca{display:inline-block;margin-bottom:12px;opacity:.85;transition:opacity .16s}
.rodape-marca:hover{opacity:1}
.rodape-marca img{height:22px;width:auto;display:block}

/* HERO */
.hero{padding:44px 0 32px;border-bottom:1px solid var(--border)}
.aula-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,5vw,2.4rem);letter-spacing:-.02em;line-height:1.1}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{color:var(--muted);font-size:.9rem;margin-top:10px;max-width:58ch}

/* PROGRESSO */
.progresso{height:3px;background:var(--border);border-radius:999px;margin:20px 0;overflow:hidden}
.progresso-fill{height:100%;border-radius:999px;background:linear-gradient(to right,var(--brand-dark),var(--brand))}

/* TEORIA */
.teoria{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;margin:32px 0}
.teoria h2{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--brand);margin-bottom:14px}
.teoria h3{font-family:var(--display);font-size:.92rem;font-weight:600;margin:18px 0 7px;color:var(--text)}
.teoria p{color:var(--muted);font-size:.88rem;margin-bottom:8px}
.teoria ul,.teoria ol{color:var(--muted);font-size:.88rem;padding-left:18px;margin-bottom:8px}
.teoria li{margin-bottom:3px}
.teoria code{font-family:var(--mono);font-size:.8rem;background:var(--surface2);padding:2px 6px;border-radius:4px;color:var(--brand)}
.teoria pre{background:#070A14;border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;font-family:var(--mono);font-size:.82rem;color:var(--text);margin:10px 0;line-height:1.6;white-space:pre}

/* EXERCÍCIOS */
.ex-section{margin-top:36px}
.ex-section-title{font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:20px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}

.ex-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:22px}
.ex-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface2)}
.ex-num{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--brand);white-space:nowrap}
.ex-title{font-weight:600;font-size:.9rem;color:var(--text);flex:1}
.badge{font-family:var(--mono);font-size:.63rem;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.06em;white-space:nowrap}
.badge-ex{background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.35);color:var(--brand)}
.badge-desafio{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);color:#FCD34D}

.ex-body{padding:18px}
.ex-desc{color:var(--muted);font-size:.88rem;margin-bottom:12px;line-height:1.6}

.dica{margin-bottom:12px;background:rgba(167,139,250,.05);border:1px solid rgba(167,139,250,.18);border-radius:8px;overflow:hidden}
.dica summary{padding:8px 14px;cursor:pointer;font-size:.82rem;font-family:var(--mono);color:var(--brand);list-style:none;user-select:none}
.dica summary::-webkit-details-marker{display:none}
.dica p{padding:0 14px 12px;color:var(--muted);font-size:.84rem}
.dica code{font-family:var(--mono);font-size:.78rem;background:var(--surface2);padding:2px 5px;border-radius:4px;color:var(--brand)}

/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.split{grid-template-columns:1fr}}
.split-col{display:flex;flex-direction:column;gap:6px}
.col-label{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.editor{flex:1;min-height:160px;resize:vertical;background:#070A14;border:1px solid var(--border);border-radius:8px;padding:12px;font-family:var(--mono);font-size:.82rem;color:var(--text);outline:none;transition:border-color .2s;tab-size:4}
.editor:focus{border-color:var(--brand)}
.stdin-area{min-height:64px;resize:vertical;background:#070A14;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:.82rem;color:var(--text);outline:none;transition:border-color .2s}
.stdin-area:focus{border-color:rgba(167,139,250,.5)}
.stdin-area::placeholder{color:#2A3050}
.output-box{flex:1;min-height:240px;background:#070A14;border:1px solid var(--border);border-radius:8px;padding:12px;font-family:var(--mono);font-size:.82rem;color:#94A3B8;overflow-y:auto;white-space:pre-wrap;word-break:break-word;line-height:1.6}

/* EX FOOTER */
.ex-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 18px;border-top:1px solid var(--border);background:var(--surface2)}
.btn-run{font-family:var(--mono);font-size:.78rem;font-weight:700;padding:7px 16px;border-radius:8px;border:none;cursor:pointer;background:var(--brand);color:#0E1120;transition:opacity .2s,transform .15s}
.btn-run:hover:not(:disabled){opacity:.85;transform:translateY(-1px)}
.btn-run:disabled{opacity:.5;cursor:not-allowed}
.result-ok{font-family:var(--mono);font-size:.78rem;color:var(--ok)}
.result-err{font-family:var(--mono);font-size:.78rem;color:var(--err)}
.err-text{color:var(--err)}
.muted-text{color:var(--muted);font-style:italic}
.py-loading{color:var(--muted)}

/* NAV AULA */
.aula-nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid var(--border);margin-top:48px;gap:12px}
.nav-btn{font-family:var(--mono);font-size:.78rem;font-weight:600;padding:8px 16px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--text);transition:border-color .2s,color .2s;white-space:nowrap}
.nav-btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.nav-btn.next{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.4);color:var(--brand)}
.nav-btn.next:hover{background:rgba(167,139,250,.22)}
.nav-info{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:center}

/* INDEX CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:28px}
.aula-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;display:block;transition:border-color .2s,transform .2s,box-shadow .2s;color:var(--text)}
.aula-card:hover{border-color:rgba(167,139,250,.5);text-decoration:none;transform:translateY(-3px);box-shadow:0 0 20px rgba(167,139,250,.1)}
.aula-card .num{font-family:var(--mono);font-size:.68rem;color:var(--brand);margin-bottom:5px}
.aula-card .titulo{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:5px}
.aula-card .desc{font-size:.82rem;color:var(--muted)}
.aula-card.em-breve{opacity:.45;pointer-events:none}

/* STATS */
.stats{display:flex;flex-wrap:wrap;gap:20px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:36px 0}
.stat{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:90px}
.stat .num{font-family:var(--display);font-weight:700;font-size:1.8rem;color:var(--brand)}
.stat .desc{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-align:center}

footer{margin-top:60px;padding:24px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.8rem;line-height:1.8}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
.rodape-logo img{height:32px;width:auto;filter:brightness(.6);transition:filter .2s;margin-bottom:10px}
.rodape-logo:hover img{filter:brightness(1)}