:root{--bg:#0a0f18;--p:#101a29;--p2:#152235;--line:#273449;--t:#edf3fb;--m:#a6b3c6;--b:#76b8ff;--r:#14c78a;--y:#f2c65d;--g:#39d98a;--o:#62adff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--t);font:16px/1.72 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
main{width:min(100%,1680px);max-width:none;margin:auto;padding:30px clamp(24px,4.5vw,72px) 70px}h1,h2{font-family:Georgia,serif;line-height:1.2;letter-spacing:-.02em}h1{font-size:clamp(2.3rem,5vw,3.6rem);margin:.3em 0 .5em}h2{font-size:clamp(1.55rem,3vw,2rem);margin:0}h3{margin:0 0 10px;line-height:1.35}h4{margin:16px 0 6px}p{margin:12px 0}.muted{color:var(--m)}.intro{font-size:1.15rem;color:#bdc9d8;max-width:820px}
.eyebrow,.tag{display:inline-block;border:1px solid #14563f;background:#10291f;color:var(--r);border-radius:8px;padding:5px 11px;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--m);font-size:.88rem;margin:22px 0 34px}.dot{display:inline-block;width:8px;height:8px;background:var(--r);border-radius:50%;margin-right:7px}
.notice,.tip,.warn,.good{border:1px solid var(--line);border-radius:13px;padding:16px 19px;margin:20px 0;background:var(--p)}.notice{border-color:#1b6548;background:#14281f}.notice strong{color:var(--r)}.tip{border-color:#28415d;background:#111e2d}.tip strong{color:var(--b)}.warn{border-color:#6b5b2c;background:#282316}.warn strong{color:var(--y)}.good{border-color:#1e674b;background:#10251e}.good strong{color:var(--g)}
.section{margin-top:62px}.head{display:flex;gap:13px;align-items:center;margin-bottom:18px}.tag.blue{color:var(--b);border-color:#28415d;background:#111e2d}.tag.yellow{color:var(--y);border-color:#6b5b2c;background:#282316}.tag.green{color:var(--g);border-color:#1e674b;background:#10251e}
.source-list{padding-left:22px}.source-list li{margin:8px 0}.source-list a{color:#91c5ff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin:20px 0}.card,.step,.quizbox{border:1px solid var(--line);border-radius:14px;background:var(--p);padding:19px}.card .k{font-size:.7rem;color:var(--m);letter-spacing:.15em;text-transform:uppercase}.card h3{margin:8px 0}.card p{color:var(--m);margin:4px 0}
.step{margin:18px 0;padding:22px;background:linear-gradient(145deg,#101a29,#0e1521)}.stitle{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}.num{display:grid;place-items:center;min-width:34px;height:34px;background:#122c22;border:1px solid #14563f;border-radius:9px;color:var(--r);font-weight:900}
.inline{font:.92em ui-monospace,Consolas,monospace;color:#91c5ff;background:#1c2a3d;border:1px solid #2c394c;padding:2px 5px;border-radius:5px;overflow-wrap:anywhere}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:11px;margin:16px 0}table{width:100%;border-collapse:collapse;min-width:520px;background:#0e1521}td,th{padding:11px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}th{background:#152235;color:var(--m);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}tr:last-child td{border-bottom:0}
.check{list-style:none;padding:0}.check li{padding-left:27px;position:relative;margin:8px 0}.check li:before{content:"□";position:absolute;left:2px;color:var(--b);font-size:1.2rem}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:20px 0}.flowitem{border:1px solid var(--line);border-radius:12px;background:#0e1521;padding:15px}.flowitem strong{display:block;color:var(--b);margin-bottom:5px}.arrow{text-align:center;color:var(--o);font-size:1.4rem;align-self:center}
.quizbox{padding:23px}.qtop{display:flex;justify-content:space-between;gap:12px;color:var(--m);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}.progress{height:5px;background:#263449;border-radius:20px;margin:13px 0 22px;overflow:hidden}.fill{height:100%;width:0;background:var(--o);transition:width .2s}.question{font-size:1.15rem;font-weight:750;line-height:1.5;margin:12px 0 18px}.answers{display:grid;gap:9px}.answer{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;background:#172337;color:var(--t);font:inherit;cursor:pointer}.answer:hover{border-color:#555567}.answer:focus-visible,.btn:focus-visible{outline:2px solid var(--b);outline-offset:3px}.letter{display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:#263449;font-size:.8rem;font-weight:800}.answer.selected{border-color:var(--b);background:#1a3048}.answer.correct{border-color:var(--g);background:#10291f}.answer.incorrect{border-color:var(--r);background:#33201c}.feedback{display:none;padding:14px;margin-top:15px;border:1px solid var(--line);border-radius:10px;background:#0e1521}.feedback.show{display:block}.feedback.good{border-color:#1e674b}.feedback.bad{border-color:#1b6548}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px}.btn{border:1px solid var(--line);border-radius:9px;padding:10px 15px;background:transparent;color:var(--t);font-weight:800;cursor:pointer}.btn.primary{background:#14c78a;border-color:#14c78a;color:white}.btn:disabled{opacity:.4;cursor:not-allowed}.result{display:none}.result.show{display:block}.score{font-size:2.2rem;color:var(--o);font-weight:900}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 28px}.toc a{color:#b7cce6;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#111116;font-size:.88rem}.toc a:hover{border-color:var(--b)}
.foot{border-top:1px solid var(--line);margin-top:60px;padding-top:22px;color:var(--m);font-size:.9rem}a{color:#91c5ff}a:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.topic-divider{padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--b);border-radius:14px;background:linear-gradient(120deg,#101a29,#0c131d)}
.topic-divider .head{margin-bottom:8px}
.topic-divider p{margin:0;color:var(--m);max-width:850px}
@media(max-width:620px){main{padding:20px 14px 50px}.step,.quizbox{padding:16px}.head{align-items:flex-start}.meta{gap:10px}}
@media(max-width:620px){.topic-divider{padding:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{body{background:white;color:#111}main{max-width:none;padding:0}.step,.card,.quizbox,.notice,.tip,.warn,.good,.flowitem{background:white;color:#111;break-inside:avoid}.muted,.card p,.foot{color:#444}.actions,.toc{display:none}a{color:#111}}
/* Mobile: keep lesson navigation and quiz controls easy to tap. */
@media(max-width:620px){
  .toc a{display:inline-flex;align-items:center;min-height:44px;padding:9px 10px;line-height:1.4}
  .btn{min-height:44px}
  .answer{min-height:48px}
  .head .tag{flex:none}
}.lesson-nav{display:flex;align-items:stretch;justify-content:space-between;gap:14px;margin-top:34px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--p)}
.lesson-nav a{color:var(--t);text-decoration:none}
.lesson-nav-prev,.lesson-nav-next{display:flex;flex:1;flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--p2)}
.lesson-nav-prev span,.lesson-nav-next span{color:var(--m);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lesson-nav-prev strong,.lesson-nav-next strong{font-size:.92rem;line-height:1.4}

.lesson-nav a:hover{border-color:var(--r)}
.lesson-nav a:focus-visible{outline:2px solid var(--b);outline-offset:3px}
@media(max-width:620px){.lesson-nav{flex-direction:column;padding:12px}.lesson-nav-prev,.lesson-nav-next{flex:none;width:100%;min-height:64px}}
.course-trail{display:flex;align-items:center;gap:11px;margin-bottom:20px;color:var(--m);font-size:.84rem}
.course-trail a{display:inline-flex;align-items:center;min-height:44px;color:var(--r)!important;font-weight:800;text-decoration:none}
.course-trail a:hover{text-decoration:underline;text-underline-offset:4px}
.course-trail span{padding-left:11px;border-left:1px solid var(--line)}
.course-trail a:focus-visible{outline:2px solid var(--b);outline-offset:3px;border-radius:4px}
@media(max-width:620px){.course-trail{flex-wrap:wrap;gap:7px;margin-bottom:16px}.course-trail a{min-height:44px}}

.lesson-figure{margin:18px 0 24px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#080d15}
.lesson-figure img{display:block;width:100%;height:auto;max-height:720px;object-fit:contain;border-radius:8px;background:#05080e}
.lesson-figure figcaption{padding:10px 5px 2px;color:var(--m);font-size:.88rem;line-height:1.5}
.lesson-diagram{margin:22px 0 26px;padding:14px;border:1px solid var(--line);border-radius:14px;background-color:#0b0d12;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px;overflow:hidden}
.lesson-diagram svg{display:block;width:min(100%,420px);height:auto;margin:0 auto;overflow:visible}
.lesson-diagram .diagram-node{stroke-width:1.7}
.lesson-diagram .diagram-blue{fill:#202b40;stroke:#76a2ff}
.lesson-diagram .diagram-green{fill:#1b342b;stroke:#39d98a}
.lesson-diagram .diagram-orange{fill:#3a271f;stroke:#ff7b35}
.lesson-diagram .diagram-yellow{fill:#39311e;stroke:#f2c65d}
.lesson-diagram .diagram-purple{fill:#2b263d;stroke:#b09cff}
.lesson-diagram .diagram-title{fill:#edf3fb;font:700 15px system-ui,-apple-system,"Segoe UI",sans-serif;text-anchor:middle}
.lesson-diagram .diagram-subtitle{fill:#a6b3c6;font:12px system-ui,-apple-system,"Segoe UI",sans-serif;text-anchor:middle}
.lesson-diagram .diagram-arrow{fill:none;stroke:#a6b3c6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lesson-diagram .diagram-dash{stroke-dasharray:5 5}
.lesson-diagram figcaption{max-width:650px;margin:8px auto 0;color:var(--m);font-size:.88rem;line-height:1.5}
.programming-concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.programming-concept{position:relative;min-width:0;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--p);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.programming-concept:hover{transform:translateY(-3px);border-color:var(--b);box-shadow:0 10px 24px #0003}
.concept-number,.average-kicker{color:var(--g);font-size:.72rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.programming-concept h3,.average-example h3{margin:7px 0 8px;color:var(--t);font-size:1.08rem}
.programming-concept p,.average-example p{margin:0;color:var(--m);line-height:1.65}
.programming-flow svg{width:min(100%,820px)}
.average-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);align-items:center;gap:22px;margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--p)}
.average-example>div p+p{margin-top:12px}
.average-flow{width:100%;margin:0;padding:14px}
.average-flow svg{width:min(100%,440px)}
.support-lanes{display:grid;gap:12px}
.support-lane{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--p)}
.support-lane-title{display:flex;align-items:center;gap:11px;color:var(--t)}
.support-lane-title strong,.support-lane-title small{display:block}
.support-lane-title small{margin-top:3px;color:var(--m);font-size:.82rem}
.support-mark{width:13px;height:13px;flex:none;border-radius:50%;background:var(--g);box-shadow:0 0 0 5px #22c9931a}
.support-short{background:var(--b);box-shadow:0 0 0 5px #76b8ff1a}
.support-track{display:flex;align-items:center;gap:9px;margin:16px 0 0 24px;color:var(--m);font-size:.76rem;line-height:1.35}
.support-track span{max-width:145px;text-align:center}
.support-track span:first-child{text-align:left}
.support-track span:last-child{text-align:right}
.support-track i{height:2px;flex:1;background:var(--g)}
.support-track-long i:first-of-type{flex:2.2}
.support-track-long i:last-of-type{flex:1.2}
.support-track-short i{flex:.55;background:var(--b)}
.support-track-short i:last-of-type{flex:.45}
.host-vm-resources svg{width:min(100%,720px)}
.network-modes svg{width:min(100%,760px)}
@media(max-width:720px){.average-example{grid-template-columns:minmax(0,1fr)}.average-flow{max-width:440px;margin:0 auto}}
@media(max-width:620px){.support-lane{padding:13px}.support-track{gap:5px;margin-left:0;font-size:.68rem}.support-track span{max-width:110px}.host-vm-resources,.network-modes{overflow-x:auto}.host-vm-resources svg{min-width:620px;max-width:none}.network-modes svg{min-width:640px;max-width:none}}
@media(max-width:560px){.programming-concepts{grid-template-columns:minmax(0,1fr)}.programming-concept{padding:16px}.programming-flow{padding:8px}.programming-flow svg{min-width:620px;max-width:none}.programming-flow{overflow-x:auto}.average-example{padding:15px}}
.edition-card{min-width:0}
.edition-shot{margin:12px 0;padding:7px;border:1px solid var(--line);border-radius:10px;background:#080d15}
.edition-shot img{display:block;width:100%;height:190px;object-fit:contain;border-radius:6px;background:#05080e}
.edition-shot figcaption{padding:7px 3px 1px;color:var(--m);font-size:.78rem}
.edition-image-zoom,.lesson-image-zoom{display:block;overflow:hidden;border-radius:6px;cursor:zoom-in}
.edition-image-zoom:focus-visible,.lesson-image-zoom:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.image-zoom-trigger{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:8px 0 0;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--p2);color:var(--b);font:inherit;font-size:.82rem;font-weight:750;cursor:pointer}
.image-zoom-trigger:hover{border-color:var(--b);background:#1a3048;color:var(--t)}
.image-zoom-trigger:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.image-zoom-dialog{width:min(96vw,1500px);max-width:none;max-height:94dvh;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--p);color:var(--t)}
.image-zoom-dialog[open]{animation:image-zoom-enter .18s ease-out}
@keyframes image-zoom-enter{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.image-zoom-dialog::backdrop{background:#03060bdc;backdrop-filter:blur(5px)}
.image-zoom-panel{position:relative;display:grid;justify-items:center;gap:8px;max-height:94dvh;padding:clamp(12px,2.5vw,28px)}
.image-zoom-title{max-width:calc(100% - 120px);margin:0 0 2px;font:700 1rem/1.35 Inter,system-ui,sans-serif;text-align:center}
.image-zoom-stage{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:10px;width:100%}
.image-zoom-viewport{width:100%;height:min(62dvh,620px);min-height:180px;overflow:auto;border-radius:8px;background:#05080e;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.image-zoom-canvas{display:grid;place-items:center;min-width:100%;min-height:100%;margin:0 auto}
.image-zoom-canvas.lesson-diagram{margin:0;padding:0;border:0;border-radius:0;background:transparent;background-image:none;overflow:visible}
.image-zoom-canvas.lesson-diagram svg{display:block;max-width:none;height:auto;margin:0;overflow:visible}
.image-zoom-viewport img{display:block;max-width:none;max-height:none;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#05080e}
.image-zoom-controls{display:flex;align-items:center;justify-content:center;gap:8px}
.image-zoom-control{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:9px;background:var(--p2);color:var(--t);font:inherit;font-size:1rem;font-weight:750;cursor:pointer}
.image-zoom-control:hover:not(:disabled){border-color:var(--b);color:var(--b)}
.image-zoom-control:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.image-zoom-control:disabled{opacity:.45;cursor:not-allowed}
.image-zoom-fit{min-width:126px;font-size:.82rem}
.image-zoom-panel p{margin:10px 0 0;color:var(--m);font-size:.88rem;text-align:center}
.image-zoom-status{margin-top:4px;color:var(--m);font-size:.76rem}
.image-zoom-arrow{display:grid;place-items:center;width:48px;height:58px;border:1px solid var(--line);border-radius:12px;background:var(--p2);color:var(--b);font:inherit;font-size:2.2rem;line-height:1;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease}
.image-zoom-arrow:hover:not(:disabled){border-color:var(--b);background:#1a3048;color:var(--t)}
.image-zoom-arrow:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.image-zoom-arrow:disabled{opacity:.3;cursor:not-allowed}
.image-zoom-close{position:absolute;z-index:1;top:10px;right:10px;display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:#0a0f18e8;color:var(--t);font:inherit;font-size:.85rem;font-weight:750;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}
.image-zoom-close:hover{border-color:var(--b);background:var(--p2)}
.image-zoom-close:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.small-note{font-size:.86rem;color:var(--m)}
.version-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 10px}
.version-tab{min-height:42px;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:var(--p);color:var(--m);font:inherit;font-size:.88rem;font-weight:750;cursor:pointer}
.version-tab[aria-selected="true"]{border-color:var(--g);background:#10291f;color:var(--g)}
.version-tab:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.version-panel[hidden]{display:none}
.version-panel:focus-visible{outline:2px solid var(--b);outline-offset:4px}
.version-panel .tablewrap{margin-top:0}
.faq-list{display:grid;gap:14px;margin:20px 0}
.faq-item{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--p)}
.faq-item summary{display:flex;align-items:center;gap:12px;min-height:54px;padding:14px 18px;color:var(--b);font-weight:750;line-height:1.45;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary::before{content:"▸";flex:none;color:var(--b);font-size:.92rem}
.faq-item[open] summary::before{content:"▾"}
.faq-item[open] summary{border-bottom:1px solid var(--line)}
.faq-item summary:hover{background:var(--p2)}
.faq-item summary:focus-visible{outline:2px solid var(--b);outline-offset:-3px}
.faq-answer{padding:12px 20px 15px;color:var(--t);line-height:1.6}
.faq-answer p{margin:0}
@media(max-width:620px){.lesson-figure{padding:6px}.lesson-figure figcaption{font-size:.82rem}}
@media(max-width:620px){.faq-item summary{min-height:48px;padding:12px 14px}.faq-answer{padding:11px 15px 14px}}
@media(max-width:620px){.image-zoom-dialog{width:calc(100vw - 16px);max-height:96dvh;border-radius:12px}.image-zoom-panel{max-height:96dvh;padding:10px}.image-zoom-stage{grid-template-columns:40px minmax(0,1fr) 40px;gap:5px}.image-zoom-arrow{width:38px;height:48px;border-radius:10px;font-size:1.8rem}.image-zoom-viewport{height:55dvh;min-height:170px}.image-zoom-controls{gap:6px}.image-zoom-control{min-width:44px;min-height:44px;padding:6px 10px}.image-zoom-fit{min-width:118px}.image-zoom-panel p{font-size:.82rem}}

/* Interações suaves em cartões e controles, mantendo os movimentos discretos. */
.card,.step,.flowitem,.home-card,.history-item{transition:transform .22s ease,border-color .22s ease,background-color .22s ease,box-shadow .22s ease}
.card:hover,.step:hover,.flowitem:hover,.home-card:hover,.history-item:hover{transform:translateY(-3px);border-color:var(--b);box-shadow:0 10px 24px #0003}
.card:focus-within,.step:focus-within,.flowitem:focus-within,.home-card:focus-visible,.history-item:focus-within{border-color:var(--b);box-shadow:0 0 0 2px #76b8ff24}
.answer,.btn,.toc a,.version-tab,.faq-item summary,.course-back,.course-page-link,.sidebar-module>summary,.sidebar-lesson-link,.sidebar-topics a,.course-site-socials a,.lesson-watched,.lesson-star{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.faq-item summary::before{transition:transform .18s ease}
@media(prefers-reduced-motion:reduce){.card,.step,.flowitem,.home-card,.history-item,.answer,.btn,.toc a,.version-tab,.faq-item summary,.faq-item summary::before,.course-back,.course-page-link,.sidebar-module>summary,.sidebar-lesson-link,.sidebar-topics a,.course-site-socials a,.lesson-watched,.lesson-star,.image-zoom-trigger,.image-zoom-close,.image-zoom-arrow,.image-zoom-control{transition:none!important}.image-zoom-dialog[open]{animation:none}.card:hover,.step:hover,.flowitem:hover,.home-card:hover,.history-item:hover{transform:none}}