:root{
  --bg:#fef3f3;
  --card:#ffffff;
  --card-hover:#eef5fc;
  --border:rgba(41,53,60,0.15);
  --border-hover:#2377d2;
  --text:#29353c;
  --muted:#6d767b;
  --muted-2:#8a9296;
  --accent:#2377d2;
  --dot-red:#e0574a;
  --dot-yellow:#e0a63c;
  --dot-blue:#2377d2;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Fira Code', Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  min-height:100vh;
  line-height:1.7;
}
a{color:inherit;text-decoration:none;}
header{padding:32px 16px 0;display:flex;justify-content:space-between;align-items:center;max-width:672px;margin:0 auto;gap:16px;}
header a{color:var(--muted-2);font-size:13px;transition:color .15s ease;}
header a:hover{color:var(--accent);}

.hero{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 16px;}
.logo-row{display:flex;align-items:flex-start;max-width:100%;overflow-x:auto;}
.ascii{
  color:var(--text);font-size:7px;line-height:1.15;white-space:pre;margin:0;
  font-family:'Fira Code', Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
}
@media(min-width:640px){.ascii{font-size:11px;}}
@media(min-width:1024px){.ascii{font-size:14px;}}
.suffix{font-size:16px;margin-top:-2px;margin-left:12px;align-self:flex-end;white-space:nowrap;}
@media(min-width:768px){.suffix{font-size:22px;}}

.list-wrap{max-width:672px;margin:0 auto;padding:48px 16px 80px;}
.list{display:flex;flex-direction:column;gap:12px;}
.row{display:block;border:1px solid var(--border);background:var(--card);transition:background .15s ease, border-color .15s ease;}
.row:hover{border-color:var(--border-hover);background:var(--card-hover);}
.row-inner{display:flex;align-items:center;gap:12px;padding:12px;}
@media(min-width:768px){.row-inner{padding:16px;}}
.loading-bar{
  position:relative;width:36px;height:8px;border-radius:4px;flex-shrink:0;
  background:rgba(41,53,60,0.08);overflow:hidden;
}
.loading-bar::before{
  content:'';position:absolute;top:0;left:0;height:100%;width:0%;
  border-radius:4px;
  background:linear-gradient(90deg, var(--dot-red), var(--dot-yellow), var(--dot-blue));
  background-size:280% 100%;
  animation:loadbar 2.8s ease-in-out infinite;
}
.row:nth-child(3n+1) .loading-bar::before{animation-delay:0s;}
.row:nth-child(3n+2) .loading-bar::before{animation-delay:.35s;}
.row:nth-child(3n) .loading-bar::before{animation-delay:.7s;}
@keyframes loadbar{
  0%{width:0%;background-position:0% 0;}
  45%{width:100%;background-position:55% 0;}
  55%{width:100%;background-position:65% 0;}
  100%{width:0%;background-position:100% 0;}
}
.row-main{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden;min-width:0;}
@media(min-width:768px){.row-main{gap:16px;}}
.row-num{color:var(--accent);font-size:13px;flex-shrink:0;}
.row-sep{color:var(--muted);display:none;}
@media(min-width:768px){.row-sep{display:inline;}}
.row-title{color:var(--text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease;}
@media(min-width:768px){.row-title{font-size:15px;}}
.row:hover .row-title{color:var(--accent);}
.row-arrow{color:var(--muted);font-size:16px;transition:color .15s ease;}
.row:hover .row-arrow{color:var(--text);}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none;}
}

.filters{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  max-width:672px;margin:0 auto;padding:0 16px 28px;
}
.filter-btn{
  font-family:inherit;font-size:12.5px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);
  cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.row.is-hidden{display:none;}

.empty-state{color:var(--muted);font-size:14px;text-align:center;padding:24px 0;}
.empty-state a{color:var(--accent);text-decoration:underline;}

/* article */
main{max-width:672px;margin:0 auto;padding:40px 16px 96px;}
.meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-bottom:16px;}
.meta .num{color:var(--accent);}
h1{font-size:24px;line-height:1.3;margin:0 0 28px;color:var(--text);}
@media(min-width:768px){h1{font-size:30px;}}
.content p{font-size:15px;color:var(--text);margin:0 0 20px;}
.content p.lead{color:var(--muted);font-size:15.5px;}
.content h2{font-size:19px;margin:32px 0 12px;color:var(--text);}
.content ul{padding-left:22px;margin:0 0 20px;font-size:15px;}
.content a{color:var(--accent);text-decoration:underline;}
.content pre{
  background:var(--card);border:1px solid var(--border);border-radius:4px;
  padding:16px;font-size:13px;color:var(--text);white-space:pre-wrap;margin:24px 0;
  font-family:'Fira Code', Menlo, Consolas, monospace;overflow-x:auto;
}
.content .callout{
  border-left:3px solid var(--accent);padding:4px 16px;margin:24px 0;color:var(--muted);font-size:14px;
}
.divider{border:none;border-top:1px solid var(--border);margin:40px 0;}
.back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);transition:color .15s ease;}
.back:hover{color:var(--accent);}

/* tabs + cursos */
.tabs{display:flex;justify-content:center;gap:8px;max-width:672px;margin:0 auto;padding:0 16px;}
.tab{font-size:13px;padding:8px 20px;border-bottom:2px solid transparent;color:var(--muted);transition:color .15s ease,border-color .15s ease;}
.tab:hover{color:var(--accent);}
.tab.active{color:var(--text);border-bottom-color:var(--accent);}
.course-card{display:block;border:1px solid var(--border);background:var(--card);padding:20px;transition:background .15s ease,border-color .15s ease;}
.course-card:hover{border-color:var(--border-hover);background:var(--card-hover);}
.course-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.course-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:2px 8px;border-radius:4px;}
.course-title{font-size:18px;font-weight:600;color:var(--text);margin:0;}
.course-desc{font-size:14px;color:var(--muted);margin:0 0 14px;}
.course-foot{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);}
.course-price{color:var(--accent);font-weight:600;font-size:15px;}