DevFullStack \u2014 Plataforma Adaptativa<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOKENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --bg:#f4f2ee;--bg2:#eceae4;--bg3:#e2dfd8;\r\n --ink:#1a1916;--ink2:#4a4840;--ink3:#8a8880;\r\n --rule:rgba(26,25,22,.1);--rule2:rgba(26,25,22,.2);\r\n --blue:#2563c4;--blue-bg:#dbeafe;--blue-bd:#93b8f5;\r\n --green:#15803d;--green-bg:#dcfce7;--green-bd:#86efac;\r\n --amber:#b45309;--amber-bg:#fef3c7;--amber-bd:#fcd34d;\r\n --rose:#be123c;--rose-bg:#ffe4e6;--rose-bd:#fda4af;\r\n --violet:#6d28d9;--violet-bg:#ede9fe;--violet-bd:#c4b5fd;\r\n --slate:#334155;--slate-bg:#f1f5f9;--slate-bd:#cbd5e1;\r\n --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;\r\n}\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nbody{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;}\r\nbody::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;\r\n background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);\r\n background-size:32px 32px;}\r\n::-webkit-scrollbar{width:5px;height:5px;}\r\n::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:3px;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 APP SWITCHER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#app-switcher{\r\n position:fixed;top:0;left:0;right:0;z-index:200;\r\n background:var(--ink);color:#fff;\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:0 40px;height:44px;\r\n border-bottom:1px solid rgba(255,255,255,.1);\r\n}\r\n.sw-logo{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.3px;}\r\n.sw-logo span{opacity:.4;}\r\n.sw-btns{display:flex;gap:2px;}\r\n.sw-btn{\r\n font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;\r\n padding:6px 16px;border-radius:6px;border:none;\r\n background:transparent;color:rgba(255,255,255,.5);cursor:pointer;transition:all .15s;\r\n}\r\n.sw-btn:hover{color:#fff;background:rgba(255,255,255,.1);}\r\n.sw-btn.active{color:#fff;background:rgba(255,255,255,.15);}\r\n.sw-tag{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.3);}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 VIEWS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.view{display:none;padding-top:44px;}\r\n.view.active{display:block;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 ARCH VIEW \u2014 light \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cover{position:relative;z-index:1;border-bottom:2px solid var(--ink);padding:40px;\r\n display:grid;grid-template-columns:1fr 1fr;gap:48px;}\r\n.cover-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;\r\n text-transform:uppercase;color:var(--ink3);margin-bottom:14px;display:flex;align-items:center;gap:10px;}\r\n.cover-eyebrow::before{content:'';display:inline-block;width:28px;height:2px;background:var(--ink3);}\r\n.cover-title{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.25;margin-bottom:10px;}\r\n.cover-subtitle{font-size:15px;color:var(--ink2);line-height:1.7;max-width:460px;}\r\n.cover-right{display:flex;flex-direction:column;gap:12px;padding-top:8px;}\r\n.cover-section-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px;}\r\n.context-card{background:white;border:1.5px solid var(--rule2);border-radius:8px;padding:14px 16px;}\r\n.context-card p{font-size:13px;color:var(--ink2);line-height:1.7;}\r\n.context-card p+p{margin-top:8px;}\r\n.context-card strong{color:var(--ink);font-weight:600;}\r\n.cover-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}\r\n.meta-chip{font-family:var(--mono);font-size:10px;padding:4px 12px;border-radius:100px;border:1px solid var(--rule2);color:var(--ink3);background:white;display:flex;align-items:center;gap:6px;}\r\n.meta-chip::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}\r\n.chip-v::before{background:var(--violet)}.chip-b::before{background:var(--blue)}\r\n.chip-g::before{background:var(--green)}.chip-s::before{background:var(--slate)}\r\n.nav-bar{position:sticky;top:44px;z-index:100;background:var(--bg);border-bottom:1px solid var(--rule2);padding:0 40px;display:flex;justify-content:space-between;align-items:center;}\r\n.tabs{display:flex;gap:0;}\r\n.tab{font-family:var(--mono);font-size:12px;font-weight:500;padding:13px 20px;cursor:pointer;border:none;background:none;color:var(--ink3);letter-spacing:.05em;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}\r\n.tab:hover{color:var(--ink)}.tab.active{color:var(--ink);border-bottom-color:var(--ink);}\r\n.nav-hint{font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\nmain{position:relative;z-index:1;}\r\n.panel{display:none;padding:40px;}.panel.active{display:block;}\r\n.section-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:20px;display:flex;align-items:center;gap:12px;}\r\n.section-label::after{content:'';flex:1;height:1px;background:var(--rule2);}\r\n.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}\r\n.arch-col{padding:24px 28px;border-right:1px solid var(--rule2);}\r\n.arch-col:last-child{border-right:none;}\r\n.arch-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding-bottom:12px;border-bottom:1px solid var(--rule2);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}\r\n.arch-title-badge{font-size:9px;padding:2px 8px;border-radius:100px;border:1px solid;font-weight:600;letter-spacing:.08em;}\r\n.badge-mvp{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}\r\n.badge-future{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.flow{display:flex;flex-direction:column;gap:0;}\r\n.node{border:1.5px solid;border-radius:6px;padding:10px 14px;position:relative;transition:transform .15s,box-shadow .15s;cursor:default;}\r\n.node:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08);}\r\n.node-title{font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.3;margin-bottom:2px;}\r\n.node-sub{font-family:var(--mono);font-size:10px;opacity:.65;line-height:1.4;}\r\n.node-badge{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:100px;border:1px solid;}\r\n.node-blue{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);}\r\n.node-green{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}\r\n.node-amber{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.node-rose{background:var(--rose-bg);border-color:var(--rose-bd);color:var(--rose);}\r\n.node-violet{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet);}\r\n.node-slate{background:var(--slate-bg);border-color:var(--slate-bd);color:var(--slate);}\r\n.node-ink{background:var(--ink);border-color:var(--ink);color:var(--bg);}\r\n.connector{display:flex;flex-direction:column;align-items:center;padding:2px 0;}\r\n.connector-line{width:1.5px;background:var(--rule2);flex:1;min-height:20px;}\r\n.connector-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--rule2);}\r\n.split{display:grid;gap:8px;}\r\n.split-2{grid-template-columns:1fr 1fr;}\r\n.split-3{grid-template-columns:1fr 1fr 1fr;}\r\n.split-4{grid-template-columns:repeat(4,1fr);}\r\n.group{border:1.5px dashed var(--rule2);border-radius:10px;padding:14px;position:relative;background:rgba(255,255,255,.4);}\r\n.group-label{position:absolute;top:-10px;left:14px;background:var(--bg);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:0 6px;}\r\n.callout{display:flex;gap:12px;padding:14px 16px;margin-bottom:24px;border-radius:8px;border:1.5px solid;font-size:13px;line-height:1.6;}\r\n.callout-amber{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.callout-violet{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet);}\r\n.callout-icon{font-size:15px;flex-shrink:0;margin-top:1px;}\r\n.callout-text{color:var(--ink2);}\r\n.callout-text strong{color:var(--ink);font-weight:600;}\r\n.feedback-loop{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-top:8px;background:transparent;border:1.5px dashed var(--rule2);border-radius:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.entities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;}\r\n.entity-card{background:white;border:1.5px solid var(--rule2);border-radius:8px;overflow:hidden;transition:box-shadow .15s;}\r\n.entity-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06);}\r\n.entity-header{padding:10px 14px;border-bottom:1px solid var(--rule2);display:flex;align-items:center;justify-content:space-between;}\r\n.entity-name{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);}\r\n.entity-pill{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:100px;border:1px solid;}\r\n.pill-existing{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);}\r\n.pill-new{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.entity-fields{padding:10px 14px;}\r\n.field-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;}\r\n.field-row:last-child{border-bottom:none;}\r\n.field-name{color:var(--ink2);flex:1;}.field-type{color:var(--ink3);font-size:10px;}\r\n.field-new .field-name{color:var(--amber);font-weight:600;}\r\n.field-new .field-name::before{content:'+ ';}\r\n.tradeoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin-bottom:32px;}\r\n.tradeoff-card{background:white;border:1.5px solid var(--rule2);border-radius:8px;padding:16px 18px;}\r\n.tradeoff-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;}\r\n.tradeoff-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}\r\n.tradeoff-item{font-size:13px;color:var(--ink2);line-height:1.65;padding:5px 0;border-bottom:1px solid var(--rule);display:flex;gap:8px;}\r\n.tradeoff-item:last-child{border-bottom:none;}\r\n.tradeoff-item::before{flex-shrink:0;margin-top:2px;font-size:11px;}\r\n.tradeoff-in::before{content:'\u2713';color:var(--green);}\r\n.tradeoff-out::before{content:'\u2715';color:var(--rose);}\r\n.premise-list{display:flex;flex-direction:column;gap:8px;max-width:740px;}\r\n.premise-item{display:flex;gap:14px;padding:12px 16px;background:white;border:1.5px solid var(--rule2);border-radius:6px;}\r\n.premise-id{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink3);min-width:24px;}\r\n.premise-text{font-size:13px;color:var(--ink2);line-height:1.6;}\r\n.premise-text strong{color:var(--ink);font-weight:600;}\r\n.premise-text code{font-family:var(--mono);font-size:11px;background:var(--bg2);padding:1px 5px;border-radius:3px;color:var(--ink2);}\r\n.legend{display:flex;flex-wrap:wrap;gap:16px;padding:14px 40px;border-top:1px solid var(--rule2);background:var(--bg2);position:sticky;bottom:0;z-index:10;}\r\n.legend-item{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.legend-dot{width:10px;height:10px;border-radius:3px;border:1.5px solid;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 STUDENT VIEW \u2014 dark \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#view-student{background:#0a0a0f;color:#e8e8f0;min-height:100vh;}\r\n#view-student::before{display:none;}\r\n.s-topbar{\r\n position:sticky;top:44px;z-index:100;\r\n background:#0a0a0f;border-bottom:1px solid rgba(255,255,255,.07);\r\n padding:12px 32px;display:flex;align-items:center;gap:20px;\r\n}\r\n.s-back{font-family:'DM Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);\r\n background:none;border:1px solid rgba(255,255,255,.1);border-radius:6px;\r\n padding:5px 12px;cursor:pointer;transition:all .15s;white-space:nowrap;}\r\n.s-back:hover{color:#fff;border-color:rgba(255,255,255,.25);}\r\n.s-stepper{display:flex;align-items:center;gap:0;flex:1;justify-content:center;}\r\n.s-step-item{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;color:rgba(255,255,255,.35);}\r\n.s-step-item.active{color:#c4b5fd;}\r\n.s-step-item.done{color:#4ade80;}\r\n.s-step-circle{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;}\r\n.s-step-item.active .s-step-circle{background:#6c63ff;border-color:#6c63ff;color:#fff;}\r\n.s-step-item.done .s-step-circle{background:#15803d;border-color:#15803d;color:#fff;}\r\n.s-step-sep{width:32px;height:1px;background:rgba(255,255,255,.1);margin:0 4px;}\r\n.s-ai-badge{font-family:'DM Mono',monospace;font-size:10px;color:#2dd4bf;\r\n background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.2);\r\n border-radius:100px;padding:4px 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;}\r\n.s-ai-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#2dd4bf;animation:pulse 2s infinite;}\r\n@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}\r\n\r\n.s-panel{display:none;min-height:calc(100vh - 96px);}\r\n.s-panel.active{display:flex;}\r\n\r\n\/* STEP 1 \u2014 CHAT *\/\r\n.chat-layout{display:grid;grid-template-columns:260px 1fr;width:100%;height:calc(100vh - 96px);}\r\n.chat-sidebar{background:#111118;border-right:1px solid rgba(255,255,255,.07);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}\r\n.chat-sidebar-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:0 4px;margin-bottom:4px;}\r\n.proj-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .2s;}\r\n.proj-card:hover{border-color:rgba(108,99,255,.4);background:rgba(108,99,255,.06);}\r\n.proj-card.sel{border-color:rgba(108,99,255,.5);background:rgba(108,99,255,.08);}\r\n.proj-card h4{font-family:'Syne',sans-serif;font-size:13px;font-weight:600;color:#e8e8f0;margin-bottom:3px;}\r\n.proj-card p{font-size:11px;color:#5a5a70;line-height:1.4;}\r\n.chat-main{display:flex;flex-direction:column;background:#0a0a0f;}\r\n.chat-header{padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;}\r\n.chat-header h2{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;}\r\n.messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:16px;}\r\n.msg{display:flex;gap:12px;animation:msgIn .3s ease both;}\r\n@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\r\n.msg.user{flex-direction:row-reverse;}\r\n.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:'Syne',sans-serif;}\r\n.avatar.ai{background:linear-gradient(135deg,#6c63ff,#9d78ff);color:#fff;}\r\n.avatar.user{background:#1e1e28;border:1px solid rgba(255,255,255,.12);color:#9191a8;}\r\n.bubble{max-width:500px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:14px;border-top-left-radius:4px;padding:12px 16px;font-size:13px;line-height:1.65;color:#e8e8f0;}\r\n.msg.user .bubble{background:rgba(108,99,255,.12);border-color:rgba(108,99,255,.25);border-radius:14px;border-top-right-radius:4px;}\r\n.bubble strong{color:#c4b5fd;font-weight:500;}\r\n.bubble .tag{display:inline-block;background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.25);border-radius:6px;padding:1px 7px;font-size:11px;font-family:'DM Mono',monospace;color:#c4b5fd;margin:1px 2px;}\r\n.quick-replies{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}\r\n.qr{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:5px 12px;font-size:11px;color:#9191a8;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;}\r\n.qr:hover{border-color:rgba(108,99,255,.4);color:#c4b5fd;background:rgba(108,99,255,.06);}\r\n.typing{display:flex;gap:4px;align-items:center;padding:2px 0;}\r\n.typing-dot{width:5px;height:5px;border-radius:50%;background:#5a5a70;animation:typing 1.2s infinite;}\r\n.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}\r\n@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}\r\n.plan-ready-btn{display:inline-flex;align-items:center;gap:8px;background:#6c63ff;color:#fff;border:none;border-radius:100px;padding:10px 20px;font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-top:10px;transition:all .2s;}\r\n.plan-ready-btn:hover{background:#9d78ff;transform:translateY(-1px);}\r\n.chat-input-area{padding:16px 28px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:10px;align-items:flex-end;}\r\n.chat-input{flex:1;background:#18181f;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 14px;color:#e8e8f0;font-family:'DM Sans',sans-serif;font-size:13px;resize:none;outline:none;transition:border-color .2s;min-height:42px;max-height:120px;}\r\n.chat-input:focus{border-color:rgba(108,99,255,.4);}\r\n.chat-input::placeholder{color:#5a5a70;}\r\n.send-btn{width:40px;height:40px;border-radius:50%;background:#6c63ff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;color:#fff;font-size:16px;}\r\n.send-btn:hover{background:#9d78ff;transform:scale(1.05);}\r\n\r\n\/* STEP 2 \u2014 PLAN *\/\r\n.plan-layout{display:grid;grid-template-columns:1fr 280px;width:100%;}\r\n.plan-content{padding:32px 36px;overflow-y:auto;}\r\n.plan-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#2dd4bf;margin-bottom:8px;}\r\n.plan-title{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;color:#e8e8f0;}\r\n.plan-sub{color:#9191a8;font-size:13px;margin-bottom:28px;}\r\n.module-title{font-family:'DM Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5a5a70;margin-bottom:10px;display:flex;align-items:center;gap:10px;}\r\n.module-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06);}\r\n.lesson-row{display:flex;align-items:center;gap:12px;background:#111118;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 16px;margin-bottom:6px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}\r\n.lesson-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:transparent;transition:background .2s;}\r\n.lesson-row:hover{border-color:rgba(255,255,255,.12);background:#18181f;}\r\n.lesson-row:hover::before{background:#6c63ff;}\r\n.lesson-row.cat::before{background:#2dd4bf;}\r\n.lesson-row.ai-gen::before{background:#f97316;}\r\n.lesson-num{width:24px;height:24px;border-radius:6px;background:#1e1e28;border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:10px;color:#5a5a70;flex-shrink:0;}\r\n.lesson-info{flex:1;}\r\n.lesson-title-text{font-size:13px;font-weight:500;color:#e8e8f0;margin-bottom:2px;}\r\n.lesson-meta-text{font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;}\r\n.vbadges{display:flex;gap:3px;}\r\n.vbadge{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:'DM Mono',monospace;border:1px solid rgba(255,255,255,.07);color:#5a5a70;}\r\n.vbadge.v{background:rgba(108,99,255,.1);color:#c4b5fd;border-color:rgba(108,99,255,.2);}\r\n.vbadge.t{background:rgba(45,212,191,.08);color:#2dd4bf;border-color:rgba(45,212,191,.2);}\r\n.vbadge.h{background:rgba(249,115,22,.08);color:#f97316;border-color:rgba(249,115,22,.2);}\r\n.src-badge{font-family:'DM Mono',monospace;font-size:9px;font-weight:600;padding:2px 8px;border-radius:6px;flex-shrink:0;}\r\n.src-cat{background:rgba(45,212,191,.1);color:#2dd4bf;border:1px solid rgba(45,212,191,.2);}\r\n.src-ai{background:rgba(249,115,22,.1);color:#f97316;border:1px solid rgba(249,115,22,.2);}\r\n.src-gen{background:rgba(255,255,255,.05);color:#5a5a70;border:1px solid rgba(255,255,255,.07);animation:shimmer 1.5s infinite;}\r\n@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.4}}\r\n.plan-start-btn{display:inline-flex;align-items:center;gap:8px;background:#6c63ff;color:#fff;border:none;border-radius:100px;padding:12px 24px;font-family:'Syne',sans-serif;font-size:14px;font-weight:600;cursor:pointer;margin-top:20px;transition:all .2s;}\r\n.plan-start-btn:hover{background:#9d78ff;transform:translateY(-1px);}\r\n.plan-sidebar{background:#111118;border-left:1px solid rgba(255,255,255,.07);padding:24px 18px;overflow-y:auto;}\r\n.stat-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px 16px;margin-bottom:10px;}\r\n.stat-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5a70;margin-bottom:4px;}\r\n.stat-val{font-family:'Syne',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.5px;}\r\n.stat-unit{font-size:12px;font-weight:400;color:#9191a8;margin-left:4px;}\r\n.prog-track{background:#1e1e28;border-radius:3px;height:4px;margin-top:6px;overflow:hidden;}\r\n.prog-fill{height:100%;border-radius:3px;transition:width 1s ease;}\r\n\r\n\/* STEP 3 \u2014 LESSON *\/\r\n.lesson-layout{display:grid;grid-template-columns:1fr 280px;width:100%;}\r\n.lesson-main{display:flex;flex-direction:column;overflow-y:auto;}\r\n.lesson-topbar{padding:16px 32px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}\r\n.breadcrumb{font-size:12px;color:#5a5a70;display:flex;align-items:center;gap:6px;}\r\n.breadcrumb span{color:#9191a8;}\r\n.breadcrumb a{color:#c4b5fd;cursor:pointer;text-decoration:none;}\r\n.adaptive-badge{display:flex;align-items:center;gap:5px;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.2);border-radius:100px;padding:4px 10px;font-family:'DM Mono',monospace;font-size:10px;color:#c4b5fd;}\r\n.adaptive-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#6c63ff;animation:pulse 2s infinite;}\r\n.fmt-switcher{display:flex;gap:3px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:3px;margin-left:auto;}\r\n.fmt-btn{padding:5px 12px;border-radius:5px;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;color:#5a5a70;cursor:pointer;transition:all .2s;}\r\n.fmt-btn.active{background:#6c63ff;color:#fff;box-shadow:0 2px 8px rgba(108,99,255,.3);}\r\n.fmt-btn:not(.active):hover{color:#e8e8f0;background:#1e1e28;}\r\n.fmt-content{flex:1;}\r\n.video-wrap{margin:24px 32px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;}\r\n.video-screen{aspect-ratio:16\/9;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}\r\n.play-circle{width:60px;height:60px;border-radius:50%;background:rgba(108,99,255,.9);display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-direction:column;}\r\n.play-circle:hover{transform:scale(1.1);}\r\n.video-overlay-title{font-size:12px;color:#9191a8;margin-top:8px;}\r\n#vid-playing{display:none;flex-direction:column;align-items:center;gap:10px;width:100%;padding:20px;}\r\n.vid-progress-wrap{width:200px;height:3px;background:#1e1e28;border-radius:2px;}\r\n.vid-progress-fill{height:100%;background:#6c63ff;border-radius:2px;width:0%;transition:width .1s linear;}\r\n.vid-time{font-family:'DM Mono',monospace;font-size:11px;color:#5a5a70;}\r\n.video-controls{padding:12px 18px;display:flex;align-items:center;gap:12px;}\r\n.ctrl-btn{background:none;border:none;color:#9191a8;cursor:pointer;transition:color .2s;padding:3px;display:flex;align-items:center;font-size:16px;}\r\n.ctrl-btn:hover{color:#e8e8f0;}\r\n.prog-track-v{flex:1;height:3px;background:#1e1e28;border-radius:2px;cursor:pointer;}\r\n.prog-fill-v{height:100%;background:#6c63ff;border-radius:2px;width:0%;transition:width .1s;}\r\n.time-label{font-family:'DM Mono',monospace;font-size:10px;color:#5a5a70;}\r\n.text-content{padding:24px 40px;max-width:720px;}\r\n.text-content h3{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:14px;color:#e8e8f0;}\r\n.text-content p{color:#9191a8;line-height:1.8;margin-bottom:14px;font-size:13px;}\r\n.code-block{background:#0d1117;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:18px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;margin:18px 0;overflow-x:auto;color:#a9dc76;}\r\n.kw{color:#ff6188}.fn{color:#a9dc76}.str{color:#ffd866}.cm{color:#5a5a70;font-style:italic;}\r\n.h5p-wrap{margin:24px 32px;background:#111118;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;}\r\n.h5p-hdr{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px;}\r\n.h5p-badge{background:rgba(249,115,22,.15);color:#f97316;border:1px solid rgba(249,115,22,.25);border-radius:5px;padding:2px 7px;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;}\r\n.h5p-type{font-family:'DM Mono',monospace;font-size:10px;color:#5a5a70;margin-left:auto;}\r\n.quiz-body{padding:24px 28px;}\r\n.quiz-q{font-family:'Syne',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.2px;margin-bottom:6px;color:#e8e8f0;}\r\n.quiz-sub{font-size:12px;color:#5a5a70;font-family:'DM Mono',monospace;margin-bottom:22px;}\r\n.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}\r\n.quiz-opt{display:flex;align-items:center;gap:12px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 16px;cursor:pointer;transition:all .2s;font-size:13px;color:#e8e8f0;}\r\n.quiz-opt:hover{border-color:rgba(108,99,255,.4);background:rgba(108,99,255,.05);}\r\n.quiz-opt.sel{border-color:#6c63ff;background:rgba(108,99,255,.1);}\r\n.quiz-opt.correct{border-color:#4ade80;background:rgba(74,222,128,.08);color:#4ade80;}\r\n.quiz-opt.wrong{border-color:#f43f5e;background:rgba(244,63,94,.08);color:#f43f5e;}\r\n.opt-letter{width:26px;height:26px;border-radius:7px;background:#1e1e28;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;flex-shrink:0;transition:all .2s;}\r\n.quiz-opt.sel .opt-letter{background:#6c63ff;border-color:#6c63ff;color:#fff;}\r\n.quiz-opt.correct .opt-letter{background:#4ade80;border-color:#4ade80;color:#000;}\r\n.quiz-opt.wrong .opt-letter{background:#f43f5e;border-color:#f43f5e;color:#fff;}\r\n.quiz-fb{padding:12px 16px;border-radius:10px;font-size:13px;display:none;margin-bottom:14px;}\r\n.quiz-fb.show{display:block;}\r\n.quiz-fb.ok{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);color:#4ade80;}\r\n.quiz-fb.err{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.2);color:#f87171;}\r\n.quiz-action-btn{display:inline-flex;align-items:center;gap:8px;background:#6c63ff;color:#fff;border:none;border-radius:100px;padding:9px 20px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;}\r\n.quiz-action-btn:hover{background:#9d78ff;}\r\n\r\n\/* lesson sidebar *\/\r\n.lesson-sidebar{background:#111118;border-left:1px solid rgba(255,255,255,.07);padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;}\r\n.ls-section-title{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5a70;margin-bottom:10px;}\r\n.profile-ring-row{display:flex;align-items:center;gap:12px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px;}\r\n.ring-wrap{position:relative;width:50px;height:50px;flex-shrink:0;}\r\n.ring-wrap svg{transform:rotate(-90deg);}\r\n.ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#c4b5fd;}\r\n.profile-info .pname{font-size:12px;font-weight:500;color:#e8e8f0;margin-bottom:2px;}\r\n.profile-info .ppref{font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;}\r\n.ret-row{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:6px;}\r\n.ret-label{width:44px;color:#9191a8;font-family:'DM Mono',monospace;font-size:10px;}\r\n.ret-track{flex:1;height:3px;background:#1e1e28;border-radius:2px;}\r\n.ret-fill{height:100%;border-radius:2px;transition:width 1s ease;}\r\n.ret-pct{width:28px;text-align:right;font-family:'DM Mono',monospace;font-size:9px;color:#5a5a70;}\r\n.event-item{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:#5a5a70;line-height:1.4;margin-bottom:6px;}\r\n.event-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:2px;}\r\n.next-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px;}\r\n.next-lbl{font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#5a5a70;margin-bottom:4px;}\r\n.next-title{font-size:12px;font-weight:500;color:#e8e8f0;margin-bottom:3px;}\r\n.next-meta{font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;}\r\n.done-btn{width:100%;background:#6c63ff;color:#fff;border:none;border-radius:8px;padding:10px;font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-top:6px;transition:all .2s;}\r\n.done-btn:hover{background:#9d78ff;}\r\n\r\n\/* STEP 4 \u2014 PROFILE *\/\r\n.profile-screen{display:flex;align-items:center;justify-content:center;width:100%;padding:40px;}\r\n.profile-card{background:#111118;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:40px;max-width:580px;width:100%;text-align:center;}\r\n.check-anim{width:64px;height:64px;border-radius:50%;background:rgba(74,222,128,.1);border:2px solid #4ade80;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;animation:checkBounce .6s ease both;}\r\n@keyframes checkBounce{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}\r\n.profile-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.5px;color:#e8e8f0;margin-bottom:4px;}\r\n.profile-sub{font-size:13px;color:#9191a8;margin-bottom:28px;}\r\n.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;}\r\n.s-stat{padding:14px;border-radius:10px;border:1px solid;}\r\n.s-stat-n{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.5px;}\r\n.s-stat-l{font-size:10px;font-family:'DM Mono',monospace;margin-top:2px;opacity:.7;}\r\n.profile-learn-title{font-size:13px;font-weight:600;color:#e8e8f0;margin-bottom:14px;text-align:left;}\r\n.next-lesson-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px;margin-top:20px;text-align:left;}\r\n.back-plan-link{font-size:12px;color:#6c63ff;cursor:pointer;display:block;text-align:center;margin-top:12px;font-family:'DM Mono',monospace;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PROFESSOR VIEW \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#view-prof{background:var(--bg);min-height:100vh;}\r\n.p-header{position:sticky;top:44px;z-index:100;background:var(--bg);border-bottom:2px solid var(--ink);padding:0 40px;display:flex;align-items:center;gap:0;}\r\n.p-logo{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);margin-right:24px;white-space:nowrap;}\r\n.p-logo span{opacity:.35;}\r\n.p-tabs{display:flex;gap:0;flex:1;}\r\n.p-tab{font-family:var(--mono);font-size:12px;font-weight:500;padding:14px 18px;cursor:pointer;border:none;background:none;color:var(--ink3);letter-spacing:.05em;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;}\r\n.p-tab:hover{color:var(--ink)}.p-tab.active{color:var(--ink);border-bottom-color:var(--ink);}\r\n.p-back{font-family:var(--mono);font-size:11px;color:var(--ink3);background:none;border:1px solid var(--rule2);border-radius:6px;padding:5px 12px;cursor:pointer;transition:all .15s;white-space:nowrap;}\r\n.p-back:hover{color:var(--ink);border-color:var(--rule2);}\r\n.p-panel{display:none;padding:36px 40px;}.p-panel.active{display:block;}\r\n.p-section{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px;display:flex;align-items:center;gap:12px;}\r\n.p-section::after{content:'';flex:1;height:1px;background:var(--rule2);}\r\n.p-metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:32px;}\r\n.p-metric{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:16px;border-left:4px solid;}\r\n.p-metric-n{font-family:'Syne',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1;}\r\n.p-metric-l{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-top:4px;}\r\n.p-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px;}\r\n.p-card{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:20px;}\r\n.p-card-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--ink2);margin-bottom:14px;}\r\n.donut-row{display:flex;align-items:center;gap:20px;}\r\n.donut-legend{display:flex;flex-direction:column;gap:8px;flex:1;}\r\n.donut-legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);}\r\n.donut-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}\r\n.donut-pct{font-family:var(--mono);font-size:11px;font-weight:600;margin-left:auto;}\r\n.ret-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}\r\n.ret-bar-label{width:48px;font-family:var(--mono);font-size:11px;color:var(--ink3);}\r\n.ret-bar-track{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;}\r\n.ret-bar-fill{height:100%;border-radius:3px;transition:width 1.2s ease;}\r\n.ret-bar-pct{width:36px;text-align:right;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);}\r\n.p-table{width:100%;border-collapse:collapse;font-size:12px;}\r\n.p-table thead th{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);text-align:left;padding:8px 12px;border-bottom:1.5px solid var(--rule2);}\r\n.p-table tbody tr{border-bottom:1px solid var(--rule);cursor:pointer;transition:background .15s;}\r\n.p-table tbody tr:hover{background:var(--bg2);}\r\n.p-table td{padding:10px 12px;color:var(--ink2);}\r\n.p-status{display:flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);}\r\n.p-status.ok::before{content:'\u25cf';color:var(--green);}\r\n.p-status.warn::before{content:'\u25b2';color:var(--amber);}\r\n.p-status.star::before{content:'\u2605';color:var(--violet);}\r\n\/* profiles tab *\/\r\n.p-filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}\r\n.p-select{font-family:var(--mono);font-size:11px;border:1.5px solid var(--rule2);border-radius:6px;padding:6px 10px;background:white;color:var(--ink2);cursor:pointer;outline:none;}\r\n.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}\r\n.student-card{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:16px;transition:box-shadow .15s;cursor:pointer;}\r\n.student-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06);}\r\n.stu-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}\r\n.stu-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}\r\n.stu-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;}\r\n.stu-proj{font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.stu-fmt-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 8px;border-radius:100px;border:1px solid;margin-left:auto;}\r\n.stu-weak{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;}\r\n.weak-chip{font-size:10px;font-family:var(--mono);padding:2px 8px;border-radius:4px;background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--amber);}\r\n.stu-stats{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);}\r\n.stu-stat-item{text-align:center;}\r\n.stu-stat-v{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--ink);}\r\n.stu-stat-l{font-family:var(--mono);font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;}\r\n\/* overlay *\/\r\n.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;}\r\n.overlay.open{display:flex;justify-content:flex-end;}\r\n.drawer{background:white;width:440px;height:100%;overflow-y:auto;padding:28px;box-shadow:-4px 0 24px rgba(0,0,0,.1);position:relative;padding-top:calc(44px + 28px);}\r\n.drawer-close{position:absolute;top:calc(44px + 14px);right:20px;background:none;border:1.5px solid var(--rule2);border-radius:6px;padding:4px 10px;font-family:var(--mono);font-size:11px;cursor:pointer;color:var(--ink3);}\r\n.drawer-close:hover{color:var(--ink);}\r\n.drawer-name{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:3px;}\r\n.drawer-proj{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:16px;}\r\n.drawer-interp{background:var(--slate-bg);border:1.5px solid var(--slate-bd);border-radius:8px;padding:14px;margin-bottom:20px;font-size:12px;color:var(--ink2);line-height:1.7;}\r\n.delivery-table{width:100%;font-size:11px;font-family:var(--mono);border-collapse:collapse;}\r\n.delivery-table th{text-align:left;color:var(--ink3);padding:5px 8px;border-bottom:1px solid var(--rule2);font-size:10px;}\r\n.delivery-table td{padding:6px 8px;border-bottom:1px solid var(--rule);color:var(--ink2);}\r\n\/* catalog tab *\/\r\n.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;}\r\n.cat-card{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:16px;}\r\n.cat-name{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}\r\n.cat-total{font-size:10px;color:var(--ink3);}\r\n.stacked-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;gap:0;margin-bottom:6px;}\r\n.stacked-seg{height:100%;transition:width 1s ease;}\r\n.cat-detail{display:flex;gap:12px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.cat-detail span.orig{color:var(--blue);}\r\n.cat-detail span.iai{color:var(--amber);}\r\n.gen-timeline{display:flex;flex-direction:column;gap:10px;}\r\n.tl-item{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:14px 16px;transition:box-shadow .15s;}\r\n.tl-item:hover{box-shadow:0 3px 12px rgba(0,0,0,.06);}\r\n.tl-row1{display:flex;align-items:center;gap:10px;margin-bottom:6px;}\r\n.tl-icon{font-size:14px;}\r\n.tl-title{font-size:13px;font-weight:600;color:var(--ink);flex:1;}\r\n.tl-badges{display:flex;gap:5px;flex-wrap:wrap;}\r\n.tl-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;border:1px solid;}\r\n.tl-ready{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}\r\n.tl-gen{background:var(--slate-bg);border-color:var(--slate-bd);color:var(--slate);animation:shimmer 1.5s infinite;}\r\n.tl-new{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet);}\r\n.tl-var{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);}\r\n.tl-row2{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.tl-ret-bar{flex:1;height:3px;background:var(--bg2);border-radius:2px;overflow:hidden;}\r\n.tl-ret-fill{height:100%;border-radius:2px;}\r\n\/* formula modal *\/\r\n.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;align-items:center;justify-content:center;}\r\n.modal-backdrop.open{display:flex;}\r\n.modal-box{background:white;border-radius:14px;padding:28px;max-width:620px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.15);}\r\n.modal-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;}\r\n.modal-sub{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:20px;}\r\n.modal-card{background:var(--bg2);border:1.5px solid var(--rule2);border-radius:8px;padding:14px;margin-bottom:14px;}\r\n.modal-card-title{font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:10px;}\r\n.formula-block{background:white;border:1px solid var(--rule2);border-radius:6px;padding:12px;font-family:var(--mono);font-size:11px;color:var(--ink2);line-height:1.8;}\r\n.formula-block .hl{color:var(--violet);font-weight:600;}\r\n.info-btn{font-family:var(--mono);font-size:10px;color:var(--ink3);background:none;border:1px solid var(--rule2);border-radius:100px;padding:3px 10px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px;}\r\n.info-btn:hover{color:var(--ink);border-color:var(--rule2);}\r\n.modal-close{display:block;margin:20px auto 0;background:var(--ink);color:var(--bg);border:none;border-radius:8px;padding:10px 24px;font-family:var(--mono);font-size:12px;cursor:pointer;}\r\n\/* toast *\/\r\n.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:#1a1916;color:#e8e8f0;border-radius:100px;padding:9px 18px;font-family:'DM Mono',monospace;font-size:12px;opacity:0;transition:all .3s;z-index:500;white-space:nowrap;border:1px solid rgba(255,255,255,.1);}\r\n.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"app-switcher\">\r\n <div class=\"sw-logo\">Dev<span>FullStack<\/span><\/div>\r\n <div class=\"sw-btns\">\r\n <button class=\"sw-btn active\" onclick=\"switchView('arch',this)\">Arquitetura<\/button>\r\n <button class=\"sw-btn\" onclick=\"switchView('student',this)\">Vis\u00e3o do Aluno<\/button>\r\n <button class=\"sw-btn\" onclick=\"switchView('prof',this)\">Dashboard do Professor<\/button>\r\n <\/div>\r\n <div class=\"sw-tag\">Desafio T\u00e9cnico \u00b7 V1 \u00b7 2025<\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"view-arch\" class=\"view active\">\r\n<div class=\"cover\">\r\n <div class=\"cover-left\">\r\n <div class=\"cover-eyebrow\">Processo Seletivo \u00b7 Etapa 2<\/div>\r\n <div class=\"cover-title\">Desafio T\u00e9cnico<br>DevFullStack<\/div>\r\n <p class=\"cover-subtitle\">Proposta de nova arquitetura para uma plataforma de e-learning baseada em aprendizado por projetos, com gera\u00e7\u00e3o de cursos personalizados via IA e camada adaptativa de conte\u00fado.<\/p>\r\n <div class=\"cover-meta\">\r\n <span class=\"meta-chip chip-v\">Novo fluxo com IA<\/span>\r\n <span class=\"meta-chip chip-b\">Existente preservado<\/span>\r\n <span class=\"meta-chip chip-g\">Time pequeno \u00b7 V1<\/span>\r\n <span class=\"meta-chip chip-s\">Evolu\u00e7\u00e3o incremental<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cover-right\">\r\n <div class=\"cover-section-title\">Contexto do problema<\/div>\r\n <div class=\"context-card\">\r\n <p>A <strong>DevFullStack<\/strong> possui hoje ~1.200 aulas organizadas em forma\u00e7\u00f5es fixas. O sistema atual funciona bem, mas \u00e9 gen\u00e9rico \u2014 o aluno escolhe uma trilha pr\u00e9-definida.<\/p>\r\n <p>A proposta adiciona um <strong>novo modo por projetos<\/strong>: o aluno conversa com uma IA, define um projeto pr\u00f3prio e a plataforma monta um curso personalizado do zero ao deploy.<\/p>\r\n <\/div>\r\n <div class=\"cover-section-title\" style=\"margin-top:4px\">Regra central<\/div>\r\n <div class=\"context-card\">\r\n <p><strong>Se j\u00e1 existe uma aula no cat\u00e1logo \u2192 reutiliza.<\/strong> Se n\u00e3o existe \u2192 a IA gera e salva no cat\u00e1logo para os pr\u00f3ximos alunos.<\/p>\r\n <p>O sistema de forma\u00e7\u00f5es fixas <strong>continua funcionando sem altera\u00e7\u00f5es.<\/strong><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"nav-bar\">\r\n <div class=\"tabs\">\r\n <button class=\"tab active\" onclick=\"showTab('arch','arch')\">Arquitetura<\/button>\r\n <button class=\"tab\" onclick=\"showTab('arch','entities')\">Entidades<\/button>\r\n <button class=\"tab\" onclick=\"showTab('arch','tradeoffs')\">Trade-offs<\/button>\r\n <button class=\"tab\" onclick=\"showTab('arch','premises')\">Premissas<\/button>\r\n <\/div>\r\n <span class=\"nav-hint\">Navegue pelas abas<\/span>\r\n<\/div>\r\n<main>\r\n<div class=\"panel active\" id=\"tab-arch\">\r\n <div class=\"arch-grid\">\r\n <div class=\"arch-col\">\r\n <div class=\"arch-title\">Fluxo principal <span class=\"arch-title-badge badge-mvp\">MVP \u00b7 V1<\/span><\/div>\r\n <div class=\"flow\">\r\n <div class=\"split split-2\" style=\"margin-bottom:0\">\r\n <div class=\"node node-slate\"><div class=\"node-title\">Frontend Web<\/div><div class=\"node-sub\">interface existente<\/div><\/div>\r\n <div class=\"node node-slate\"><div class=\"node-title\">App Mobile<\/div><div class=\"node-sub\">interface existente<\/div><\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:14px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-ink\"><div class=\"node-title\">API REST \u00b7 Backend Serverless<\/div><div class=\"node-sub\" style=\"color:rgba(255,255,255,.5)\">ponto de entrada \u00fanico \u2014 existente, sem altera\u00e7\u00e3o<\/div><\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:4px 0\">\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:14px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"connector\" style=\"position:relative\">\r\n <div class=\"connector-line\" style=\"min-height:14px;background:var(--violet-bd)\"><\/div>\r\n <div class=\"connector-arrow\" style=\"border-top-color:var(--violet-bd)\"><\/div>\r\n <span style=\"position:absolute;top:50%;transform:translateY(-50%);right:-24px;font-family:var(--mono);font-size:9px;color:var(--violet);background:var(--bg);padding:1px 5px;border:1px solid var(--violet-bd);border-radius:4px;white-space:nowrap\">novo fluxo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"split split-2\" style=\"margin-bottom:0\">\r\n <div class=\"node node-blue\"><div class=\"node-title\">Servi\u00e7os existentes<\/div><div class=\"node-sub\">Forma\u00e7\u00f5es fixas \u00b7 aulas \u00b7 LessonDone<\/div><span class=\"node-badge\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">intacto<\/span><\/div>\r\n <div class=\"group\"><div class=\"group-label\">Orquestrador IA \u2014 novo<\/div>\r\n <div class=\"flow\">\r\n <div class=\"node node-violet\" style=\"margin-bottom:6px\"><div class=\"node-title\">Chat com IA<\/div><div class=\"node-sub\">Aluno descreve o projeto desejado<\/div><\/div>\r\n <div class=\"connector\" style=\"align-items:flex-start;padding-left:50%\"><div class=\"connector-line\" style=\"min-height:8px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-violet\" style=\"margin-bottom:6px\"><div class=\"node-title\">Gerador de plano<\/div><div class=\"node-sub\">Decomp\u00f5e em t\u00f3picos necess\u00e1rios<\/div><\/div>\r\n <div class=\"connector\" style=\"align-items:flex-start;padding-left:50%\"><div class=\"connector-line\" style=\"min-height:8px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-amber\" style=\"margin-bottom:6px\"><div class=\"node-title\">Aula existe no cat\u00e1logo?<\/div><\/div>\r\n <div class=\"split split-2\" style=\"gap:6px\">\r\n <div class=\"node node-green\"><div class=\"node-title\" style=\"font-size:12px\">Reutilizar<\/div><div class=\"node-sub\">~70% dos casos<\/div><\/div>\r\n <div class=\"node node-rose\"><div class=\"node-title\" style=\"font-size:12px\">Gerar com IA<\/div><div class=\"node-sub\">salva no cat\u00e1logo<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:14px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-blue\"><div class=\"node-title\">CoursePlan personalizado<\/div><div class=\"node-sub\">mesmo modelo das forma\u00e7\u00f5es fixas \u2014 type: custom<\/div><span class=\"node-badge\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">sa\u00edda<\/span><\/div>\r\n <\/div>\r\n <div style=\"margin-top:20px\">\r\n <div class=\"section-label\">Infraestrutura<\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:10px\">\r\n <div class=\"group\"><div class=\"group-label\">Google Cloud SQL \u00b7 Postgres<\/div><div style=\"margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);line-height:2\">Lessons \u00b7 Users \u00b7 LessonDone<br>CoursePlan \u00b7 CoursePlanLesson<br>ProjectConversation<\/div><\/div>\r\n <div class=\"group\"><div class=\"group-label\">S3 + Job ass\u00edncrono<\/div><div style=\"margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);line-height:2\">Arquivos das aulas<br><span style=\"color:var(--rose);font-weight:600\">Worker \u2192 LLM externo<\/span><br>Cloud Tasks \/ SQS<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"arch-col\">\r\n <div class=\"arch-title\">Camada adaptativa <span class=\"arch-title-badge badge-future\">Evolu\u00e7\u00e3o futura<\/span><\/div>\r\n <div class=\"callout callout-amber\"><div class=\"callout-icon\">\u25ce<\/div><div class=\"callout-text\">Esta camada <strong>n\u00e3o \u00e9 parte do MVP<\/strong>. A arquitetura atual j\u00e1 a suporta sem retrabalho \u2014 entra quando tivermos dados reais de uso.<\/div><\/div>\r\n <div class=\"flow\">\r\n <div class=\"node node-blue\"><div class=\"node-title\">Coleta de sinais \u2014 comportamento impl\u00edcito<\/div><div class=\"node-sub\">sem perguntar ao aluno \u00b7 tudo observado passivamente<\/div><\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:10px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"split split-4\" style=\"margin-bottom:0\">\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Tempo<\/div><div class=\"node-sub\">dura\u00e7\u00e3o \u00b7 scroll<\/div><\/div>\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Replays<\/div><div class=\"node-sub\">trechos revisitados<\/div><\/div>\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Quiz<\/div><div class=\"node-sub\">acertos \u00b7 tempo<\/div><\/div>\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Formato<\/div><div class=\"node-sub\">v\u00eddeo\/texto\/H5P<\/div><\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:12px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-green\"><div class=\"node-title\">LearnerProfile \u2014 perfil do aluno<\/div><div class=\"node-sub\">prefer\u00eancia \u00b7 reten\u00e7\u00e3o por formato \u00b7 t\u00f3picos fracos \u00b7 job peri\u00f3dico<\/div><\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:12px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-rose\"><div class=\"node-title\">Seletor de variante<\/div><div class=\"node-sub\">regra simples V2 \u2192 recomenda\u00e7\u00e3o ML no futuro<\/div><\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:10px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"split split-3\" style=\"margin-bottom:0\">\r\n <div class=\"node node-blue\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:12px\">V\u00eddeo<\/div><div class=\"node-sub\">S3<\/div><\/div>\r\n <div class=\"node node-blue\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:12px\">Texto<\/div><div class=\"node-sub\">markdown<\/div><\/div>\r\n <div class=\"node node-blue\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:12px\">H5P<\/div><div class=\"node-sub\">interativo<\/div><\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:12px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-rose\"><div class=\"node-title\">Player de aula \u2014 Frontend<\/div><\/div>\r\n <div class=\"feedback-loop\">\u21bb cada aula retroalimenta o LearnerProfile \u2014 ciclo cont\u00ednuo<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"panel\" id=\"tab-entities\">\r\n <div class=\"callout callout-violet\" style=\"max-width:860px\"><div class=\"callout-icon\">\u25c8<\/div><div class=\"callout-text\">Entidades <strong>existentes<\/strong> s\u00e3o preservadas. Campos novos em <strong style=\"color:var(--amber)\">+<\/strong> laranja. Entidades <strong>novas<\/strong> n\u00e3o quebram nenhuma query atual.<\/div><\/div>\r\n <div class=\"section-label\">Entidades existentes<\/div>\r\n <div class=\"entities-grid\" style=\"margin-bottom:28px\">\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">Lesson<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">category<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">subcategory<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">title<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">description<\/span><span class=\"field-type\">text<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">filePath<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">source<\/span><span class=\"field-type\">existing | ai_generated<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">User<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">name<\/span><span class=\"field-type\">string<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LessonDone<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">date<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">CoursePlan<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">coursePlanId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">title<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">projectDescription<\/span><span class=\"field-type\">text<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">type<\/span><span class=\"field-type\">fixed | custom<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">status<\/span><span class=\"field-type\">draft | active<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">CoursePlanLesson<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">coursePlanLessonId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">coursePlanId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">topic<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">order<\/span><span class=\"field-type\">int<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">status<\/span><span class=\"field-type\">pending | done<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"section-label\">Entidades novas \u2014 MVP<\/div>\r\n <div class=\"entities-grid\" style=\"margin-bottom:28px\">\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">ProjectConversation<\/span><span class=\"entity-pill pill-new\">nova \u00b7 MVP<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">conversationId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">coursePlanId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">messages<\/span><span class=\"field-type\">json<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">createdAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"section-label\">Entidades novas \u2014 camada adaptativa (futura)<\/div>\r\n <div class=\"entities-grid\">\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LessonVariant<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">variantId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">format<\/span><span class=\"field-type\">video | text | h5p<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">filePath<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">status<\/span><span class=\"field-type\">ready | generating<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">generatedBy<\/span><span class=\"field-type\">human | ai<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LearnerProfile<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">profileId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">preferredFormat<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">videoRetention<\/span><span class=\"field-type\">float<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">textRetention<\/span><span class=\"field-type\">float<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">h5pRetention<\/span><span class=\"field-type\">float<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">weakTopics<\/span><span class=\"field-type\">json<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">updatedAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LearnerEvent<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">eventId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">variantId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">eventType<\/span><span class=\"field-type\">play|pause|replay|complete|quiz<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">payload<\/span><span class=\"field-type\">json<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">occurredAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LessonDelivery<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">deliveryId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">variantId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">reason<\/span><span class=\"field-type\">preferred | default | fallback<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">deliveredAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"panel\" id=\"tab-tradeoffs\">\r\n <div class=\"callout callout-violet\" style=\"max-width:860px\"><div class=\"callout-icon\">\u25c8<\/div><div class=\"callout-text\">O desafio pede <strong>trade-offs expl\u00edcitos<\/strong> \u2014 o que foi priorizado e o que foi deixado de fora, e por qu\u00ea.<\/div><\/div>\r\n <div class=\"section-label\">Decis\u00f5es de escopo<\/div>\r\n <div class=\"tradeoff-grid\">\r\n <div class=\"tradeoff-card\"><div class=\"tradeoff-title\"><div class=\"tradeoff-dot\" style=\"background:var(--green)\"><\/div>O que entra no MVP<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Chat multi-turno com IA para definir o projeto<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Gerador de plano que reutiliza as 1.200 aulas existentes<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Job ass\u00edncrono para gerar aulas quando n\u00e3o existe no cat\u00e1logo<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Forma\u00e7\u00f5es fixas continuam funcionando sem nenhuma altera\u00e7\u00e3o<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Aulas geradas v\u00e3o para o cat\u00e1logo \u2014 reaproveitadas nos pr\u00f3ximos alunos<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">CoursePlan com <code style=\"font-family:var(--mono);font-size:10px\">type: custom<\/code><\/div>\r\n <\/div>\r\n <div class=\"tradeoff-card\"><div class=\"tradeoff-title\"><div class=\"tradeoff-dot\" style=\"background:var(--rose)\"><\/div>O que fica fora do MVP<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Revis\u00e3o humana das aulas geradas \u2014 complexidade desnecess\u00e1ria<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Variantes de formato (H5P, texto) \u2014 precisa de dados de uso<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">LearnerProfile adaptativo \u2014 precisa de volume que n\u00e3o temos<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Busca sem\u00e2ntica \u2014 categoria resolve 70%+ dos casos<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Orquestrador como microsservi\u00e7o \u2014 overhead desnecess\u00e1rio na V1<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-label\">Caminho de evolu\u00e7\u00e3o<\/div>\r\n <div style=\"max-width:860px\"><div class=\"tradeoff-card\" style=\"max-width:100%\">\r\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule2);border-radius:6px;overflow:hidden\">\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--green);margin-bottom:6px\">V1 \u2014 agora<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">Chat + gerador + job async. Medir ades\u00e3o.<\/div><\/div>\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--blue);margin-bottom:6px\">V2 \u2014 crescendo<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">Busca sem\u00e2ntica + variantes de formato.<\/div><\/div>\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--violet);margin-bottom:6px\">V3 \u2014 com dados<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">LearnerProfile + seletor adaptativo.<\/div><\/div>\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--amber);margin-bottom:6px\">V4 \u2014 escala<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">Orquestrador como servi\u00e7o. ML.<\/div><\/div>\r\n <\/div>\r\n <\/div><\/div>\r\n<\/div>\r\n<div class=\"panel\" id=\"tab-premises\">\r\n <div class=\"section-label\">Premissas assumidas<\/div>\r\n <div class=\"premise-list\">\r\n <div class=\"premise-item\"><span class=\"premise-id\">P1<\/span><span class=\"premise-text\"><strong>Volume inicial baixo.<\/strong> Sem filas robustas, sharding ou caches desde o in\u00edcio. Escala quando o volume exigir.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P2<\/span><span class=\"premise-text\"><strong>Gera\u00e7\u00e3o ass\u00edncrona.<\/strong> Plano entregue com <code>status: pending<\/code>. Aula gerada em background enquanto o aluno come\u00e7a pelas dispon\u00edveis.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P3<\/span><span class=\"premise-text\"><strong>Chat multi-turno.<\/strong> Uma mensagem raramente define bem um projeto. Hist\u00f3rico persistido em <code>ProjectConversation<\/code>.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P4<\/span><span class=\"premise-text\"><strong>Aulas geradas v\u00e3o para o cat\u00e1logo permanente.<\/strong> Reduz custo e lat\u00eancia ao longo do tempo.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P5<\/span><span class=\"premise-text\"><strong>Sem revis\u00e3o humana na V1.<\/strong> Complexidade antes de medir o problema \u00e9 over-engineering.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P6<\/span><span class=\"premise-text\"><strong>LLM externo via API.<\/strong> Claude API ou OpenAI \u2014 a ferramenta n\u00e3o muda a arquitetura.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P7<\/span><span class=\"premise-text\"><strong>Orquestrador come\u00e7a como m\u00f3dulo interno.<\/strong> Pode ser extra\u00eddo quando o volume exigir isolamento.<\/span><\/div>\r\n <\/div>\r\n<\/div>\r\n<\/main>\r\n<div class=\"legend\">\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--blue-bg);border-color:var(--blue-bd)\"><\/span>Existente<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--violet-bg);border-color:var(--violet-bd)\"><\/span>Orquestrador IA<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--green-bg);border-color:var(--green-bd)\"><\/span>Reutiliza\u00e7\u00e3o<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--rose-bg);border-color:var(--rose-bd)\"><\/span>Entrega<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--amber-bg);border-color:var(--amber-bd)\"><\/span>Novo \/ futura<\/span>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div id=\"view-student\" class=\"view\">\r\n <div class=\"s-topbar\">\r\n <button class=\"s-back\" onclick=\"switchView('arch',null)\">\u2190 Arquitetura<\/button>\r\n <div class=\"s-stepper\">\r\n <div class=\"s-step-item active\" id=\"ss1\"><div class=\"s-step-circle\">1<\/div><span>Chat<\/span><\/div>\r\n <div class=\"s-step-sep\"><\/div>\r\n <div class=\"s-step-item\" id=\"ss2\"><div class=\"s-step-circle\">2<\/div><span>Plano<\/span><\/div>\r\n <div class=\"s-step-sep\"><\/div>\r\n <div class=\"s-step-item\" id=\"ss3\"><div class=\"s-step-circle\">3<\/div><span>Aula<\/span><\/div>\r\n <div class=\"s-step-sep\"><\/div>\r\n <div class=\"s-step-item\" id=\"ss4\"><div class=\"s-step-circle\">4<\/div><span>Perfil<\/span><\/div>\r\n <\/div>\r\n <div class=\"s-ai-badge\">IA ativa<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel active\" id=\"s-step-1\">\r\n <div class=\"chat-layout\">\r\n <div class=\"chat-sidebar\">\r\n <div class=\"chat-sidebar-label\">Sugest\u00f5es de projeto<\/div>\r\n <div class=\"proj-card sel\" onclick=\"selectProj(this,'Clone do iFood com React e Node, incluindo pagamentos, painel do restaurante e rastreamento em tempo real')\"><h4>Clone do iFood<\/h4><p>Delivery com cat\u00e1logo, pedidos e pagamento<\/p><\/div>\r\n <div class=\"proj-card\" onclick=\"selectProj(this,'Clone do Netflix com autentica\u00e7\u00e3o, cat\u00e1logo de filmes e player de v\u00eddeo')\"><h4>Clone do Netflix<\/h4><p>Streaming com auth e player de v\u00eddeo<\/p><\/div>\r\n <div class=\"proj-card\" onclick=\"selectProj(this,'CRM completo com gest\u00e3o de clientes, pipeline de vendas e relat\u00f3rios')\"><h4>CRM Completo<\/h4><p>Gest\u00e3o de clientes e pipeline de vendas<\/p><\/div>\r\n <div class=\"proj-card\" onclick=\"selectProj(this,'SaaS com painel admin, integra\u00e7\u00e3o com IA e sistema de billing')\"><h4>SaaS com IA<\/h4><p>Plataforma com LLM e billing<\/p><\/div>\r\n <div style=\"margin-top:auto\">\r\n <div class=\"chat-sidebar-label\">Meus projetos<\/div>\r\n <div class=\"proj-card\" style=\"opacity:.4;cursor:default\"><h4>Nenhum ainda<\/h4><p>Comece uma conversa acima<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chat-main\">\r\n <div class=\"chat-header\">\r\n <div><h2>Definir meu projeto<\/h2><div style=\"font-size:11px;color:#5a5a70;margin-top:2px;font-family:'DM Mono',monospace\">A IA vai entender seu projeto e montar o plano ideal<\/div><\/div>\r\n <\/div>\r\n <div class=\"messages\" id=\"chat-messages\">\r\n <div class=\"msg\">\r\n <div class=\"avatar ai\">AI<\/div>\r\n <div class=\"bubble\">\r\n Ol\u00e1! Vou te ajudar a montar um <strong>curso personalizado<\/strong> baseado no projeto que voc\u00ea quer construir.<br><br>\r\n Me conta: <strong>qual projeto voc\u00ea quer criar?<\/strong> Pode ser qualquer coisa \u2014 um clone de app, uma ferramenta interna, um SaaS.\r\n <div class=\"quick-replies\">\r\n <button class=\"qr\" onclick=\"sendQuick('Clone do iFood completo com React e Node')\">Clone do iFood<\/button>\r\n <button class=\"qr\" onclick=\"sendQuick('App de delivery full stack com pagamentos')\">App de delivery<\/button>\r\n <button class=\"qr\" onclick=\"sendQuick('SaaS com painel admin e integra\u00e7\u00e3o com IA')\">SaaS com IA<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chat-input-area\">\r\n <textarea class=\"chat-input\" id=\"chat-input\" placeholder=\"Descreva seu projeto...\" rows=\"1\" onkeydown=\"if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChat()}\" oninput=\"this.style.height='auto';this.style.height=this.scrollHeight+'px'\"><\/textarea>\r\n <button class=\"send-btn\" onclick=\"sendChat()\">\u2191<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel\" id=\"s-step-2\">\r\n <div class=\"plan-layout\">\r\n <div class=\"plan-content\">\r\n <div class=\"plan-eyebrow\">plano personalizado \u00b7 gerado por IA<\/div>\r\n <div class=\"plan-title\">Clone do iFood \u2014 Full Stack<\/div>\r\n <div class=\"plan-sub\">32 aulas \u00b7 estimativa de 6\u20138 semanas \u00b7 do zero ao deploy<\/div>\r\n <div class=\"module-title\">Fundamentos & Setup<\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">01<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Node.js \u2014 fundamentos e event loop<\/div><div class=\"lesson-meta-text\">Backend \u00b7 42min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">02<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Express.js \u2014 criando sua primeira API REST<\/div><div class=\"lesson-meta-text\">Backend \u00b7 38min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row ai-gen\" onclick=\"goToLesson()\"><div class=\"lesson-num\">03<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">PostgreSQL \u2014 modelando card\u00e1pios e pedidos<\/div><div class=\"lesson-meta-text\">Banco de dados \u00b7 28min \u00b7 gerada para este projeto<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-ai\">IA gerou<\/span><\/div>\r\n <div class=\"module-title\">Frontend com React<\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">04<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">React \u2014 componentes, estado e props<\/div><div class=\"lesson-meta-text\">Frontend \u00b7 55min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row ai-gen\" onclick=\"goToLesson()\"><div class=\"lesson-num\">05<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Montando a tela de card\u00e1pio do iFood em React<\/div><div class=\"lesson-meta-text\">Frontend \u00b7 44min \u00b7 espec\u00edfica para seu projeto<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-ai\">IA gerou<\/span><\/div>\r\n <div class=\"lesson-row\" onclick=\"goToLesson()\"><div class=\"lesson-num\">06<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">React Query \u2014 data fetching e cache<\/div><div class=\"lesson-meta-text\">Frontend \u00b7 36min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><\/div><span class=\"src-badge src-gen\">gerando...<\/span><\/div>\r\n <div class=\"module-title\">Pagamentos & Deploy<\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">07<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Stripe \u2014 integrando pagamentos<\/div><div class=\"lesson-meta-text\">Pagamentos \u00b7 41min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row ai-gen\" onclick=\"goToLesson()\"><div class=\"lesson-num\">08<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Deploy no Railway \u2014 iFood em produ\u00e7\u00e3o<\/div><div class=\"lesson-meta-text\">Deploy \u00b7 32min \u00b7 espec\u00edfica para seu projeto<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-ai\">IA gerou<\/span><\/div>\r\n <button class=\"plan-start-btn\" onclick=\"goToLesson()\">Come\u00e7ar aula 01 \u2192<\/button>\r\n <\/div>\r\n <div class=\"plan-sidebar\">\r\n <div class=\"stat-card\"><div class=\"stat-label\">Total de aulas<\/div><div class=\"stat-val\">32<span class=\"stat-unit\">aulas<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Do cat\u00e1logo<\/div><div class=\"stat-val\" style=\"color:#2dd4bf\">22<span class=\"stat-unit\">reutilizadas<\/span><\/div><div class=\"prog-track\"><div class=\"prog-fill\" style=\"width:69%;background:#2dd4bf\"><\/div><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Geradas pela IA<\/div><div class=\"stat-val\" style=\"color:#f97316\">10<span class=\"stat-unit\">novas aulas<\/span><\/div><div class=\"prog-track\"><div class=\"prog-fill\" style=\"width:31%;background:#f97316\"><\/div><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Cobertura estimada<\/div><div class=\"stat-val\">~94<span class=\"stat-unit\">%<\/span><\/div><div class=\"prog-track\"><div class=\"prog-fill\" style=\"width:94%;background:#6c63ff\"><\/div><\/div><\/div>\r\n <div style=\"margin-top:16px\">\r\n <div style=\"font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#5a5a70;margin-bottom:8px\">Legenda<\/div>\r\n <div style=\"font-size:11px;color:#9191a8;display:flex;flex-direction:column;gap:5px;font-family:'DM Mono',monospace\">\r\n <span style=\"display:flex;align-items:center;gap:6px\"><span style=\"width:8px;height:8px;border-radius:2px;background:#2dd4bf;display:inline-block\"><\/span>Aula do cat\u00e1logo<\/span>\r\n <span style=\"display:flex;align-items:center;gap:6px\"><span style=\"width:8px;height:8px;border-radius:2px;background:#f97316;display:inline-block\"><\/span>Gerada pela IA<\/span>\r\n <span style=\"display:flex;align-items:center;gap:6px\"><span style=\"width:8px;height:8px;border-radius:2px;background:#5a5a70;display:inline-block\"><\/span>Variante gerando<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel\" id=\"s-step-3\">\r\n <div class=\"lesson-layout\">\r\n <div class=\"lesson-main\">\r\n <div class=\"lesson-topbar\">\r\n <div class=\"breadcrumb\"><a onclick=\"goToStep(2)\">Plano<\/a><span>\u203a<\/span><span>Fundamentos<\/span><span>\u203a<\/span><span>Aula 01<\/span><\/div>\r\n <div class=\"adaptive-badge\" id=\"adaptive-badge\">formato adaptado: v\u00eddeo<\/div>\r\n <div class=\"fmt-switcher\">\r\n <button class=\"fmt-btn active\" id=\"fb-video\" onclick=\"switchFmt('video')\">\u25b6 V\u00eddeo<\/button>\r\n <button class=\"fmt-btn\" id=\"fb-text\" onclick=\"switchFmt('text')\">\u2261 Texto<\/button>\r\n <button class=\"fmt-btn\" id=\"fb-h5p\" onclick=\"switchFmt('h5p')\">\u2b1c H5P<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fmt-content\" id=\"fc-video\">\r\n <div class=\"video-wrap\">\r\n <div class=\"video-screen\" id=\"vid-screen\" onclick=\"togglePlay()\">\r\n <div id=\"vid-placeholder\" style=\"display:flex;flex-direction:column;align-items:center;gap:12px\">\r\n <div class=\"play-circle\"><span style=\"font-size:22px;margin-left:4px\">\u25b6<\/span><\/div>\r\n <div class=\"video-overlay-title\">Node.js \u2014 fundamentos e event loop<\/div>\r\n <\/div>\r\n <div id=\"vid-playing\" style=\"width:100%;padding:24px;flex-direction:column;align-items:center;gap:10px\">\r\n <div style=\"font-size:12px;color:#5a5a70;font-family:'DM Mono',monospace\">\u25b6 reproduzindo...<\/div>\r\n <div class=\"vid-progress-wrap\"><div class=\"vid-progress-fill\" id=\"vid-prog-inner\"><\/div><\/div>\r\n <div class=\"vid-time\" id=\"vid-time-disp\">0:00 \/ 8:45<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"video-controls\">\r\n <button class=\"ctrl-btn\" onclick=\"togglePlay()\" id=\"play-ctrl\">\u25b6<\/button>\r\n <div class=\"prog-track-v\" onclick=\"seekVid(event)\"><div class=\"prog-fill-v\" id=\"vid-prog-bar\"><\/div><\/div>\r\n <span class=\"time-label\" id=\"vid-time-ctrl\">0:00 \/ 8:45<\/span>\r\n <button class=\"ctrl-btn\" title=\"Replay\" onclick=\"replayVid()\">\u21ba<\/button>\r\n <\/div>\r\n <\/div>\r\n <div style=\"padding:0 32px 24px\">\r\n <div style=\"font-family:'Syne',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.3px;color:#e8e8f0;margin-bottom:5px\">Node.js \u2014 fundamentos e event loop<\/div>\r\n <div style=\"font-size:11px;color:#5a5a70;font-family:'DM Mono',monospace\">Aula 01 de 32 \u00b7 42 min \u00b7 Backend \u00b7 do cat\u00e1logo<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fmt-content\" id=\"fc-text\" style=\"display:none\">\r\n <div class=\"text-content\">\r\n <h3>Node.js \u2014 fundamentos e event loop<\/h3>\r\n <p>Node.js \u00e9 um runtime JavaScript constru\u00eddo sobre o motor V8 do Chrome. Diferente de linguagens como PHP que criam uma nova thread para cada requisi\u00e7\u00e3o, o Node usa uma \u00fanica thread com um modelo de I\/O n\u00e3o-bloqueante.<\/p>\r\n <p>O conceito mais importante \u00e9 o <strong style=\"color:#c4b5fd\">event loop<\/strong>. Em vez de bloquear esperando I\/O, o Node registra callbacks e continua processando outras requisi\u00e7\u00f5es.<\/p>\r\n <div class=\"code-block\"><span class=\"kw\">const<\/span> http = <span class=\"fn\">require<\/span>(<span class=\"str\">'http'<\/span>);<br><br><span class=\"kw\">const<\/span> server = http.<span class=\"fn\">createServer<\/span>((req, res) => {<br> res.<span class=\"fn\">writeHead<\/span>(200, { <span class=\"str\">'Content-Type'<\/span>: <span class=\"str\">'text\/plain'<\/span> });<br> res.<span class=\"fn\">end<\/span>(<span class=\"str\">'Ol\u00e1 do Node!\\n'<\/span>);<br>});<br><br>server.<span class=\"fn\">listen<\/span>(3000, () => {<br> console.<span class=\"fn\">log<\/span>(<span class=\"str\">'Servidor rodando na porta 3000'<\/span>);<br>});<\/div>\r\n <p>Isso torna o Node eficiente para o backend do nosso iFood \u2014 com muitas requisi\u00e7\u00f5es simult\u00e2neas de clientes, restaurantes e entregadores ao mesmo tempo.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fmt-content\" id=\"fc-h5p\" style=\"display:none\">\r\n <div class=\"h5p-wrap\">\r\n <div class=\"h5p-hdr\"><span class=\"h5p-badge\">H5P<\/span><span style=\"font-size:13px;font-weight:500;color:#9191a8\">Node.js \u2014 fundamentos e event loop<\/span><span class=\"h5p-type\" id=\"h5p-type\">Quiz de m\u00faltipla escolha<\/span><\/div>\r\n <div class=\"quiz-body\" id=\"quiz-body\">\r\n <div class=\"quiz-q\">O que acontece quando o Node.js recebe duas requisi\u00e7\u00f5es simult\u00e2neas que precisam ler um arquivo do disco?<\/div>\r\n <div class=\"quiz-sub\">Escolha a op\u00e7\u00e3o que melhor descreve o comportamento do event loop.<\/div>\r\n <div class=\"quiz-opts\" id=\"quiz-opts\">\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'A')\" data-ok=\"false\"><div class=\"opt-letter\">A<\/div>Bloqueia a segunda requisi\u00e7\u00e3o at\u00e9 a primeira terminar<\/div>\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'B')\" data-ok=\"true\"><div class=\"opt-letter\">B<\/div>Envia as duas leituras ao sistema operacional e continua processando outras requisi\u00e7\u00f5es<\/div>\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'C')\" data-ok=\"false\"><div class=\"opt-letter\">C<\/div>Cria duas threads separadas, uma para cada requisi\u00e7\u00e3o<\/div>\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'D')\" data-ok=\"false\"><div class=\"opt-letter\">D<\/div>Retorna erro 503 para uma das requisi\u00e7\u00f5es automaticamente<\/div>\r\n <\/div>\r\n <div class=\"quiz-fb\" id=\"quiz-fb\"><\/div>\r\n <div id=\"quiz-actions\"><button class=\"quiz-action-btn\" onclick=\"checkQuiz()\">Verificar resposta<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lesson-sidebar\">\r\n <div>\r\n <div class=\"ls-section-title\">Perfil de aprendizado<\/div>\r\n <div class=\"profile-ring-row\">\r\n <div class=\"ring-wrap\">\r\n <svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\r\n <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#1e1e28\" stroke-width=\"5\"\/>\r\n <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#6c63ff\" stroke-width=\"5\" stroke-dasharray=\"75.4 125.7\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <div class=\"ring-center\">60%<\/div>\r\n <\/div>\r\n <div class=\"profile-info\">\r\n <div class=\"pname\">Aluno #4821<\/div>\r\n <div class=\"ppref\">prefer\u00eancia: <span style=\"color:#c4b5fd\">v\u00eddeo<\/span><\/div>\r\n <div class=\"ppref\" style=\"margin-top:2px\">4 aulas conclu\u00eddas<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"ls-section-title\">Reten\u00e7\u00e3o por formato<\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\">V\u00eddeo<\/span><div class=\"ret-track\"><div class=\"ret-fill\" id=\"ret-video\" style=\"width:78%;background:#9d78ff\"><\/div><\/div><span class=\"ret-pct\" id=\"ret-video-pct\">78%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\">H5P<\/span><div class=\"ret-track\"><div class=\"ret-fill\" id=\"ret-h5p\" style=\"width:65%;background:#f97316\"><\/div><\/div><span class=\"ret-pct\" id=\"ret-h5p-pct\">65%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\">Texto<\/span><div class=\"ret-track\"><div class=\"ret-fill\" id=\"ret-text\" style=\"width:42%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-pct\" id=\"ret-text-pct\">42%<\/span><\/div>\r\n <div style=\"font-size:9px;color:#5a5a70;font-family:'DM Mono',monospace;margin-top:6px\">Baseado em 4 aulas \u00b7 \u00faltima atualiza\u00e7\u00e3o h\u00e1 2min<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"ls-section-title\">Eventos registrados<\/div>\r\n <div id=\"event-feed\">\r\n <div class=\"event-item\"><div class=\"event-dot\" style=\"background:#4ade80\"><\/div><div><div>Aula 01 iniciada \u2014 v\u00eddeo<\/div><div style=\"color:#3a3a50;font-size:9px\">h\u00e1 3min<\/div><\/div><\/div>\r\n <div class=\"event-item\"><div class=\"event-dot\" style=\"background:#9d78ff\"><\/div><div><div>Aula 04 conclu\u00edda \u2014 94% reten\u00e7\u00e3o<\/div><div style=\"color:#3a3a50;font-size:9px\">h\u00e1 22min<\/div><\/div><\/div>\r\n <div class=\"event-item\"><div class=\"event-dot\" style=\"background:#f97316\"><\/div><div><div>Replay em 2:14 \u2014 event loop<\/div><div style=\"color:#3a3a50;font-size:9px\">h\u00e1 24min<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"ls-section-title\">Pr\u00f3xima aula<\/div>\r\n <div class=\"next-card\">\r\n <div class=\"next-lbl\">Em seguida<\/div>\r\n <div class=\"next-title\">Express.js \u2014 criando sua primeira API REST<\/div>\r\n <div class=\"next-meta\">38min \u00b7 formato sugerido: v\u00eddeo<\/div>\r\n <\/div>\r\n <button class=\"done-btn\" onclick=\"goToStep(4);showToast('Aula conclu\u00edda! Perfil atualizado.')\">Concluir aula \u2713<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel\" id=\"s-step-4\">\r\n <div class=\"profile-screen\">\r\n <div class=\"profile-card\">\r\n <div class=\"check-anim\">\u2713<\/div>\r\n <div class=\"profile-title\">Aula conclu\u00edda!<\/div>\r\n <div class=\"profile-sub\">Node.js \u2014 fundamentos e event loop<\/div>\r\n <div class=\"stats-grid\">\r\n <div class=\"s-stat\" style=\"background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.2)\"><div class=\"s-stat-n\" style=\"color:#4ade80\">1<\/div><div class=\"s-stat-l\" style=\"color:#4ade80\">aula hoje<\/div><\/div>\r\n <div class=\"s-stat\" style=\"background:rgba(108,99,255,.08);border-color:rgba(108,99,255,.2)\"><div class=\"s-stat-n\" style=\"color:#c4b5fd\">31<\/div><div class=\"s-stat-l\" style=\"color:#c4b5fd\">restantes<\/div><\/div>\r\n <div class=\"s-stat\" style=\"background:rgba(157,120,255,.08);border-color:rgba(157,120,255,.2)\"><div class=\"s-stat-n\" style=\"color:#c4b5fd\">78%<\/div><div class=\"s-stat-l\" style=\"color:#c4b5fd\">reten\u00e7\u00e3o v\u00eddeo<\/div><\/div>\r\n <div class=\"s-stat\" style=\"background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.2)\"><div class=\"s-stat-n\" style=\"color:#f97316\">42min<\/div><div class=\"s-stat-l\" style=\"color:#f97316\">estudo hoje<\/div><\/div>\r\n <\/div>\r\n <div class=\"profile-learn-title\">Como voc\u00ea aprende melhor<\/div>\r\n <div style=\"margin-bottom:12px\">\r\n <div class=\"ret-row\"><span class=\"ret-label\" style=\"color:#9191a8\">V\u00eddeo<\/span><div class=\"ret-track\" style=\"background:#1e1e28\"><div class=\"ret-fill\" style=\"width:78%;background:#9d78ff\"><\/div><\/div><span class=\"ret-pct\" style=\"color:#c4b5fd\">78%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\" style=\"color:#9191a8\">H5P<\/span><div class=\"ret-track\" style=\"background:#1e1e28\"><div class=\"ret-fill\" style=\"width:65%;background:#f97316\"><\/div><\/div><span class=\"ret-pct\" style=\"color:#f97316\">65%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\" style=\"color:#9191a8\">Texto<\/span><div class=\"ret-track\" style=\"background:#1e1e28\"><div class=\"ret-fill\" style=\"width:42%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-pct\" style=\"color:#2dd4bf\">42%<\/span><\/div>\r\n <\/div>\r\n <div style=\"font-size:11px;color:#5a5a70;font-family:'DM Mono',monospace;margin-bottom:16px\">Perfil calculado com base em 5 aulas<\/div>\r\n <div style=\"display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;text-align:left\">\r\n <div style=\"font-size:11px;color:#9191a8;width:100%;margin-bottom:4px\">T\u00f3picos para refor\u00e7ar:<\/div>\r\n <span style=\"font-size:10px;font-family:'DM Mono',monospace;padding:3px 9px;border-radius:4px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);color:#f97316\">event loop<\/span>\r\n <span style=\"font-size:10px;font-family:'DM Mono',monospace;padding:3px 9px;border-radius:4px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);color:#f97316\">I\/O n\u00e3o-bloqueante<\/span>\r\n <\/div>\r\n <div class=\"next-lesson-card\">\r\n <div class=\"next-lbl\" style=\"color:#5a5a70\">Pr\u00f3xima aula<\/div>\r\n <div class=\"next-title\" style=\"font-size:13px;font-weight:500;color:#e8e8f0;margin-bottom:3px\">Express.js \u2014 criando sua primeira API REST<\/div>\r\n <div class=\"next-meta\" style=\"font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;margin-bottom:12px\">38min \u00b7 formato sugerido: v\u00eddeo<\/div>\r\n <button class=\"done-btn\" onclick=\"goToStep(3);showToast('Pr\u00f3xima aula carregada!')\">Pr\u00f3xima aula \u2192<\/button>\r\n <\/div>\r\n <span class=\"back-plan-link\" onclick=\"goToStep(2)\">Ver plano completo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div id=\"view-prof\" class=\"view\">\r\n <div class=\"p-header\">\r\n <div class=\"p-logo\">DevFullStack <span>\/ Professor<\/span><\/div>\r\n <div class=\"p-tabs\">\r\n <button class=\"p-tab active\" onclick=\"showPTab('overview',this)\">Vis\u00e3o Geral<\/button>\r\n <button class=\"p-tab\" onclick=\"showPTab('profiles',this)\">Perfis de Alunos<\/button>\r\n <button class=\"p-tab\" onclick=\"showPTab('catalog',this)\">Cat\u00e1logo IA<\/button>\r\n <button class=\"p-tab\" onclick=\"showPTab('generated',this)\">Conte\u00fado Gerado<\/button>\r\n <\/div>\r\n <button class=\"p-back\" onclick=\"switchView('arch',null)\">\u2190 Voltar<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel active\" id=\"p-overview\">\r\n <div class=\"p-metric-grid\">\r\n <div class=\"p-metric\" style=\"border-left-color:var(--blue)\"><div class=\"p-metric-n\" style=\"color:var(--blue)\">24<\/div><div class=\"p-metric-l\">alunos ativos<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--violet)\"><div class=\"p-metric-n\" style=\"color:var(--violet)\">18<\/div><div class=\"p-metric-l\">projetos em andamento<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--green)\"><div class=\"p-metric-n\" style=\"color:var(--green)\">847<\/div><div class=\"p-metric-l\">aulas reutilizadas<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--amber)\"><div class=\"p-metric-n\" style=\"color:var(--amber)\">134<\/div><div class=\"p-metric-l\">aulas geradas pela IA<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--rose)\"><div class=\"p-metric-n\" style=\"color:var(--rose)\">89%<\/div><div class=\"p-metric-l\">taxa m\u00e9dia de conclus\u00e3o<\/div><\/div>\r\n <\/div>\r\n <div class=\"p-two-col\">\r\n <div class=\"p-card\">\r\n <div class=\"p-card-title\">Tipo de formato preferido \u2014 24 alunos <button class=\"info-btn\" onclick=\"openModal()\">\u24d8 como \u00e9 calculado?<\/button><\/div>\r\n <div class=\"donut-row\">\r\n <svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\">\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#e2dfd8\" stroke-width=\"12\"\/>\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#6c63ff\" stroke-width=\"12\" stroke-dasharray=\"156.4 133.6\" stroke-linecap=\"round\" transform=\"rotate(-90 60 60)\"\/>\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#f97316\" stroke-width=\"12\" stroke-dasharray=\"84 206\" stroke-linecap=\"round\" transform=\"rotate(104.4 60 60)\"\/>\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#2dd4bf\" stroke-width=\"12\" stroke-dasharray=\"49.2 240.8\" stroke-linecap=\"round\" transform=\"rotate(208.8 60 60)\"\/>\r\n <text x=\"60\" y=\"55\" text-anchor=\"middle\" font-family=\"Syne\" font-size=\"18\" font-weight=\"700\" fill=\"#1a1916\">24<\/text>\r\n <text x=\"60\" y=\"70\" text-anchor=\"middle\" font-family=\"IBM Plex Mono\" font-size=\"8\" fill=\"#8a8880\">alunos<\/text>\r\n <\/svg>\r\n <div class=\"donut-legend\">\r\n <div class=\"donut-legend-item\"><div class=\"donut-legend-dot\" style=\"background:#6c63ff\"><\/div>V\u00eddeo<span class=\"donut-pct\" style=\"color:#6c63ff\">54% \u00b7 13<\/span><\/div>\r\n <div class=\"donut-legend-item\"><div class=\"donut-legend-dot\" style=\"background:#f97316\"><\/div>H5P<span class=\"donut-pct\" style=\"color:#f97316\">29% \u00b7 7<\/span><\/div>\r\n <div class=\"donut-legend-item\"><div class=\"donut-legend-dot\" style=\"background:#2dd4bf\"><\/div>Texto<span class=\"donut-pct\" style=\"color:#2dd4bf\">17% \u00b7 4<\/span><\/div>\r\n <div style=\"font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:4px\">baseado em LearnerProfile.preferredFormat<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-card\">\r\n <div class=\"p-card-title\">Reten\u00e7\u00e3o m\u00e9dia por formato <button class=\"info-btn\" onclick=\"openModal()\">\u24d8 como \u00e9 calculado?<\/button><\/div>\r\n <div style=\"margin-bottom:16px;font-size:12px;color:var(--ink3)\">M\u00e9dia de todos os alunos com \u2265 3 aulas por formato<\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:76%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">76%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:68%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">68%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:51%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">51%<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-section\">Atividade recente<\/div>\r\n <div class=\"p-card\" style=\"padding:0;overflow:hidden\">\r\n <table class=\"p-table\">\r\n <thead><tr><th>Aluno<\/th><th>Projeto<\/th><th>\u00daltima aula<\/th><th>Formato<\/th><th>Reten\u00e7\u00e3o<\/th><th>Status<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr onclick=\"openDrawer('Jo\u00e3o','iFood clone','v\u00eddeo',82,'Formato preferido: v\u00eddeo com 82% de reten\u00e7\u00e3o. Tende a pausar em trechos conceituais e revisar antes de avan\u00e7ar.')\"><td>Jo\u00e3o Silva<\/td><td>iFood clone<\/td><td>Node.js fundamentos<\/td><td><span class=\"entity-pill\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/td><td>82%<\/td><td><span class=\"p-status star\">destaque<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Ana','Netflix clone','H5P',71,'Formato preferido: H5P com 71% de reten\u00e7\u00e3o. Boa performance em exerc\u00edcios interativos.')\"><td>Ana Costa<\/td><td>Netflix clone<\/td><td>React hooks avan\u00e7ado<\/td><td><span class=\"entity-pill\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/td><td>71%<\/td><td><span class=\"p-status ok\">ativo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Pedro','CRM','texto',44,'Aten\u00e7\u00e3o: reten\u00e7\u00e3o abaixo do esperado (44%). O formato texto, que ele mais usa, tem menor taxa. Recomendado migrar para H5P ou v\u00eddeo.')\"><td>Pedro Lemos<\/td><td>CRM completo<\/td><td>PostgreSQL joins<\/td><td><span class=\"entity-pill\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">texto<\/span><\/td><td style=\"color:var(--amber)\">44%<\/td><td><span class=\"p-status warn\">baixo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Mariana','iFood clone','v\u00eddeo',89,'Melhor aluna da turma em reten\u00e7\u00e3o de v\u00eddeo. Progresso consistente e sem replays excessivos.')\"><td>Mariana Souza<\/td><td>iFood clone<\/td><td>Express middlewares<\/td><td><span class=\"entity-pill\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/td><td>89%<\/td><td><span class=\"p-status star\">destaque<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Carlos','SaaS','H5P',77,'Bom engajamento com H5P. Prefer\u00eancia clara por exerc\u00edcios interativos com feedback imediato.')\"><td>Carlos Mendes<\/td><td>SaaS com IA<\/td><td>Autentica\u00e7\u00e3o JWT<\/td><td><span class=\"entity-pill\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/td><td>77%<\/td><td><span class=\"p-status ok\">ativo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Julia','Instagram','texto',38,'Reten\u00e7\u00e3o cr\u00edtica (38%). Texto n\u00e3o est\u00e1 funcionando bem para este perfil. Interven\u00e7\u00e3o recomendada.')\"><td>Julia Ferreira<\/td><td>Instagram clone<\/td><td>CSS Grid avan\u00e7ado<\/td><td><span class=\"entity-pill\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">texto<\/span><\/td><td style=\"color:var(--rose)\">38%<\/td><td><span class=\"p-status warn\">baixo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Rafael','iFood clone','v\u00eddeo',91,'Excelente. 91% de reten\u00e7\u00e3o em v\u00eddeo. Completa aulas sem replays desnecess\u00e1rios. Refer\u00eancia para a turma.')\"><td>Rafael Nunes<\/td><td>iFood clone<\/td><td>Stripe webhooks<\/td><td><span class=\"entity-pill\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/td><td>91%<\/td><td><span class=\"p-status star\">destaque<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Beatriz','CRM','H5P',65,'Reten\u00e7\u00e3o moderada em H5P. Tende a tentar mais de uma vez nos quizzes \u2014 pode indicar dificuldade ou cautela antes de responder.')\"><td>Beatriz Lima<\/td><td>CRM completo<\/td><td>React Query<\/td><td><span class=\"entity-pill\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/td><td>65%<\/td><td><span class=\"p-status ok\">ativo<\/span><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel\" id=\"p-profiles\">\r\n <div class=\"p-filters\">\r\n <select class=\"p-select\"><option>Todos os projetos<\/option><option>iFood clone<\/option><option>Netflix clone<\/option><option>CRM completo<\/option><option>SaaS com IA<\/option><\/select>\r\n <select class=\"p-select\"><option>Todos os formatos<\/option><option>V\u00eddeo<\/option><option>H5P<\/option><option>Texto<\/option><\/select>\r\n <select class=\"p-select\"><option>Todos os status<\/option><option>Ativos<\/option><option>Reten\u00e7\u00e3o baixa<\/option><option>Destaques<\/option><\/select>\r\n <\/div>\r\n <div class=\"student-grid\">\r\n <div class=\"student-card\" onclick=\"openDrawer('Jo\u00e3o','iFood clone','v\u00eddeo',82,'Formato preferido: v\u00eddeo com 82% de reten\u00e7\u00e3o. Tende a pausar em trechos conceituais.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#6c63ff\">JS<\/div><div><div class=\"stu-name\">Jo\u00e3o Silva<\/div><div class=\"stu-proj\">iFood clone<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:82%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">82%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:58%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">58%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:35%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">35%<\/span><\/div>\r\n <div class=\"stu-weak\"><span class=\"weak-chip\">callbacks<\/span><span class=\"weak-chip\">async\/await<\/span><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">12<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">82%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">\u2605<\/div><div class=\"stu-stat-l\">destaque<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"student-card\" onclick=\"openDrawer('Ana','Netflix clone','H5P',71,'Bom engajamento com exerc\u00edcios interativos H5P.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#9d78ff\">AC<\/div><div><div class=\"stu-name\">Ana Costa<\/div><div class=\"stu-proj\">Netflix clone<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:62%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">62%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:71%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">71%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:40%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">40%<\/span><\/div>\r\n <div class=\"stu-weak\"><span class=\"weak-chip\">React Router<\/span><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">9<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">71%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">\u25cf<\/div><div class=\"stu-stat-l\">ativo<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"student-card\" onclick=\"openDrawer('Pedro','CRM','texto',44,'Reten\u00e7\u00e3o abaixo do esperado. Interven\u00e7\u00e3o recomendada.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#f97316\">PL<\/div><div><div class=\"stu-name\">Pedro Lemos<\/div><div class=\"stu-proj\">CRM completo<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">texto<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:48%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">48%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:52%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">52%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:44%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">44%<\/span><\/div>\r\n <div class=\"stu-weak\"><span class=\"weak-chip\">joins<\/span><span class=\"weak-chip\">subqueries<\/span><span class=\"weak-chip\">\u00edndices<\/span><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">7<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\" style=\"color:var(--amber)\">44%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\" style=\"color:var(--amber)\">\u25b2<\/div><div class=\"stu-stat-l\">baixo<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"student-card\" onclick=\"openDrawer('Mariana','iFood clone','v\u00eddeo',89,'Melhor reten\u00e7\u00e3o da turma. Progresso consistente.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#15803d\">MS<\/div><div><div class=\"stu-name\">Mariana Souza<\/div><div class=\"stu-proj\">iFood clone<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:89%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">89%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:72%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">72%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:55%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">55%<\/span><\/div>\r\n <div class=\"stu-weak\"><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">15<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">89%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">\u2605<\/div><div class=\"stu-stat-l\">destaque<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel\" id=\"p-catalog\">\r\n <div class=\"p-section\">Cobertura por categoria<\/div>\r\n <div class=\"cat-grid\">\r\n <div class=\"p-card\"><div class=\"cat-name\">React <span class=\"cat-total\">280 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:87%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:13%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">243 do cat\u00e1logo<\/span><span class=\"iai\">37 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">Node.js <span class=\"cat-total\">210 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:91%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:9%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">191 do cat\u00e1logo<\/span><span class=\"iai\">19 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">PostgreSQL <span class=\"cat-total\">180 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:74%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:26%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">133 do cat\u00e1logo<\/span><span class=\"iai\">47 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">DevOps <span class=\"cat-total\">165 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:95%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:5%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">157 do cat\u00e1logo<\/span><span class=\"iai\">8 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">Stripe \/ Pagamentos <span class=\"cat-total\">95 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:61%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:39%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">58 do cat\u00e1logo<\/span><span class=\"iai\">37 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">Deploy \/ Infra <span class=\"cat-total\">120 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:83%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:17%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">99 do cat\u00e1logo<\/span><span class=\"iai\">21 geradas por IA<\/span><\/div><\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\r\n <div>\r\n <div class=\"p-section\">Top desempenho (IA gerou)<\/div>\r\n <table class=\"p-table\" style=\"background:white;border:1.5px solid var(--rule2);border-radius:10px;overflow:hidden\">\r\n <thead><tr><th>Aula<\/th><th>Alunos<\/th><th>Reten\u00e7\u00e3o<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>PostgreSQL \u2014 card\u00e1pios e pedidos<\/td><td>14<\/td><td><span style=\"color:var(--green);font-weight:600\">81%<\/span><\/td><\/tr>\r\n <tr><td>Stripe webhooks para delivery<\/td><td>11<\/td><td><span style=\"color:var(--green);font-weight:600\">78%<\/span><\/td><\/tr>\r\n <tr><td>React tela de card\u00e1pio \u2014 iFood<\/td><td>14<\/td><td><span style=\"color:var(--amber);font-weight:600\">76%<\/span><\/td><\/tr>\r\n <tr><td>Deploy Railway \u2014 app fullstack<\/td><td>10<\/td><td><span style=\"color:var(--amber);font-weight:600\">74%<\/span><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div>\r\n <div class=\"p-section\">Precisam aten\u00e7\u00e3o<\/div>\r\n <table class=\"p-table\" style=\"background:white;border:1.5px solid var(--rule2);border-radius:10px;overflow:hidden\">\r\n <thead><tr><th>Aula<\/th><th>Alunos<\/th><th>Reten\u00e7\u00e3o<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>CSS avan\u00e7ado \u2014 anima\u00e7\u00f5es<\/td><td>3<\/td><td><span style=\"color:var(--rose);font-weight:600\">41%<\/span><\/td><\/tr>\r\n <tr><td>GraphQL subscriptions<\/td><td>2<\/td><td><span style=\"color:var(--rose);font-weight:600\">48%<\/span><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"callout callout-amber\" style=\"margin-top:12px;font-size:12px\"><div class=\"callout-icon\">\u26a0<\/div><div class=\"callout-text\">Aulas com reten\u00e7\u00e3o < 55% geradas por IA. Considere revis\u00e3o ou novas variantes de formato.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel\" id=\"p-generated\">\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px\">\r\n <div class=\"p-card\" style=\"text-align:center\"><div style=\"font-family:var(--mono);font-size:10px;color:var(--green);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px\">Reutiliza\u00e7\u00f5es do cat\u00e1logo<\/div><div style=\"font-family:'Syne',sans-serif;font-size:32px;font-weight:700;color:var(--green)\">847<\/div><div style=\"font-size:11px;color:var(--ink3)\">cada uma evitou uma chamada ao LLM<\/div><\/div>\r\n <div class=\"p-card\" style=\"text-align:center\"><div style=\"font-family:var(--mono);font-size:10px;color:var(--amber);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px\">Novas aulas geradas<\/div><div style=\"font-family:'Syne',sans-serif;font-size:32px;font-weight:700;color:var(--amber)\">134<\/div><div style=\"font-size:11px;color:var(--ink3)\">permanentes \u2014 n\u00e3o ser\u00e3o geradas de novo<\/div><\/div>\r\n <div class=\"p-card\" style=\"text-align:center\"><div style=\"font-family:var(--mono);font-size:10px;color:var(--blue);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px\">J\u00e1 dispon\u00edveis para futuros alunos<\/div><div style=\"font-family:'Syne',sans-serif;font-size:32px;font-weight:700;color:var(--blue)\">134<\/div><div style=\"font-size:11px;color:var(--ink3)\">cada aula nova beneficia todos os pr\u00f3ximos projetos<\/div><\/div>\r\n <\/div>\r\n <div class=\"p-section\">Timeline de gera\u00e7\u00e3o<\/div>\r\n <div class=\"gen-timeline\">\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">PostgreSQL \u2014 modelando card\u00e1pios e pedidos<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>PostgreSQL \u00b7 iFood clone<\/span><span>Gerado em 18s via Claude API \u00b7 h\u00e1 3 dias<\/span><span>14 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:81%;background:var(--green)\"><\/div><\/div><span style=\"font-weight:600;color:var(--green)\">81%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">Stripe webhooks para apps de delivery<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>Stripe \u00b7 iFood clone<\/span><span>Gerado em 34s via Claude API \u00b7 h\u00e1 3 dias<\/span><span>11 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:78%;background:var(--green)\"><\/div><\/div><span style=\"font-weight:600;color:var(--green)\">78%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u25c8<\/span><span class=\"tl-title\">Variante H5P \u2014 React hooks avan\u00e7ado<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-var\">variante H5P<\/span><\/div><\/div><div class=\"tl-row2\"><span>React \u00b7 gerada por demanda de formato<\/span><span>Gerado em 41s \u00b7 h\u00e1 2 dias<\/span><span>7 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:83%;background:var(--green)\"><\/div><\/div><span style=\"font-weight:600;color:var(--green)\">83%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">Autentica\u00e7\u00e3o JWT com refresh token \u2014 SaaS<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>Node.js \u00b7 SaaS com IA<\/span><span>Gerado em 27s \u00b7 h\u00e1 2 dias<\/span><span>6 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:71%;background:var(--amber)\"><\/div><\/div><span style=\"font-weight:600;color:var(--amber)\">71%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u25c8<\/span><span class=\"tl-title\">Variante v\u00eddeo \u2014 Express middlewares<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-gen\">\u25cc gerando...<\/span><span class=\"tl-badge tl-var\">variante v\u00eddeo<\/span><\/div><\/div><div class=\"tl-row2\"><span>Node.js \u00b7 gerada por demanda<\/span><span>Em gera\u00e7\u00e3o h\u00e1 4min...<\/span><span>\u2014<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">CSS avan\u00e7ado \u2014 anima\u00e7\u00f5es para feed Instagram<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>CSS \u00b7 Instagram clone<\/span><span>Gerado em 19s \u00b7 hoje<\/span><span>3 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:41%;background:var(--rose)\"><\/div><\/div><span style=\"font-weight:600;color:var(--rose)\">41% \u26a0<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">Pipeline CI\/CD \u2014 GitHub Actions + Railway<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-gen\">\u25cc gerando...<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>DevOps \u00b7 iFood clone<\/span><span>Em gera\u00e7\u00e3o h\u00e1 2min...<\/span><span>\u2014<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"overlay\" id=\"drawer-overlay\" onclick=\"closeDrawer()\">\r\n <div class=\"drawer\" onclick=\"event.stopPropagation()\">\r\n <button class=\"drawer-close\" onclick=\"closeDrawer()\">\u2715 fechar<\/button>\r\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:4px\">\r\n <div class=\"stu-avatar\" id=\"drawer-avatar\" style=\"background:#6c63ff;width:48px;height:48px;font-size:15px\">JS<\/div>\r\n <div><div class=\"drawer-name\" id=\"drawer-name\">Jo\u00e3o Silva<\/div><div class=\"drawer-proj\" id=\"drawer-proj\">iFood clone \u00b7 12 aulas conclu\u00eddas<\/div><\/div>\r\n <\/div>\r\n <div class=\"drawer-interp\" id=\"drawer-interp\">Perfil carregando...<\/div>\r\n <div class=\"p-section\" style=\"margin-top:0\">Variante entregue vs motivo<\/div>\r\n <table class=\"delivery-table\">\r\n <thead><tr><th>Aula<\/th><th>Variante<\/th><th>Motivo<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>Node.js fundamentos<\/td><td>V\u00eddeo<\/td><td>preferred_format<\/td><\/tr>\r\n <tr><td>Express REST API<\/td><td>V\u00eddeo<\/td><td>preferred_format<\/td><\/tr>\r\n <tr><td>PostgreSQL card\u00e1pios<\/td><td>Texto<\/td><td>fallback (v\u00eddeo gerando)<\/td><\/tr>\r\n <tr><td>React componentes<\/td><td>V\u00eddeo<\/td><td>preferred_format<\/td><\/tr>\r\n <tr><td>iFood tela React<\/td><td>H5P<\/td><td>new_user_default<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"p-section\" style=\"margin-top:20px\">F\u00f3rmula do perfil<\/div>\r\n <div class=\"formula-block\">\r\n <span class=\"hl\">retentionScore(formato)<\/span> =<br>\r\n (conclusao_media \u00d7 0.5) +<br>\r\n (acerto_quiz_media \u00d7 0.3) +<br>\r\n (sem_replays_excessivos \u00d7 0.2)<br><br>\r\n <span style=\"color:#8a8880\">Calculado por job peri\u00f3dico.<br>M\u00ednimo 3 aulas por formato para ativar.<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"modal-backdrop\" id=\"formula-modal\" onclick=\"closeModal()\">\r\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\r\n <div class=\"modal-title\">Como o perfil de aprendizado \u00e9 calculado<\/div>\r\n <div class=\"modal-sub\">LearnerProfile \u00b7 job peri\u00f3dico \u00b7 m\u00ednimo 3 aulas por formato<\/div>\r\n <div class=\"modal-card\"><div class=\"modal-card-title\">Sinais coletados (LearnerEvent)<\/div>\r\n <div style=\"font-size:12px;color:var(--ink2);line-height:1.8\">\u25cf Tempo total assistido vs dura\u00e7\u00e3o = % de conclus\u00e3o<br>\u25cf N\u00famero de replays = dificuldade no t\u00f3pico<br>\u25cf Acertos e tentativas no quiz = desempenho<br>\u25cf Formato escolhido = prefer\u00eancia declarada<\/div>\r\n <\/div>\r\n <div class=\"modal-card\"><div class=\"modal-card-title\">F\u00f3rmula de score<\/div>\r\n <div class=\"formula-block\"><span class=\"hl\">retentionScore(formato)<\/span> =<br> (conclusao_media \u00d7 0.5) +<br> (acerto_quiz_media \u00d7 0.3) +<br> (sem_replays_excessivos \u00d7 0.2)<br><br><span style=\"color:var(--ink3)\">Alunos com < 3 aulas em um formato recebem o formato padr\u00e3o.<\/span><\/div>\r\n <\/div>\r\n <div class=\"modal-card\"><div class=\"modal-card-title\">Algoritmo de sele\u00e7\u00e3o (V1)<\/div>\r\n <div class=\"formula-block\">1. Busca LearnerProfile do aluno<br>2. Se preferredFormat definido (\u22653 aulas, reten\u00e7\u00e3o \u226565%)<br> \u2192 entrega esse formato \u00b7 reason: <span class=\"hl\">\"preferred_format\"<\/span><br>3. Se perfil vazio (aluno novo)<br> \u2192 entrega v\u00eddeo \u00b7 reason: <span class=\"hl\">\"new_user_default\"<\/span><br>4. Se variante preferida est\u00e1 \"generating\"<br> \u2192 entrega pr\u00f3ximo dispon\u00edvel \u00b7 reason: <span class=\"hl\">\"fallback_generating\"<\/span><br>5. Sempre registra em <span class=\"hl\">LessonDelivery<\/span> para auditoria<\/div>\r\n <\/div>\r\n <button class=\"modal-close\" onclick=\"closeModal()\">Fechar<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550 VIEW SWITCHING \u2550\u2550\u2550 *\/\r\nfunction switchView(id, btn) {\r\n document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));\r\n document.getElementById('view-' + id).classList.add('active');\r\n if (btn) {\r\n document.querySelectorAll('.sw-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n } else {\r\n document.querySelectorAll('.sw-btn').forEach(b => b.classList.remove('active'));\r\n document.querySelectorAll('.sw-btn')[0].classList.add('active');\r\n }\r\n window.scrollTo(0, 0);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 ARCH TABS \u2550\u2550\u2550 *\/\r\nfunction showTab(view, id) {\r\n document.querySelectorAll('#view-arch .panel').forEach(p => p.classList.remove('active'));\r\n document.querySelectorAll('#view-arch .tab').forEach(t => t.classList.remove('active'));\r\n document.getElementById('tab-' + id).classList.add('active');\r\n event.target.classList.add('active');\r\n}\r\n\r\n\/* \u2550\u2550\u2550 STUDENT FLOW \u2550\u2550\u2550 *\/\r\nvar chatPhase = 0;\r\n\r\nfunction updateStepper(step) {\r\n for (var i = 1; i <= 4; i++) {\r\n var el = document.getElementById('ss' + i);\r\n el.classList.remove('active', 'done');\r\n if (i < step) el.classList.add('done');\r\n else if (i === step) el.classList.add('active');\r\n }\r\n}\r\n\r\nfunction goToStep(n) {\r\n document.querySelectorAll('.s-panel').forEach(p => p.classList.remove('active'));\r\n document.getElementById('s-step-' + n).classList.add('active');\r\n updateStepper(n);\r\n window.scrollTo(0, 0);\r\n}\r\n\r\nfunction goToLesson() { goToStep(3); }\r\n\r\nfunction selectProj(card, text) {\r\n document.querySelectorAll('.proj-card').forEach(c => c.classList.remove('sel'));\r\n card.classList.add('sel');\r\n document.getElementById('chat-input').value = text;\r\n}\r\n\r\nfunction addMsg(who, html) {\r\n var msgs = document.getElementById('chat-messages');\r\n var div = document.createElement('div');\r\n div.className = 'msg' + (who === 'user' ? ' user' : '');\r\n div.innerHTML = '<div class=\"avatar ' + who + '\">' + (who === 'ai' ? 'AI' : 'EU') + '<\/div><div class=\"bubble\">' + html + '<\/div>';\r\n msgs.appendChild(div);\r\n msgs.scrollTop = msgs.scrollHeight;\r\n}\r\n\r\nfunction showTyping(cb, delay) {\r\n var msgs = document.getElementById('chat-messages');\r\n var div = document.createElement('div');\r\n div.className = 'msg'; div.id = 'typing-indicator';\r\n div.innerHTML = '<div class=\"avatar ai\">AI<\/div><div class=\"bubble\"><div class=\"typing\"><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><\/div><\/div>';\r\n msgs.appendChild(div);\r\n msgs.scrollTop = msgs.scrollHeight;\r\n setTimeout(function() {\r\n var t = document.getElementById('typing-indicator');\r\n if (t) t.remove();\r\n cb();\r\n }, delay || 1400);\r\n}\r\n\r\nvar chatResponses = [\r\n function() {\r\n addMsg('ai', '\u00d3tima escolha! Para montar o melhor plano, me conta:<br><br>\u2014 Voc\u00ea j\u00e1 tem experi\u00eancia com <strong>React<\/strong> ou <strong>Node.js<\/strong>?<br>\u2014 Quer incluir <strong>pagamentos<\/strong>, <strong>painel do restaurante<\/strong> e <strong>rastreamento<\/strong>?<div class=\"quick-replies\"><button class=\"qr\" onclick=\"sendQuick(\\'Sou iniciante, nunca fiz backend\\')\">Sou iniciante<\/button><button class=\"qr\" onclick=\"sendQuick(\\'Tenho no\u00e7\u00e3o b\u00e1sica de JavaScript\\')\">No\u00e7\u00e3o b\u00e1sica<\/button><\/div>');\r\n },\r\n function() {\r\n addMsg('ai', 'Perfeito! Encontrei <span class=\"tag\">22 aulas prontas<\/span> no cat\u00e1logo que cobrem sua trilha.<br><br>Vou gerar <span class=\"tag\">10 aulas espec\u00edficas<\/span> para o contexto do iFood \u2014 card\u00e1pios, mapa e painel do restaurante.<br><br>Estimativa: <strong>32 aulas \u00b7 6\u20138 semanas<\/strong>. Gerando seu plano...<br><br><span id=\"plan-status\" style=\"font-family:\\'DM Mono\\',monospace;font-size:11px;color:#9191a8\">\u27f3 processando...<\/span>');\r\n setTimeout(function() {\r\n var s = document.getElementById('plan-status');\r\n if (s) {\r\n s.style.color = '#4ade80';\r\n s.textContent = '\u2713 Plano gerado!';\r\n var b = document.createElement('div');\r\n b.style.marginTop = '10px';\r\n b.innerHTML = '<button class=\"plan-ready-btn\" onclick=\"goToStep(2)\">Ver meu plano de curso \u2192<\/button>';\r\n s.parentNode.appendChild(b);\r\n }\r\n }, 2000);\r\n }\r\n];\r\n\r\nfunction sendChat() {\r\n var input = document.getElementById('chat-input');\r\n var text = input.value.trim();\r\n if (!text) return;\r\n input.value = ''; input.style.height = 'auto';\r\n addMsg('user', text);\r\n if (chatPhase < chatResponses.length) {\r\n var resp = chatResponses[chatPhase++];\r\n showTyping(resp, 1200 + chatPhase * 100);\r\n }\r\n}\r\n\r\nfunction sendQuick(text) {\r\n document.getElementById('chat-input').value = text;\r\n sendChat();\r\n}\r\n\r\n\/* \u2550\u2550\u2550 VIDEO PLAYER \u2550\u2550\u2550 *\/\r\nvar isPlaying = false;\r\nvar vidProgress = 0;\r\nvar vidInterval = null;\r\n\r\nfunction togglePlay() {\r\n if (!isPlaying) {\r\n isPlaying = true;\r\n document.getElementById('vid-placeholder').style.display = 'none';\r\n document.getElementById('vid-playing').style.display = 'flex';\r\n document.getElementById('play-ctrl').textContent = '\u23f8';\r\n addEvt('play', 'V\u00eddeo iniciado');\r\n vidInterval = setInterval(function() {\r\n vidProgress = Math.min(vidProgress + 0.003, 1);\r\n var secs = Math.floor(vidProgress * 525);\r\n var pct = (vidProgress * 100).toFixed(1) + '%';\r\n document.getElementById('vid-prog-inner').style.width = pct;\r\n document.getElementById('vid-prog-bar').style.width = pct;\r\n var t = formatTime(secs) + ' \/ 8:45';\r\n document.getElementById('vid-time-disp').textContent = t;\r\n document.getElementById('vid-time-ctrl').textContent = t;\r\n updateRet('video', 1);\r\n if (vidProgress >= 1) { clearInterval(vidInterval); isPlaying = false; }\r\n }, 150);\r\n } else {\r\n clearInterval(vidInterval); isPlaying = false;\r\n document.getElementById('play-ctrl').textContent = '\u25b6';\r\n addEvt('pause', 'V\u00eddeo pausado em ' + document.getElementById('vid-time-ctrl').textContent.split('\/')[0].trim());\r\n }\r\n}\r\n\r\nfunction replayVid() {\r\n vidProgress = Math.max(0, vidProgress - 0.08);\r\n addEvt('replay', 'Replay \u2014 ' + formatTime(Math.floor(vidProgress * 525)));\r\n}\r\n\r\nfunction seekVid(e) {\r\n var pct = e.offsetX \/ e.currentTarget.offsetWidth;\r\n vidProgress = pct;\r\n document.getElementById('vid-prog-bar').style.width = (pct*100) + '%';\r\n document.getElementById('vid-prog-inner').style.width = (pct*100) + '%';\r\n var t = formatTime(Math.floor(pct*525)) + ' \/ 8:45';\r\n document.getElementById('vid-time-disp').textContent = t;\r\n document.getElementById('vid-time-ctrl').textContent = t;\r\n}\r\n\r\nfunction formatTime(s) {\r\n return Math.floor(s\/60) + ':' + (s%60 < 10 ? '0' : '') + (s%60);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 FORMAT SWITCH \u2550\u2550\u2550 *\/\r\nfunction switchFmt(fmt) {\r\n ['video','text','h5p'].forEach(function(f) {\r\n document.getElementById('fc-' + f).style.display = 'none';\r\n document.getElementById('fb-' + f).classList.remove('active');\r\n });\r\n document.getElementById('fc-' + fmt).style.display = 'block';\r\n document.getElementById('fb-' + fmt).classList.add('active');\r\n var labels = {video:'v\u00eddeo', text:'texto \/ leitura', h5p:'H5P interativo'};\r\n document.getElementById('adaptive-badge').textContent = 'formato adaptado: ' + labels[fmt];\r\n addEvt(fmt, 'Trocou para ' + labels[fmt]);\r\n updateRet(fmt, 3);\r\n showToast('Formato registrado no perfil.');\r\n if (fmt !== 'video' && isPlaying) { clearInterval(vidInterval); isPlaying = false; document.getElementById('play-ctrl').textContent = '\u25b6'; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 RETENTION UPDATE \u2550\u2550\u2550 *\/\r\nvar retValues = {video: 78, h5p: 65, text: 42};\r\nvar retUpdateCount = {video: 0, h5p: 0, text: 0};\r\n\r\nfunction updateRet(fmt, delta) {\r\n retUpdateCount[fmt]++;\r\n if (retUpdateCount[fmt] % 5 !== 0 && delta < 2) return;\r\n retValues[fmt] = Math.min(99, retValues[fmt] + delta);\r\n var fill = document.getElementById('ret-' + fmt);\r\n var pct = document.getElementById('ret-' + fmt + '-pct');\r\n if (fill && pct) {\r\n fill.style.width = retValues[fmt] + '%';\r\n pct.textContent = retValues[fmt] + '%';\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 EVENTS FEED \u2550\u2550\u2550 *\/\r\nvar evtColors = {play:'#4ade80', pause:'#5a5a70', replay:'#f97316', video:'#9d78ff', text:'#2dd4bf', h5p:'#f97316', quiz:'#9d78ff'};\r\nfunction addEvt(type, text) {\r\n var feed = document.getElementById('event-feed');\r\n if (!feed) return;\r\n var div = document.createElement('div');\r\n div.className = 'event-item';\r\n div.innerHTML = '<div class=\"event-dot\" style=\"background:' + (evtColors[type]||'#9d78ff') + '\"><\/div><div><div>' + text + '<\/div><div style=\"color:#3a3a50;font-size:9px\">agora<\/div><\/div>';\r\n feed.insertBefore(div, feed.firstChild);\r\n if (feed.children.length > 6) feed.removeChild(feed.lastChild);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 QUIZ \u2550\u2550\u2550 *\/\r\nvar selOpted = null;\r\nfunction selOpt(el, letter) {\r\n document.querySelectorAll('.quiz-opt').forEach(o => o.classList.remove('sel'));\r\n el.classList.add('sel');\r\n selOpted = el;\r\n}\r\nfunction checkQuiz() {\r\n if (!selOpted) { showToast('Selecione uma op\u00e7\u00e3o primeiro.'); return; }\r\n var ok = selOpted.dataset.ok === 'true';\r\n document.querySelectorAll('.quiz-opt').forEach(o => { if (o.dataset.ok === 'true') o.classList.add('correct'); });\r\n if (!ok) { selOpted.classList.add('wrong'); selOpted.classList.remove('sel'); }\r\n var fb = document.getElementById('quiz-fb');\r\n fb.className = 'quiz-fb show ' + (ok ? 'ok' : 'err');\r\n fb.textContent = ok ? 'Correto! O Node delega o I\/O ao sistema operacional via libuv e registra um callback.' : 'N\u00e3o exatamente. O Node n\u00e3o bloqueia \u2014 delega o I\/O e continua processando. Resposta: B.';\r\n document.getElementById('quiz-actions').innerHTML = '<button class=\"quiz-action-btn\" onclick=\"showToast(\\'Quiz conclu\u00eddo! Perfil atualizado.\\');addEvt(\\'quiz\\',\\'' + (ok ? 'Quiz: resposta correta \u2713' : 'Quiz: resposta incorreta \u2014 refor\u00e7o recomendado') + '\\');updateRet(\\'h5p\\',' + (ok ? '4' : '-2') + ')\">Pr\u00f3xima \u2192<\/button>';\r\n addEvt('quiz', ok ? 'Quiz: resposta correta \u2713' : 'Quiz: resposta incorreta');\r\n}\r\n\r\n\/* \u2550\u2550\u2550 PROFESSOR TABS \u2550\u2550\u2550 *\/\r\nfunction showPTab(id, btn) {\r\n document.querySelectorAll('.p-panel').forEach(p => p.classList.remove('active'));\r\n document.querySelectorAll('.p-tab').forEach(t => t.classList.remove('active'));\r\n document.getElementById('p-' + id).classList.add('active');\r\n btn.classList.add('active');\r\n}\r\n\r\n\/* \u2550\u2550\u2550 DRAWER \u2550\u2550\u2550 *\/\r\nvar avatarColors = {Jo\u00e3o:'#6c63ff', Ana:'#9d78ff', Pedro:'#f97316', Mariana:'#15803d', Carlos:'#2dd4bf', Julia:'#be123c', Rafael:'#334155', Beatriz:'#2563c4'};\r\nfunction openDrawer(name, proj, fmt, ret, interp) {\r\n var initials = name.split(' ').map(n => n[0]).join('').slice(0,2);\r\n document.getElementById('drawer-avatar').textContent = initials;\r\n document.getElementById('drawer-avatar').style.background = avatarColors[name] || '#6c63ff';\r\n document.getElementById('drawer-name').textContent = name;\r\n document.getElementById('drawer-proj').textContent = proj + ' \u00b7 formato: ' + fmt + ' \u00b7 reten\u00e7\u00e3o: ' + ret + '%';\r\n document.getElementById('drawer-interp').textContent = interp;\r\n document.getElementById('drawer-overlay').classList.add('open');\r\n}\r\nfunction closeDrawer() { document.getElementById('drawer-overlay').classList.remove('open'); }\r\n\r\n\/* \u2550\u2550\u2550 FORMULA MODAL \u2550\u2550\u2550 *\/\r\nfunction openModal() { document.getElementById('formula-modal').classList.add('open'); }\r\nfunction closeModal() { document.getElementById('formula-modal').classList.remove('open'); }\r\n\r\n\/* \u2550\u2550\u2550 TOAST \u2550\u2550\u2550 *\/\r\nvar toastTimeout;\r\nfunction showToast(msg) {\r\n var t = document.getElementById('toast');\r\n t.textContent = msg;\r\n t.classList.add('show');\r\n clearTimeout(toastTimeout);\r\n toastTimeout = setTimeout(function() { t.classList.remove('show'); }, 2800);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DevFullStack \u2014 Plataforma Adaptativa DevFullStack Arquitetura Vis\u00e3o do Aluno Dashboard do Professor Desafio T\u00e9cnico \u00b7 V1 \u00b7 2025 Processo Seletivo \u00b7 Etapa 2 Desafio T\u00e9cnicoDevFullStack Proposta de nova arquitetura para uma plataforma de e-learning baseada em aprendizado por projetos, com gera\u00e7\u00e3o de cursos personalizados via IA e camada adaptativa de conte\u00fado. Novo fluxo com IA […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-554","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=554"}],"version-history":[{"count":4,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/554\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/554\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nDevFullStack \u2014 Plataforma Adaptativa<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOKENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --bg:#f4f2ee;--bg2:#eceae4;--bg3:#e2dfd8;\r\n --ink:#1a1916;--ink2:#4a4840;--ink3:#8a8880;\r\n --rule:rgba(26,25,22,.1);--rule2:rgba(26,25,22,.2);\r\n --blue:#2563c4;--blue-bg:#dbeafe;--blue-bd:#93b8f5;\r\n --green:#15803d;--green-bg:#dcfce7;--green-bd:#86efac;\r\n --amber:#b45309;--amber-bg:#fef3c7;--amber-bd:#fcd34d;\r\n --rose:#be123c;--rose-bg:#ffe4e6;--rose-bd:#fda4af;\r\n --violet:#6d28d9;--violet-bg:#ede9fe;--violet-bd:#c4b5fd;\r\n --slate:#334155;--slate-bg:#f1f5f9;--slate-bd:#cbd5e1;\r\n --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;\r\n}\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nbody{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;}\r\nbody::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;\r\n background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);\r\n background-size:32px 32px;}\r\n::-webkit-scrollbar{width:5px;height:5px;}\r\n::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:3px;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 APP SWITCHER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#app-switcher{\r\n position:fixed;top:0;left:0;right:0;z-index:200;\r\n background:var(--ink);color:#fff;\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:0 40px;height:44px;\r\n border-bottom:1px solid rgba(255,255,255,.1);\r\n}\r\n.sw-logo{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.3px;}\r\n.sw-logo span{opacity:.4;}\r\n.sw-btns{display:flex;gap:2px;}\r\n.sw-btn{\r\n font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;\r\n padding:6px 16px;border-radius:6px;border:none;\r\n background:transparent;color:rgba(255,255,255,.5);cursor:pointer;transition:all .15s;\r\n}\r\n.sw-btn:hover{color:#fff;background:rgba(255,255,255,.1);}\r\n.sw-btn.active{color:#fff;background:rgba(255,255,255,.15);}\r\n.sw-tag{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.3);}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 VIEWS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.view{display:none;padding-top:44px;}\r\n.view.active{display:block;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 ARCH VIEW \u2014 light \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cover{position:relative;z-index:1;border-bottom:2px solid var(--ink);padding:40px;\r\n display:grid;grid-template-columns:1fr 1fr;gap:48px;}\r\n.cover-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;\r\n text-transform:uppercase;color:var(--ink3);margin-bottom:14px;display:flex;align-items:center;gap:10px;}\r\n.cover-eyebrow::before{content:'';display:inline-block;width:28px;height:2px;background:var(--ink3);}\r\n.cover-title{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.25;margin-bottom:10px;}\r\n.cover-subtitle{font-size:15px;color:var(--ink2);line-height:1.7;max-width:460px;}\r\n.cover-right{display:flex;flex-direction:column;gap:12px;padding-top:8px;}\r\n.cover-section-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px;}\r\n.context-card{background:white;border:1.5px solid var(--rule2);border-radius:8px;padding:14px 16px;}\r\n.context-card p{font-size:13px;color:var(--ink2);line-height:1.7;}\r\n.context-card p+p{margin-top:8px;}\r\n.context-card strong{color:var(--ink);font-weight:600;}\r\n.cover-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}\r\n.meta-chip{font-family:var(--mono);font-size:10px;padding:4px 12px;border-radius:100px;border:1px solid var(--rule2);color:var(--ink3);background:white;display:flex;align-items:center;gap:6px;}\r\n.meta-chip::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}\r\n.chip-v::before{background:var(--violet)}.chip-b::before{background:var(--blue)}\r\n.chip-g::before{background:var(--green)}.chip-s::before{background:var(--slate)}\r\n.nav-bar{position:sticky;top:44px;z-index:100;background:var(--bg);border-bottom:1px solid var(--rule2);padding:0 40px;display:flex;justify-content:space-between;align-items:center;}\r\n.tabs{display:flex;gap:0;}\r\n.tab{font-family:var(--mono);font-size:12px;font-weight:500;padding:13px 20px;cursor:pointer;border:none;background:none;color:var(--ink3);letter-spacing:.05em;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}\r\n.tab:hover{color:var(--ink)}.tab.active{color:var(--ink);border-bottom-color:var(--ink);}\r\n.nav-hint{font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\nmain{position:relative;z-index:1;}\r\n.panel{display:none;padding:40px;}.panel.active{display:block;}\r\n.section-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:20px;display:flex;align-items:center;gap:12px;}\r\n.section-label::after{content:'';flex:1;height:1px;background:var(--rule2);}\r\n.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}\r\n.arch-col{padding:24px 28px;border-right:1px solid var(--rule2);}\r\n.arch-col:last-child{border-right:none;}\r\n.arch-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding-bottom:12px;border-bottom:1px solid var(--rule2);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}\r\n.arch-title-badge{font-size:9px;padding:2px 8px;border-radius:100px;border:1px solid;font-weight:600;letter-spacing:.08em;}\r\n.badge-mvp{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}\r\n.badge-future{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.flow{display:flex;flex-direction:column;gap:0;}\r\n.node{border:1.5px solid;border-radius:6px;padding:10px 14px;position:relative;transition:transform .15s,box-shadow .15s;cursor:default;}\r\n.node:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08);}\r\n.node-title{font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.3;margin-bottom:2px;}\r\n.node-sub{font-family:var(--mono);font-size:10px;opacity:.65;line-height:1.4;}\r\n.node-badge{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:100px;border:1px solid;}\r\n.node-blue{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);}\r\n.node-green{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}\r\n.node-amber{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.node-rose{background:var(--rose-bg);border-color:var(--rose-bd);color:var(--rose);}\r\n.node-violet{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet);}\r\n.node-slate{background:var(--slate-bg);border-color:var(--slate-bd);color:var(--slate);}\r\n.node-ink{background:var(--ink);border-color:var(--ink);color:var(--bg);}\r\n.connector{display:flex;flex-direction:column;align-items:center;padding:2px 0;}\r\n.connector-line{width:1.5px;background:var(--rule2);flex:1;min-height:20px;}\r\n.connector-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--rule2);}\r\n.split{display:grid;gap:8px;}\r\n.split-2{grid-template-columns:1fr 1fr;}\r\n.split-3{grid-template-columns:1fr 1fr 1fr;}\r\n.split-4{grid-template-columns:repeat(4,1fr);}\r\n.group{border:1.5px dashed var(--rule2);border-radius:10px;padding:14px;position:relative;background:rgba(255,255,255,.4);}\r\n.group-label{position:absolute;top:-10px;left:14px;background:var(--bg);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:0 6px;}\r\n.callout{display:flex;gap:12px;padding:14px 16px;margin-bottom:24px;border-radius:8px;border:1.5px solid;font-size:13px;line-height:1.6;}\r\n.callout-amber{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.callout-violet{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet);}\r\n.callout-icon{font-size:15px;flex-shrink:0;margin-top:1px;}\r\n.callout-text{color:var(--ink2);}\r\n.callout-text strong{color:var(--ink);font-weight:600;}\r\n.feedback-loop{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-top:8px;background:transparent;border:1.5px dashed var(--rule2);border-radius:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.entities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;}\r\n.entity-card{background:white;border:1.5px solid var(--rule2);border-radius:8px;overflow:hidden;transition:box-shadow .15s;}\r\n.entity-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06);}\r\n.entity-header{padding:10px 14px;border-bottom:1px solid var(--rule2);display:flex;align-items:center;justify-content:space-between;}\r\n.entity-name{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);}\r\n.entity-pill{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:100px;border:1px solid;}\r\n.pill-existing{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);}\r\n.pill-new{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber);}\r\n.entity-fields{padding:10px 14px;}\r\n.field-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;}\r\n.field-row:last-child{border-bottom:none;}\r\n.field-name{color:var(--ink2);flex:1;}.field-type{color:var(--ink3);font-size:10px;}\r\n.field-new .field-name{color:var(--amber);font-weight:600;}\r\n.field-new .field-name::before{content:'+ ';}\r\n.tradeoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin-bottom:32px;}\r\n.tradeoff-card{background:white;border:1.5px solid var(--rule2);border-radius:8px;padding:16px 18px;}\r\n.tradeoff-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;}\r\n.tradeoff-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}\r\n.tradeoff-item{font-size:13px;color:var(--ink2);line-height:1.65;padding:5px 0;border-bottom:1px solid var(--rule);display:flex;gap:8px;}\r\n.tradeoff-item:last-child{border-bottom:none;}\r\n.tradeoff-item::before{flex-shrink:0;margin-top:2px;font-size:11px;}\r\n.tradeoff-in::before{content:'\u2713';color:var(--green);}\r\n.tradeoff-out::before{content:'\u2715';color:var(--rose);}\r\n.premise-list{display:flex;flex-direction:column;gap:8px;max-width:740px;}\r\n.premise-item{display:flex;gap:14px;padding:12px 16px;background:white;border:1.5px solid var(--rule2);border-radius:6px;}\r\n.premise-id{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink3);min-width:24px;}\r\n.premise-text{font-size:13px;color:var(--ink2);line-height:1.6;}\r\n.premise-text strong{color:var(--ink);font-weight:600;}\r\n.premise-text code{font-family:var(--mono);font-size:11px;background:var(--bg2);padding:1px 5px;border-radius:3px;color:var(--ink2);}\r\n.legend{display:flex;flex-wrap:wrap;gap:16px;padding:14px 40px;border-top:1px solid var(--rule2);background:var(--bg2);position:sticky;bottom:0;z-index:10;}\r\n.legend-item{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.legend-dot{width:10px;height:10px;border-radius:3px;border:1.5px solid;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 STUDENT VIEW \u2014 dark \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#view-student{background:#0a0a0f;color:#e8e8f0;min-height:100vh;}\r\n#view-student::before{display:none;}\r\n.s-topbar{\r\n position:sticky;top:44px;z-index:100;\r\n background:#0a0a0f;border-bottom:1px solid rgba(255,255,255,.07);\r\n padding:12px 32px;display:flex;align-items:center;gap:20px;\r\n}\r\n.s-back{font-family:'DM Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);\r\n background:none;border:1px solid rgba(255,255,255,.1);border-radius:6px;\r\n padding:5px 12px;cursor:pointer;transition:all .15s;white-space:nowrap;}\r\n.s-back:hover{color:#fff;border-color:rgba(255,255,255,.25);}\r\n.s-stepper{display:flex;align-items:center;gap:0;flex:1;justify-content:center;}\r\n.s-step-item{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;color:rgba(255,255,255,.35);}\r\n.s-step-item.active{color:#c4b5fd;}\r\n.s-step-item.done{color:#4ade80;}\r\n.s-step-circle{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;}\r\n.s-step-item.active .s-step-circle{background:#6c63ff;border-color:#6c63ff;color:#fff;}\r\n.s-step-item.done .s-step-circle{background:#15803d;border-color:#15803d;color:#fff;}\r\n.s-step-sep{width:32px;height:1px;background:rgba(255,255,255,.1);margin:0 4px;}\r\n.s-ai-badge{font-family:'DM Mono',monospace;font-size:10px;color:#2dd4bf;\r\n background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.2);\r\n border-radius:100px;padding:4px 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;}\r\n.s-ai-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#2dd4bf;animation:pulse 2s infinite;}\r\n@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}\r\n\r\n.s-panel{display:none;min-height:calc(100vh - 96px);}\r\n.s-panel.active{display:flex;}\r\n\r\n\/* STEP 1 \u2014 CHAT *\/\r\n.chat-layout{display:grid;grid-template-columns:260px 1fr;width:100%;height:calc(100vh - 96px);}\r\n.chat-sidebar{background:#111118;border-right:1px solid rgba(255,255,255,.07);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}\r\n.chat-sidebar-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:0 4px;margin-bottom:4px;}\r\n.proj-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .2s;}\r\n.proj-card:hover{border-color:rgba(108,99,255,.4);background:rgba(108,99,255,.06);}\r\n.proj-card.sel{border-color:rgba(108,99,255,.5);background:rgba(108,99,255,.08);}\r\n.proj-card h4{font-family:'Syne',sans-serif;font-size:13px;font-weight:600;color:#e8e8f0;margin-bottom:3px;}\r\n.proj-card p{font-size:11px;color:#5a5a70;line-height:1.4;}\r\n.chat-main{display:flex;flex-direction:column;background:#0a0a0f;}\r\n.chat-header{padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;}\r\n.chat-header h2{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;}\r\n.messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:16px;}\r\n.msg{display:flex;gap:12px;animation:msgIn .3s ease both;}\r\n@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\r\n.msg.user{flex-direction:row-reverse;}\r\n.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:'Syne',sans-serif;}\r\n.avatar.ai{background:linear-gradient(135deg,#6c63ff,#9d78ff);color:#fff;}\r\n.avatar.user{background:#1e1e28;border:1px solid rgba(255,255,255,.12);color:#9191a8;}\r\n.bubble{max-width:500px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:14px;border-top-left-radius:4px;padding:12px 16px;font-size:13px;line-height:1.65;color:#e8e8f0;}\r\n.msg.user .bubble{background:rgba(108,99,255,.12);border-color:rgba(108,99,255,.25);border-radius:14px;border-top-right-radius:4px;}\r\n.bubble strong{color:#c4b5fd;font-weight:500;}\r\n.bubble .tag{display:inline-block;background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.25);border-radius:6px;padding:1px 7px;font-size:11px;font-family:'DM Mono',monospace;color:#c4b5fd;margin:1px 2px;}\r\n.quick-replies{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}\r\n.qr{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:5px 12px;font-size:11px;color:#9191a8;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;}\r\n.qr:hover{border-color:rgba(108,99,255,.4);color:#c4b5fd;background:rgba(108,99,255,.06);}\r\n.typing{display:flex;gap:4px;align-items:center;padding:2px 0;}\r\n.typing-dot{width:5px;height:5px;border-radius:50%;background:#5a5a70;animation:typing 1.2s infinite;}\r\n.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}\r\n@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}\r\n.plan-ready-btn{display:inline-flex;align-items:center;gap:8px;background:#6c63ff;color:#fff;border:none;border-radius:100px;padding:10px 20px;font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-top:10px;transition:all .2s;}\r\n.plan-ready-btn:hover{background:#9d78ff;transform:translateY(-1px);}\r\n.chat-input-area{padding:16px 28px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:10px;align-items:flex-end;}\r\n.chat-input{flex:1;background:#18181f;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 14px;color:#e8e8f0;font-family:'DM Sans',sans-serif;font-size:13px;resize:none;outline:none;transition:border-color .2s;min-height:42px;max-height:120px;}\r\n.chat-input:focus{border-color:rgba(108,99,255,.4);}\r\n.chat-input::placeholder{color:#5a5a70;}\r\n.send-btn{width:40px;height:40px;border-radius:50%;background:#6c63ff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;color:#fff;font-size:16px;}\r\n.send-btn:hover{background:#9d78ff;transform:scale(1.05);}\r\n\r\n\/* STEP 2 \u2014 PLAN *\/\r\n.plan-layout{display:grid;grid-template-columns:1fr 280px;width:100%;}\r\n.plan-content{padding:32px 36px;overflow-y:auto;}\r\n.plan-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#2dd4bf;margin-bottom:8px;}\r\n.plan-title{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;color:#e8e8f0;}\r\n.plan-sub{color:#9191a8;font-size:13px;margin-bottom:28px;}\r\n.module-title{font-family:'DM Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5a5a70;margin-bottom:10px;display:flex;align-items:center;gap:10px;}\r\n.module-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06);}\r\n.lesson-row{display:flex;align-items:center;gap:12px;background:#111118;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 16px;margin-bottom:6px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}\r\n.lesson-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:transparent;transition:background .2s;}\r\n.lesson-row:hover{border-color:rgba(255,255,255,.12);background:#18181f;}\r\n.lesson-row:hover::before{background:#6c63ff;}\r\n.lesson-row.cat::before{background:#2dd4bf;}\r\n.lesson-row.ai-gen::before{background:#f97316;}\r\n.lesson-num{width:24px;height:24px;border-radius:6px;background:#1e1e28;border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:10px;color:#5a5a70;flex-shrink:0;}\r\n.lesson-info{flex:1;}\r\n.lesson-title-text{font-size:13px;font-weight:500;color:#e8e8f0;margin-bottom:2px;}\r\n.lesson-meta-text{font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;}\r\n.vbadges{display:flex;gap:3px;}\r\n.vbadge{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:'DM Mono',monospace;border:1px solid rgba(255,255,255,.07);color:#5a5a70;}\r\n.vbadge.v{background:rgba(108,99,255,.1);color:#c4b5fd;border-color:rgba(108,99,255,.2);}\r\n.vbadge.t{background:rgba(45,212,191,.08);color:#2dd4bf;border-color:rgba(45,212,191,.2);}\r\n.vbadge.h{background:rgba(249,115,22,.08);color:#f97316;border-color:rgba(249,115,22,.2);}\r\n.src-badge{font-family:'DM Mono',monospace;font-size:9px;font-weight:600;padding:2px 8px;border-radius:6px;flex-shrink:0;}\r\n.src-cat{background:rgba(45,212,191,.1);color:#2dd4bf;border:1px solid rgba(45,212,191,.2);}\r\n.src-ai{background:rgba(249,115,22,.1);color:#f97316;border:1px solid rgba(249,115,22,.2);}\r\n.src-gen{background:rgba(255,255,255,.05);color:#5a5a70;border:1px solid rgba(255,255,255,.07);animation:shimmer 1.5s infinite;}\r\n@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.4}}\r\n.plan-start-btn{display:inline-flex;align-items:center;gap:8px;background:#6c63ff;color:#fff;border:none;border-radius:100px;padding:12px 24px;font-family:'Syne',sans-serif;font-size:14px;font-weight:600;cursor:pointer;margin-top:20px;transition:all .2s;}\r\n.plan-start-btn:hover{background:#9d78ff;transform:translateY(-1px);}\r\n.plan-sidebar{background:#111118;border-left:1px solid rgba(255,255,255,.07);padding:24px 18px;overflow-y:auto;}\r\n.stat-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px 16px;margin-bottom:10px;}\r\n.stat-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5a70;margin-bottom:4px;}\r\n.stat-val{font-family:'Syne',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.5px;}\r\n.stat-unit{font-size:12px;font-weight:400;color:#9191a8;margin-left:4px;}\r\n.prog-track{background:#1e1e28;border-radius:3px;height:4px;margin-top:6px;overflow:hidden;}\r\n.prog-fill{height:100%;border-radius:3px;transition:width 1s ease;}\r\n\r\n\/* STEP 3 \u2014 LESSON *\/\r\n.lesson-layout{display:grid;grid-template-columns:1fr 280px;width:100%;}\r\n.lesson-main{display:flex;flex-direction:column;overflow-y:auto;}\r\n.lesson-topbar{padding:16px 32px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}\r\n.breadcrumb{font-size:12px;color:#5a5a70;display:flex;align-items:center;gap:6px;}\r\n.breadcrumb span{color:#9191a8;}\r\n.breadcrumb a{color:#c4b5fd;cursor:pointer;text-decoration:none;}\r\n.adaptive-badge{display:flex;align-items:center;gap:5px;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.2);border-radius:100px;padding:4px 10px;font-family:'DM Mono',monospace;font-size:10px;color:#c4b5fd;}\r\n.adaptive-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#6c63ff;animation:pulse 2s infinite;}\r\n.fmt-switcher{display:flex;gap:3px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:3px;margin-left:auto;}\r\n.fmt-btn{padding:5px 12px;border-radius:5px;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;color:#5a5a70;cursor:pointer;transition:all .2s;}\r\n.fmt-btn.active{background:#6c63ff;color:#fff;box-shadow:0 2px 8px rgba(108,99,255,.3);}\r\n.fmt-btn:not(.active):hover{color:#e8e8f0;background:#1e1e28;}\r\n.fmt-content{flex:1;}\r\n.video-wrap{margin:24px 32px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;}\r\n.video-screen{aspect-ratio:16\/9;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}\r\n.play-circle{width:60px;height:60px;border-radius:50%;background:rgba(108,99,255,.9);display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-direction:column;}\r\n.play-circle:hover{transform:scale(1.1);}\r\n.video-overlay-title{font-size:12px;color:#9191a8;margin-top:8px;}\r\n#vid-playing{display:none;flex-direction:column;align-items:center;gap:10px;width:100%;padding:20px;}\r\n.vid-progress-wrap{width:200px;height:3px;background:#1e1e28;border-radius:2px;}\r\n.vid-progress-fill{height:100%;background:#6c63ff;border-radius:2px;width:0%;transition:width .1s linear;}\r\n.vid-time{font-family:'DM Mono',monospace;font-size:11px;color:#5a5a70;}\r\n.video-controls{padding:12px 18px;display:flex;align-items:center;gap:12px;}\r\n.ctrl-btn{background:none;border:none;color:#9191a8;cursor:pointer;transition:color .2s;padding:3px;display:flex;align-items:center;font-size:16px;}\r\n.ctrl-btn:hover{color:#e8e8f0;}\r\n.prog-track-v{flex:1;height:3px;background:#1e1e28;border-radius:2px;cursor:pointer;}\r\n.prog-fill-v{height:100%;background:#6c63ff;border-radius:2px;width:0%;transition:width .1s;}\r\n.time-label{font-family:'DM Mono',monospace;font-size:10px;color:#5a5a70;}\r\n.text-content{padding:24px 40px;max-width:720px;}\r\n.text-content h3{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:14px;color:#e8e8f0;}\r\n.text-content p{color:#9191a8;line-height:1.8;margin-bottom:14px;font-size:13px;}\r\n.code-block{background:#0d1117;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:18px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;margin:18px 0;overflow-x:auto;color:#a9dc76;}\r\n.kw{color:#ff6188}.fn{color:#a9dc76}.str{color:#ffd866}.cm{color:#5a5a70;font-style:italic;}\r\n.h5p-wrap{margin:24px 32px;background:#111118;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;}\r\n.h5p-hdr{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px;}\r\n.h5p-badge{background:rgba(249,115,22,.15);color:#f97316;border:1px solid rgba(249,115,22,.25);border-radius:5px;padding:2px 7px;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;}\r\n.h5p-type{font-family:'DM Mono',monospace;font-size:10px;color:#5a5a70;margin-left:auto;}\r\n.quiz-body{padding:24px 28px;}\r\n.quiz-q{font-family:'Syne',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.2px;margin-bottom:6px;color:#e8e8f0;}\r\n.quiz-sub{font-size:12px;color:#5a5a70;font-family:'DM Mono',monospace;margin-bottom:22px;}\r\n.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}\r\n.quiz-opt{display:flex;align-items:center;gap:12px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 16px;cursor:pointer;transition:all .2s;font-size:13px;color:#e8e8f0;}\r\n.quiz-opt:hover{border-color:rgba(108,99,255,.4);background:rgba(108,99,255,.05);}\r\n.quiz-opt.sel{border-color:#6c63ff;background:rgba(108,99,255,.1);}\r\n.quiz-opt.correct{border-color:#4ade80;background:rgba(74,222,128,.08);color:#4ade80;}\r\n.quiz-opt.wrong{border-color:#f43f5e;background:rgba(244,63,94,.08);color:#f43f5e;}\r\n.opt-letter{width:26px;height:26px;border-radius:7px;background:#1e1e28;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;flex-shrink:0;transition:all .2s;}\r\n.quiz-opt.sel .opt-letter{background:#6c63ff;border-color:#6c63ff;color:#fff;}\r\n.quiz-opt.correct .opt-letter{background:#4ade80;border-color:#4ade80;color:#000;}\r\n.quiz-opt.wrong .opt-letter{background:#f43f5e;border-color:#f43f5e;color:#fff;}\r\n.quiz-fb{padding:12px 16px;border-radius:10px;font-size:13px;display:none;margin-bottom:14px;}\r\n.quiz-fb.show{display:block;}\r\n.quiz-fb.ok{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);color:#4ade80;}\r\n.quiz-fb.err{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.2);color:#f87171;}\r\n.quiz-action-btn{display:inline-flex;align-items:center;gap:8px;background:#6c63ff;color:#fff;border:none;border-radius:100px;padding:9px 20px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;}\r\n.quiz-action-btn:hover{background:#9d78ff;}\r\n\r\n\/* lesson sidebar *\/\r\n.lesson-sidebar{background:#111118;border-left:1px solid rgba(255,255,255,.07);padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;}\r\n.ls-section-title{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5a70;margin-bottom:10px;}\r\n.profile-ring-row{display:flex;align-items:center;gap:12px;background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px;}\r\n.ring-wrap{position:relative;width:50px;height:50px;flex-shrink:0;}\r\n.ring-wrap svg{transform:rotate(-90deg);}\r\n.ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#c4b5fd;}\r\n.profile-info .pname{font-size:12px;font-weight:500;color:#e8e8f0;margin-bottom:2px;}\r\n.profile-info .ppref{font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;}\r\n.ret-row{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:6px;}\r\n.ret-label{width:44px;color:#9191a8;font-family:'DM Mono',monospace;font-size:10px;}\r\n.ret-track{flex:1;height:3px;background:#1e1e28;border-radius:2px;}\r\n.ret-fill{height:100%;border-radius:2px;transition:width 1s ease;}\r\n.ret-pct{width:28px;text-align:right;font-family:'DM Mono',monospace;font-size:9px;color:#5a5a70;}\r\n.event-item{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:#5a5a70;line-height:1.4;margin-bottom:6px;}\r\n.event-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:2px;}\r\n.next-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px;}\r\n.next-lbl{font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#5a5a70;margin-bottom:4px;}\r\n.next-title{font-size:12px;font-weight:500;color:#e8e8f0;margin-bottom:3px;}\r\n.next-meta{font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;}\r\n.done-btn{width:100%;background:#6c63ff;color:#fff;border:none;border-radius:8px;padding:10px;font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-top:6px;transition:all .2s;}\r\n.done-btn:hover{background:#9d78ff;}\r\n\r\n\/* STEP 4 \u2014 PROFILE *\/\r\n.profile-screen{display:flex;align-items:center;justify-content:center;width:100%;padding:40px;}\r\n.profile-card{background:#111118;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:40px;max-width:580px;width:100%;text-align:center;}\r\n.check-anim{width:64px;height:64px;border-radius:50%;background:rgba(74,222,128,.1);border:2px solid #4ade80;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;animation:checkBounce .6s ease both;}\r\n@keyframes checkBounce{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}\r\n.profile-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.5px;color:#e8e8f0;margin-bottom:4px;}\r\n.profile-sub{font-size:13px;color:#9191a8;margin-bottom:28px;}\r\n.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;}\r\n.s-stat{padding:14px;border-radius:10px;border:1px solid;}\r\n.s-stat-n{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.5px;}\r\n.s-stat-l{font-size:10px;font-family:'DM Mono',monospace;margin-top:2px;opacity:.7;}\r\n.profile-learn-title{font-size:13px;font-weight:600;color:#e8e8f0;margin-bottom:14px;text-align:left;}\r\n.next-lesson-card{background:#18181f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px;margin-top:20px;text-align:left;}\r\n.back-plan-link{font-size:12px;color:#6c63ff;cursor:pointer;display:block;text-align:center;margin-top:12px;font-family:'DM Mono',monospace;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PROFESSOR VIEW \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#view-prof{background:var(--bg);min-height:100vh;}\r\n.p-header{position:sticky;top:44px;z-index:100;background:var(--bg);border-bottom:2px solid var(--ink);padding:0 40px;display:flex;align-items:center;gap:0;}\r\n.p-logo{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);margin-right:24px;white-space:nowrap;}\r\n.p-logo span{opacity:.35;}\r\n.p-tabs{display:flex;gap:0;flex:1;}\r\n.p-tab{font-family:var(--mono);font-size:12px;font-weight:500;padding:14px 18px;cursor:pointer;border:none;background:none;color:var(--ink3);letter-spacing:.05em;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;}\r\n.p-tab:hover{color:var(--ink)}.p-tab.active{color:var(--ink);border-bottom-color:var(--ink);}\r\n.p-back{font-family:var(--mono);font-size:11px;color:var(--ink3);background:none;border:1px solid var(--rule2);border-radius:6px;padding:5px 12px;cursor:pointer;transition:all .15s;white-space:nowrap;}\r\n.p-back:hover{color:var(--ink);border-color:var(--rule2);}\r\n.p-panel{display:none;padding:36px 40px;}.p-panel.active{display:block;}\r\n.p-section{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px;display:flex;align-items:center;gap:12px;}\r\n.p-section::after{content:'';flex:1;height:1px;background:var(--rule2);}\r\n.p-metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:32px;}\r\n.p-metric{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:16px;border-left:4px solid;}\r\n.p-metric-n{font-family:'Syne',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1;}\r\n.p-metric-l{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-top:4px;}\r\n.p-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px;}\r\n.p-card{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:20px;}\r\n.p-card-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--ink2);margin-bottom:14px;}\r\n.donut-row{display:flex;align-items:center;gap:20px;}\r\n.donut-legend{display:flex;flex-direction:column;gap:8px;flex:1;}\r\n.donut-legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);}\r\n.donut-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}\r\n.donut-pct{font-family:var(--mono);font-size:11px;font-weight:600;margin-left:auto;}\r\n.ret-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}\r\n.ret-bar-label{width:48px;font-family:var(--mono);font-size:11px;color:var(--ink3);}\r\n.ret-bar-track{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;}\r\n.ret-bar-fill{height:100%;border-radius:3px;transition:width 1.2s ease;}\r\n.ret-bar-pct{width:36px;text-align:right;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);}\r\n.p-table{width:100%;border-collapse:collapse;font-size:12px;}\r\n.p-table thead th{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);text-align:left;padding:8px 12px;border-bottom:1.5px solid var(--rule2);}\r\n.p-table tbody tr{border-bottom:1px solid var(--rule);cursor:pointer;transition:background .15s;}\r\n.p-table tbody tr:hover{background:var(--bg2);}\r\n.p-table td{padding:10px 12px;color:var(--ink2);}\r\n.p-status{display:flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);}\r\n.p-status.ok::before{content:'\u25cf';color:var(--green);}\r\n.p-status.warn::before{content:'\u25b2';color:var(--amber);}\r\n.p-status.star::before{content:'\u2605';color:var(--violet);}\r\n\/* profiles tab *\/\r\n.p-filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}\r\n.p-select{font-family:var(--mono);font-size:11px;border:1.5px solid var(--rule2);border-radius:6px;padding:6px 10px;background:white;color:var(--ink2);cursor:pointer;outline:none;}\r\n.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}\r\n.student-card{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:16px;transition:box-shadow .15s;cursor:pointer;}\r\n.student-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06);}\r\n.stu-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}\r\n.stu-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}\r\n.stu-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;}\r\n.stu-proj{font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.stu-fmt-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 8px;border-radius:100px;border:1px solid;margin-left:auto;}\r\n.stu-weak{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;}\r\n.weak-chip{font-size:10px;font-family:var(--mono);padding:2px 8px;border-radius:4px;background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--amber);}\r\n.stu-stats{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);}\r\n.stu-stat-item{text-align:center;}\r\n.stu-stat-v{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--ink);}\r\n.stu-stat-l{font-family:var(--mono);font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;}\r\n\/* overlay *\/\r\n.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;}\r\n.overlay.open{display:flex;justify-content:flex-end;}\r\n.drawer{background:white;width:440px;height:100%;overflow-y:auto;padding:28px;box-shadow:-4px 0 24px rgba(0,0,0,.1);position:relative;padding-top:calc(44px + 28px);}\r\n.drawer-close{position:absolute;top:calc(44px + 14px);right:20px;background:none;border:1.5px solid var(--rule2);border-radius:6px;padding:4px 10px;font-family:var(--mono);font-size:11px;cursor:pointer;color:var(--ink3);}\r\n.drawer-close:hover{color:var(--ink);}\r\n.drawer-name{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:3px;}\r\n.drawer-proj{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:16px;}\r\n.drawer-interp{background:var(--slate-bg);border:1.5px solid var(--slate-bd);border-radius:8px;padding:14px;margin-bottom:20px;font-size:12px;color:var(--ink2);line-height:1.7;}\r\n.delivery-table{width:100%;font-size:11px;font-family:var(--mono);border-collapse:collapse;}\r\n.delivery-table th{text-align:left;color:var(--ink3);padding:5px 8px;border-bottom:1px solid var(--rule2);font-size:10px;}\r\n.delivery-table td{padding:6px 8px;border-bottom:1px solid var(--rule);color:var(--ink2);}\r\n\/* catalog tab *\/\r\n.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;}\r\n.cat-card{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:16px;}\r\n.cat-name{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}\r\n.cat-total{font-size:10px;color:var(--ink3);}\r\n.stacked-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;gap:0;margin-bottom:6px;}\r\n.stacked-seg{height:100%;transition:width 1s ease;}\r\n.cat-detail{display:flex;gap:12px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.cat-detail span.orig{color:var(--blue);}\r\n.cat-detail span.iai{color:var(--amber);}\r\n.gen-timeline{display:flex;flex-direction:column;gap:10px;}\r\n.tl-item{background:white;border:1.5px solid var(--rule2);border-radius:10px;padding:14px 16px;transition:box-shadow .15s;}\r\n.tl-item:hover{box-shadow:0 3px 12px rgba(0,0,0,.06);}\r\n.tl-row1{display:flex;align-items:center;gap:10px;margin-bottom:6px;}\r\n.tl-icon{font-size:14px;}\r\n.tl-title{font-size:13px;font-weight:600;color:var(--ink);flex:1;}\r\n.tl-badges{display:flex;gap:5px;flex-wrap:wrap;}\r\n.tl-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;border:1px solid;}\r\n.tl-ready{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}\r\n.tl-gen{background:var(--slate-bg);border-color:var(--slate-bd);color:var(--slate);animation:shimmer 1.5s infinite;}\r\n.tl-new{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet);}\r\n.tl-var{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);}\r\n.tl-row2{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;color:var(--ink3);}\r\n.tl-ret-bar{flex:1;height:3px;background:var(--bg2);border-radius:2px;overflow:hidden;}\r\n.tl-ret-fill{height:100%;border-radius:2px;}\r\n\/* formula modal *\/\r\n.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;align-items:center;justify-content:center;}\r\n.modal-backdrop.open{display:flex;}\r\n.modal-box{background:white;border-radius:14px;padding:28px;max-width:620px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.15);}\r\n.modal-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;}\r\n.modal-sub{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:20px;}\r\n.modal-card{background:var(--bg2);border:1.5px solid var(--rule2);border-radius:8px;padding:14px;margin-bottom:14px;}\r\n.modal-card-title{font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:10px;}\r\n.formula-block{background:white;border:1px solid var(--rule2);border-radius:6px;padding:12px;font-family:var(--mono);font-size:11px;color:var(--ink2);line-height:1.8;}\r\n.formula-block .hl{color:var(--violet);font-weight:600;}\r\n.info-btn{font-family:var(--mono);font-size:10px;color:var(--ink3);background:none;border:1px solid var(--rule2);border-radius:100px;padding:3px 10px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px;}\r\n.info-btn:hover{color:var(--ink);border-color:var(--rule2);}\r\n.modal-close{display:block;margin:20px auto 0;background:var(--ink);color:var(--bg);border:none;border-radius:8px;padding:10px 24px;font-family:var(--mono);font-size:12px;cursor:pointer;}\r\n\/* toast *\/\r\n.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:#1a1916;color:#e8e8f0;border-radius:100px;padding:9px 18px;font-family:'DM Mono',monospace;font-size:12px;opacity:0;transition:all .3s;z-index:500;white-space:nowrap;border:1px solid rgba(255,255,255,.1);}\r\n.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"app-switcher\">\r\n <div class=\"sw-logo\">Dev<span>FullStack<\/span><\/div>\r\n <div class=\"sw-btns\">\r\n <button class=\"sw-btn active\" onclick=\"switchView('arch',this)\">Arquitetura<\/button>\r\n <button class=\"sw-btn\" onclick=\"switchView('student',this)\">Vis\u00e3o do Aluno<\/button>\r\n <button class=\"sw-btn\" onclick=\"switchView('prof',this)\">Dashboard do Professor<\/button>\r\n <\/div>\r\n <div class=\"sw-tag\">Desafio T\u00e9cnico \u00b7 V1 \u00b7 2025<\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"view-arch\" class=\"view active\">\r\n<div class=\"cover\">\r\n <div class=\"cover-left\">\r\n <div class=\"cover-eyebrow\">Processo Seletivo \u00b7 Etapa 2<\/div>\r\n <div class=\"cover-title\">Desafio T\u00e9cnico<br>DevFullStack<\/div>\r\n <p class=\"cover-subtitle\">Proposta de nova arquitetura para uma plataforma de e-learning baseada em aprendizado por projetos, com gera\u00e7\u00e3o de cursos personalizados via IA e camada adaptativa de conte\u00fado.<\/p>\r\n <div class=\"cover-meta\">\r\n <span class=\"meta-chip chip-v\">Novo fluxo com IA<\/span>\r\n <span class=\"meta-chip chip-b\">Existente preservado<\/span>\r\n <span class=\"meta-chip chip-g\">Time pequeno \u00b7 V1<\/span>\r\n <span class=\"meta-chip chip-s\">Evolu\u00e7\u00e3o incremental<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cover-right\">\r\n <div class=\"cover-section-title\">Contexto do problema<\/div>\r\n <div class=\"context-card\">\r\n <p>A <strong>DevFullStack<\/strong> possui hoje ~1.200 aulas organizadas em forma\u00e7\u00f5es fixas. O sistema atual funciona bem, mas \u00e9 gen\u00e9rico \u2014 o aluno escolhe uma trilha pr\u00e9-definida.<\/p>\r\n <p>A proposta adiciona um <strong>novo modo por projetos<\/strong>: o aluno conversa com uma IA, define um projeto pr\u00f3prio e a plataforma monta um curso personalizado do zero ao deploy.<\/p>\r\n <\/div>\r\n <div class=\"cover-section-title\" style=\"margin-top:4px\">Regra central<\/div>\r\n <div class=\"context-card\">\r\n <p><strong>Se j\u00e1 existe uma aula no cat\u00e1logo \u2192 reutiliza.<\/strong> Se n\u00e3o existe \u2192 a IA gera e salva no cat\u00e1logo para os pr\u00f3ximos alunos.<\/p>\r\n <p>O sistema de forma\u00e7\u00f5es fixas <strong>continua funcionando sem altera\u00e7\u00f5es.<\/strong><\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"nav-bar\">\r\n <div class=\"tabs\">\r\n <button class=\"tab active\" onclick=\"showTab('arch','arch')\">Arquitetura<\/button>\r\n <button class=\"tab\" onclick=\"showTab('arch','entities')\">Entidades<\/button>\r\n <button class=\"tab\" onclick=\"showTab('arch','tradeoffs')\">Trade-offs<\/button>\r\n <button class=\"tab\" onclick=\"showTab('arch','premises')\">Premissas<\/button>\r\n <\/div>\r\n <span class=\"nav-hint\">Navegue pelas abas<\/span>\r\n<\/div>\r\n<main>\r\n<div class=\"panel active\" id=\"tab-arch\">\r\n <div class=\"arch-grid\">\r\n <div class=\"arch-col\">\r\n <div class=\"arch-title\">Fluxo principal <span class=\"arch-title-badge badge-mvp\">MVP \u00b7 V1<\/span><\/div>\r\n <div class=\"flow\">\r\n <div class=\"split split-2\" style=\"margin-bottom:0\">\r\n <div class=\"node node-slate\"><div class=\"node-title\">Frontend Web<\/div><div class=\"node-sub\">interface existente<\/div><\/div>\r\n <div class=\"node node-slate\"><div class=\"node-title\">App Mobile<\/div><div class=\"node-sub\">interface existente<\/div><\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:14px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-ink\"><div class=\"node-title\">API REST \u00b7 Backend Serverless<\/div><div class=\"node-sub\" style=\"color:rgba(255,255,255,.5)\">ponto de entrada \u00fanico \u2014 existente, sem altera\u00e7\u00e3o<\/div><\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:4px 0\">\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:14px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"connector\" style=\"position:relative\">\r\n <div class=\"connector-line\" style=\"min-height:14px;background:var(--violet-bd)\"><\/div>\r\n <div class=\"connector-arrow\" style=\"border-top-color:var(--violet-bd)\"><\/div>\r\n <span style=\"position:absolute;top:50%;transform:translateY(-50%);right:-24px;font-family:var(--mono);font-size:9px;color:var(--violet);background:var(--bg);padding:1px 5px;border:1px solid var(--violet-bd);border-radius:4px;white-space:nowrap\">novo fluxo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"split split-2\" style=\"margin-bottom:0\">\r\n <div class=\"node node-blue\"><div class=\"node-title\">Servi\u00e7os existentes<\/div><div class=\"node-sub\">Forma\u00e7\u00f5es fixas \u00b7 aulas \u00b7 LessonDone<\/div><span class=\"node-badge\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">intacto<\/span><\/div>\r\n <div class=\"group\"><div class=\"group-label\">Orquestrador IA \u2014 novo<\/div>\r\n <div class=\"flow\">\r\n <div class=\"node node-violet\" style=\"margin-bottom:6px\"><div class=\"node-title\">Chat com IA<\/div><div class=\"node-sub\">Aluno descreve o projeto desejado<\/div><\/div>\r\n <div class=\"connector\" style=\"align-items:flex-start;padding-left:50%\"><div class=\"connector-line\" style=\"min-height:8px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-violet\" style=\"margin-bottom:6px\"><div class=\"node-title\">Gerador de plano<\/div><div class=\"node-sub\">Decomp\u00f5e em t\u00f3picos necess\u00e1rios<\/div><\/div>\r\n <div class=\"connector\" style=\"align-items:flex-start;padding-left:50%\"><div class=\"connector-line\" style=\"min-height:8px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-amber\" style=\"margin-bottom:6px\"><div class=\"node-title\">Aula existe no cat\u00e1logo?<\/div><\/div>\r\n <div class=\"split split-2\" style=\"gap:6px\">\r\n <div class=\"node node-green\"><div class=\"node-title\" style=\"font-size:12px\">Reutilizar<\/div><div class=\"node-sub\">~70% dos casos<\/div><\/div>\r\n <div class=\"node node-rose\"><div class=\"node-title\" style=\"font-size:12px\">Gerar com IA<\/div><div class=\"node-sub\">salva no cat\u00e1logo<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:14px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-blue\"><div class=\"node-title\">CoursePlan personalizado<\/div><div class=\"node-sub\">mesmo modelo das forma\u00e7\u00f5es fixas \u2014 type: custom<\/div><span class=\"node-badge\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">sa\u00edda<\/span><\/div>\r\n <\/div>\r\n <div style=\"margin-top:20px\">\r\n <div class=\"section-label\">Infraestrutura<\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:10px\">\r\n <div class=\"group\"><div class=\"group-label\">Google Cloud SQL \u00b7 Postgres<\/div><div style=\"margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);line-height:2\">Lessons \u00b7 Users \u00b7 LessonDone<br>CoursePlan \u00b7 CoursePlanLesson<br>ProjectConversation<\/div><\/div>\r\n <div class=\"group\"><div class=\"group-label\">S3 + Job ass\u00edncrono<\/div><div style=\"margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--ink3);line-height:2\">Arquivos das aulas<br><span style=\"color:var(--rose);font-weight:600\">Worker \u2192 LLM externo<\/span><br>Cloud Tasks \/ SQS<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"arch-col\">\r\n <div class=\"arch-title\">Camada adaptativa <span class=\"arch-title-badge badge-future\">Evolu\u00e7\u00e3o futura<\/span><\/div>\r\n <div class=\"callout callout-amber\"><div class=\"callout-icon\">\u25ce<\/div><div class=\"callout-text\">Esta camada <strong>n\u00e3o \u00e9 parte do MVP<\/strong>. A arquitetura atual j\u00e1 a suporta sem retrabalho \u2014 entra quando tivermos dados reais de uso.<\/div><\/div>\r\n <div class=\"flow\">\r\n <div class=\"node node-blue\"><div class=\"node-title\">Coleta de sinais \u2014 comportamento impl\u00edcito<\/div><div class=\"node-sub\">sem perguntar ao aluno \u00b7 tudo observado passivamente<\/div><\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:10px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"split split-4\" style=\"margin-bottom:0\">\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Tempo<\/div><div class=\"node-sub\">dura\u00e7\u00e3o \u00b7 scroll<\/div><\/div>\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Replays<\/div><div class=\"node-sub\">trechos revisitados<\/div><\/div>\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Quiz<\/div><div class=\"node-sub\">acertos \u00b7 tempo<\/div><\/div>\r\n <div class=\"node node-slate\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:11px\">Formato<\/div><div class=\"node-sub\">v\u00eddeo\/texto\/H5P<\/div><\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:12px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-green\"><div class=\"node-title\">LearnerProfile \u2014 perfil do aluno<\/div><div class=\"node-sub\">prefer\u00eancia \u00b7 reten\u00e7\u00e3o por formato \u00b7 t\u00f3picos fracos \u00b7 job peri\u00f3dico<\/div><\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:12px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-rose\"><div class=\"node-title\">Seletor de variante<\/div><div class=\"node-sub\">regra simples V2 \u2192 recomenda\u00e7\u00e3o ML no futuro<\/div><\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:10px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"split split-3\" style=\"margin-bottom:0\">\r\n <div class=\"node node-blue\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:12px\">V\u00eddeo<\/div><div class=\"node-sub\">S3<\/div><\/div>\r\n <div class=\"node node-blue\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:12px\">Texto<\/div><div class=\"node-sub\">markdown<\/div><\/div>\r\n <div class=\"node node-blue\" style=\"padding:8px 10px\"><div class=\"node-title\" style=\"font-size:12px\">H5P<\/div><div class=\"node-sub\">interativo<\/div><\/div>\r\n <\/div>\r\n <div class=\"connector\"><div class=\"connector-line\" style=\"min-height:12px\"><\/div><div class=\"connector-arrow\"><\/div><\/div>\r\n <div class=\"node node-rose\"><div class=\"node-title\">Player de aula \u2014 Frontend<\/div><\/div>\r\n <div class=\"feedback-loop\">\u21bb cada aula retroalimenta o LearnerProfile \u2014 ciclo cont\u00ednuo<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"panel\" id=\"tab-entities\">\r\n <div class=\"callout callout-violet\" style=\"max-width:860px\"><div class=\"callout-icon\">\u25c8<\/div><div class=\"callout-text\">Entidades <strong>existentes<\/strong> s\u00e3o preservadas. Campos novos em <strong style=\"color:var(--amber)\">+<\/strong> laranja. Entidades <strong>novas<\/strong> n\u00e3o quebram nenhuma query atual.<\/div><\/div>\r\n <div class=\"section-label\">Entidades existentes<\/div>\r\n <div class=\"entities-grid\" style=\"margin-bottom:28px\">\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">Lesson<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">category<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">subcategory<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">title<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">description<\/span><span class=\"field-type\">text<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">filePath<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">source<\/span><span class=\"field-type\">existing | ai_generated<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">User<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">name<\/span><span class=\"field-type\">string<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LessonDone<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">date<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">CoursePlan<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">coursePlanId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">title<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">projectDescription<\/span><span class=\"field-type\">text<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">type<\/span><span class=\"field-type\">fixed | custom<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">status<\/span><span class=\"field-type\">draft | active<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">CoursePlanLesson<\/span><span class=\"entity-pill pill-existing\">existente<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">coursePlanLessonId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">coursePlanId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">topic<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">order<\/span><span class=\"field-type\">int<\/span><\/div><div class=\"field-row field-new\"><span class=\"field-name\">status<\/span><span class=\"field-type\">pending | done<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"section-label\">Entidades novas \u2014 MVP<\/div>\r\n <div class=\"entities-grid\" style=\"margin-bottom:28px\">\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">ProjectConversation<\/span><span class=\"entity-pill pill-new\">nova \u00b7 MVP<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">conversationId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">coursePlanId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">messages<\/span><span class=\"field-type\">json<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">createdAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"section-label\">Entidades novas \u2014 camada adaptativa (futura)<\/div>\r\n <div class=\"entities-grid\">\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LessonVariant<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">variantId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">lessonId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">format<\/span><span class=\"field-type\">video | text | h5p<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">filePath<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">status<\/span><span class=\"field-type\">ready | generating<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">generatedBy<\/span><span class=\"field-type\">human | ai<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LearnerProfile<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">profileId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">preferredFormat<\/span><span class=\"field-type\">string<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">videoRetention<\/span><span class=\"field-type\">float<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">textRetention<\/span><span class=\"field-type\">float<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">h5pRetention<\/span><span class=\"field-type\">float<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">weakTopics<\/span><span class=\"field-type\">json<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">updatedAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LearnerEvent<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">eventId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">variantId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">eventType<\/span><span class=\"field-type\">play|pause|replay|complete|quiz<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">payload<\/span><span class=\"field-type\">json<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">occurredAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <div class=\"entity-card\"><div class=\"entity-header\"><span class=\"entity-name\">LessonDelivery<\/span><span class=\"entity-pill pill-new\">nova \u00b7 futura<\/span><\/div><div class=\"entity-fields\"><div class=\"field-row\"><span class=\"field-name\">deliveryId<\/span><span class=\"field-type\">uuid PK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">userId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">variantId<\/span><span class=\"field-type\">uuid FK<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">reason<\/span><span class=\"field-type\">preferred | default | fallback<\/span><\/div><div class=\"field-row\"><span class=\"field-name\">deliveredAt<\/span><span class=\"field-type\">timestamp<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"panel\" id=\"tab-tradeoffs\">\r\n <div class=\"callout callout-violet\" style=\"max-width:860px\"><div class=\"callout-icon\">\u25c8<\/div><div class=\"callout-text\">O desafio pede <strong>trade-offs expl\u00edcitos<\/strong> \u2014 o que foi priorizado e o que foi deixado de fora, e por qu\u00ea.<\/div><\/div>\r\n <div class=\"section-label\">Decis\u00f5es de escopo<\/div>\r\n <div class=\"tradeoff-grid\">\r\n <div class=\"tradeoff-card\"><div class=\"tradeoff-title\"><div class=\"tradeoff-dot\" style=\"background:var(--green)\"><\/div>O que entra no MVP<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Chat multi-turno com IA para definir o projeto<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Gerador de plano que reutiliza as 1.200 aulas existentes<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Job ass\u00edncrono para gerar aulas quando n\u00e3o existe no cat\u00e1logo<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Forma\u00e7\u00f5es fixas continuam funcionando sem nenhuma altera\u00e7\u00e3o<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">Aulas geradas v\u00e3o para o cat\u00e1logo \u2014 reaproveitadas nos pr\u00f3ximos alunos<\/div>\r\n <div class=\"tradeoff-item tradeoff-in\">CoursePlan com <code style=\"font-family:var(--mono);font-size:10px\">type: custom<\/code><\/div>\r\n <\/div>\r\n <div class=\"tradeoff-card\"><div class=\"tradeoff-title\"><div class=\"tradeoff-dot\" style=\"background:var(--rose)\"><\/div>O que fica fora do MVP<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Revis\u00e3o humana das aulas geradas \u2014 complexidade desnecess\u00e1ria<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Variantes de formato (H5P, texto) \u2014 precisa de dados de uso<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">LearnerProfile adaptativo \u2014 precisa de volume que n\u00e3o temos<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Busca sem\u00e2ntica \u2014 categoria resolve 70%+ dos casos<\/div>\r\n <div class=\"tradeoff-item tradeoff-out\">Orquestrador como microsservi\u00e7o \u2014 overhead desnecess\u00e1rio na V1<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-label\">Caminho de evolu\u00e7\u00e3o<\/div>\r\n <div style=\"max-width:860px\"><div class=\"tradeoff-card\" style=\"max-width:100%\">\r\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule2);border-radius:6px;overflow:hidden\">\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--green);margin-bottom:6px\">V1 \u2014 agora<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">Chat + gerador + job async. Medir ades\u00e3o.<\/div><\/div>\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--blue);margin-bottom:6px\">V2 \u2014 crescendo<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">Busca sem\u00e2ntica + variantes de formato.<\/div><\/div>\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--violet);margin-bottom:6px\">V3 \u2014 com dados<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">LearnerProfile + seletor adaptativo.<\/div><\/div>\r\n <div style=\"background:var(--bg);padding:14px 16px\"><div style=\"font-family:var(--mono);font-size:10px;font-weight:600;color:var(--amber);margin-bottom:6px\">V4 \u2014 escala<\/div><div style=\"font-size:12px;color:var(--ink2);line-height:1.65\">Orquestrador como servi\u00e7o. ML.<\/div><\/div>\r\n <\/div>\r\n <\/div><\/div>\r\n<\/div>\r\n<div class=\"panel\" id=\"tab-premises\">\r\n <div class=\"section-label\">Premissas assumidas<\/div>\r\n <div class=\"premise-list\">\r\n <div class=\"premise-item\"><span class=\"premise-id\">P1<\/span><span class=\"premise-text\"><strong>Volume inicial baixo.<\/strong> Sem filas robustas, sharding ou caches desde o in\u00edcio. Escala quando o volume exigir.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P2<\/span><span class=\"premise-text\"><strong>Gera\u00e7\u00e3o ass\u00edncrona.<\/strong> Plano entregue com <code>status: pending<\/code>. Aula gerada em background enquanto o aluno come\u00e7a pelas dispon\u00edveis.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P3<\/span><span class=\"premise-text\"><strong>Chat multi-turno.<\/strong> Uma mensagem raramente define bem um projeto. Hist\u00f3rico persistido em <code>ProjectConversation<\/code>.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P4<\/span><span class=\"premise-text\"><strong>Aulas geradas v\u00e3o para o cat\u00e1logo permanente.<\/strong> Reduz custo e lat\u00eancia ao longo do tempo.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P5<\/span><span class=\"premise-text\"><strong>Sem revis\u00e3o humana na V1.<\/strong> Complexidade antes de medir o problema \u00e9 over-engineering.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P6<\/span><span class=\"premise-text\"><strong>LLM externo via API.<\/strong> Claude API ou OpenAI \u2014 a ferramenta n\u00e3o muda a arquitetura.<\/span><\/div>\r\n <div class=\"premise-item\"><span class=\"premise-id\">P7<\/span><span class=\"premise-text\"><strong>Orquestrador come\u00e7a como m\u00f3dulo interno.<\/strong> Pode ser extra\u00eddo quando o volume exigir isolamento.<\/span><\/div>\r\n <\/div>\r\n<\/div>\r\n<\/main>\r\n<div class=\"legend\">\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--blue-bg);border-color:var(--blue-bd)\"><\/span>Existente<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--violet-bg);border-color:var(--violet-bd)\"><\/span>Orquestrador IA<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--green-bg);border-color:var(--green-bd)\"><\/span>Reutiliza\u00e7\u00e3o<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--rose-bg);border-color:var(--rose-bd)\"><\/span>Entrega<\/span>\r\n <span class=\"legend-item\"><span class=\"legend-dot\" style=\"background:var(--amber-bg);border-color:var(--amber-bd)\"><\/span>Novo \/ futura<\/span>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div id=\"view-student\" class=\"view\">\r\n <div class=\"s-topbar\">\r\n <button class=\"s-back\" onclick=\"switchView('arch',null)\">\u2190 Arquitetura<\/button>\r\n <div class=\"s-stepper\">\r\n <div class=\"s-step-item active\" id=\"ss1\"><div class=\"s-step-circle\">1<\/div><span>Chat<\/span><\/div>\r\n <div class=\"s-step-sep\"><\/div>\r\n <div class=\"s-step-item\" id=\"ss2\"><div class=\"s-step-circle\">2<\/div><span>Plano<\/span><\/div>\r\n <div class=\"s-step-sep\"><\/div>\r\n <div class=\"s-step-item\" id=\"ss3\"><div class=\"s-step-circle\">3<\/div><span>Aula<\/span><\/div>\r\n <div class=\"s-step-sep\"><\/div>\r\n <div class=\"s-step-item\" id=\"ss4\"><div class=\"s-step-circle\">4<\/div><span>Perfil<\/span><\/div>\r\n <\/div>\r\n <div class=\"s-ai-badge\">IA ativa<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel active\" id=\"s-step-1\">\r\n <div class=\"chat-layout\">\r\n <div class=\"chat-sidebar\">\r\n <div class=\"chat-sidebar-label\">Sugest\u00f5es de projeto<\/div>\r\n <div class=\"proj-card sel\" onclick=\"selectProj(this,'Clone do iFood com React e Node, incluindo pagamentos, painel do restaurante e rastreamento em tempo real')\"><h4>Clone do iFood<\/h4><p>Delivery com cat\u00e1logo, pedidos e pagamento<\/p><\/div>\r\n <div class=\"proj-card\" onclick=\"selectProj(this,'Clone do Netflix com autentica\u00e7\u00e3o, cat\u00e1logo de filmes e player de v\u00eddeo')\"><h4>Clone do Netflix<\/h4><p>Streaming com auth e player de v\u00eddeo<\/p><\/div>\r\n <div class=\"proj-card\" onclick=\"selectProj(this,'CRM completo com gest\u00e3o de clientes, pipeline de vendas e relat\u00f3rios')\"><h4>CRM Completo<\/h4><p>Gest\u00e3o de clientes e pipeline de vendas<\/p><\/div>\r\n <div class=\"proj-card\" onclick=\"selectProj(this,'SaaS com painel admin, integra\u00e7\u00e3o com IA e sistema de billing')\"><h4>SaaS com IA<\/h4><p>Plataforma com LLM e billing<\/p><\/div>\r\n <div style=\"margin-top:auto\">\r\n <div class=\"chat-sidebar-label\">Meus projetos<\/div>\r\n <div class=\"proj-card\" style=\"opacity:.4;cursor:default\"><h4>Nenhum ainda<\/h4><p>Comece uma conversa acima<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chat-main\">\r\n <div class=\"chat-header\">\r\n <div><h2>Definir meu projeto<\/h2><div style=\"font-size:11px;color:#5a5a70;margin-top:2px;font-family:'DM Mono',monospace\">A IA vai entender seu projeto e montar o plano ideal<\/div><\/div>\r\n <\/div>\r\n <div class=\"messages\" id=\"chat-messages\">\r\n <div class=\"msg\">\r\n <div class=\"avatar ai\">AI<\/div>\r\n <div class=\"bubble\">\r\n Ol\u00e1! Vou te ajudar a montar um <strong>curso personalizado<\/strong> baseado no projeto que voc\u00ea quer construir.<br><br>\r\n Me conta: <strong>qual projeto voc\u00ea quer criar?<\/strong> Pode ser qualquer coisa \u2014 um clone de app, uma ferramenta interna, um SaaS.\r\n <div class=\"quick-replies\">\r\n <button class=\"qr\" onclick=\"sendQuick('Clone do iFood completo com React e Node')\">Clone do iFood<\/button>\r\n <button class=\"qr\" onclick=\"sendQuick('App de delivery full stack com pagamentos')\">App de delivery<\/button>\r\n <button class=\"qr\" onclick=\"sendQuick('SaaS com painel admin e integra\u00e7\u00e3o com IA')\">SaaS com IA<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chat-input-area\">\r\n <textarea class=\"chat-input\" id=\"chat-input\" placeholder=\"Descreva seu projeto...\" rows=\"1\" onkeydown=\"if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChat()}\" oninput=\"this.style.height='auto';this.style.height=this.scrollHeight+'px'\"><\/textarea>\r\n <button class=\"send-btn\" onclick=\"sendChat()\">\u2191<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel\" id=\"s-step-2\">\r\n <div class=\"plan-layout\">\r\n <div class=\"plan-content\">\r\n <div class=\"plan-eyebrow\">plano personalizado \u00b7 gerado por IA<\/div>\r\n <div class=\"plan-title\">Clone do iFood \u2014 Full Stack<\/div>\r\n <div class=\"plan-sub\">32 aulas \u00b7 estimativa de 6\u20138 semanas \u00b7 do zero ao deploy<\/div>\r\n <div class=\"module-title\">Fundamentos & Setup<\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">01<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Node.js \u2014 fundamentos e event loop<\/div><div class=\"lesson-meta-text\">Backend \u00b7 42min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">02<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Express.js \u2014 criando sua primeira API REST<\/div><div class=\"lesson-meta-text\">Backend \u00b7 38min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row ai-gen\" onclick=\"goToLesson()\"><div class=\"lesson-num\">03<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">PostgreSQL \u2014 modelando card\u00e1pios e pedidos<\/div><div class=\"lesson-meta-text\">Banco de dados \u00b7 28min \u00b7 gerada para este projeto<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-ai\">IA gerou<\/span><\/div>\r\n <div class=\"module-title\">Frontend com React<\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">04<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">React \u2014 componentes, estado e props<\/div><div class=\"lesson-meta-text\">Frontend \u00b7 55min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row ai-gen\" onclick=\"goToLesson()\"><div class=\"lesson-num\">05<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Montando a tela de card\u00e1pio do iFood em React<\/div><div class=\"lesson-meta-text\">Frontend \u00b7 44min \u00b7 espec\u00edfica para seu projeto<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-ai\">IA gerou<\/span><\/div>\r\n <div class=\"lesson-row\" onclick=\"goToLesson()\"><div class=\"lesson-num\">06<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">React Query \u2014 data fetching e cache<\/div><div class=\"lesson-meta-text\">Frontend \u00b7 36min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><\/div><span class=\"src-badge src-gen\">gerando...<\/span><\/div>\r\n <div class=\"module-title\">Pagamentos & Deploy<\/div>\r\n <div class=\"lesson-row cat\" onclick=\"goToLesson()\"><div class=\"lesson-num\">07<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Stripe \u2014 integrando pagamentos<\/div><div class=\"lesson-meta-text\">Pagamentos \u00b7 41min<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge v\">V<\/div><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-cat\">cat\u00e1logo<\/span><\/div>\r\n <div class=\"lesson-row ai-gen\" onclick=\"goToLesson()\"><div class=\"lesson-num\">08<\/div><div class=\"lesson-info\"><div class=\"lesson-title-text\">Deploy no Railway \u2014 iFood em produ\u00e7\u00e3o<\/div><div class=\"lesson-meta-text\">Deploy \u00b7 32min \u00b7 espec\u00edfica para seu projeto<\/div><\/div><div class=\"vbadges\"><div class=\"vbadge t\">T<\/div><div class=\"vbadge h\">H<\/div><\/div><span class=\"src-badge src-ai\">IA gerou<\/span><\/div>\r\n <button class=\"plan-start-btn\" onclick=\"goToLesson()\">Come\u00e7ar aula 01 \u2192<\/button>\r\n <\/div>\r\n <div class=\"plan-sidebar\">\r\n <div class=\"stat-card\"><div class=\"stat-label\">Total de aulas<\/div><div class=\"stat-val\">32<span class=\"stat-unit\">aulas<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Do cat\u00e1logo<\/div><div class=\"stat-val\" style=\"color:#2dd4bf\">22<span class=\"stat-unit\">reutilizadas<\/span><\/div><div class=\"prog-track\"><div class=\"prog-fill\" style=\"width:69%;background:#2dd4bf\"><\/div><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Geradas pela IA<\/div><div class=\"stat-val\" style=\"color:#f97316\">10<span class=\"stat-unit\">novas aulas<\/span><\/div><div class=\"prog-track\"><div class=\"prog-fill\" style=\"width:31%;background:#f97316\"><\/div><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Cobertura estimada<\/div><div class=\"stat-val\">~94<span class=\"stat-unit\">%<\/span><\/div><div class=\"prog-track\"><div class=\"prog-fill\" style=\"width:94%;background:#6c63ff\"><\/div><\/div><\/div>\r\n <div style=\"margin-top:16px\">\r\n <div style=\"font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#5a5a70;margin-bottom:8px\">Legenda<\/div>\r\n <div style=\"font-size:11px;color:#9191a8;display:flex;flex-direction:column;gap:5px;font-family:'DM Mono',monospace\">\r\n <span style=\"display:flex;align-items:center;gap:6px\"><span style=\"width:8px;height:8px;border-radius:2px;background:#2dd4bf;display:inline-block\"><\/span>Aula do cat\u00e1logo<\/span>\r\n <span style=\"display:flex;align-items:center;gap:6px\"><span style=\"width:8px;height:8px;border-radius:2px;background:#f97316;display:inline-block\"><\/span>Gerada pela IA<\/span>\r\n <span style=\"display:flex;align-items:center;gap:6px\"><span style=\"width:8px;height:8px;border-radius:2px;background:#5a5a70;display:inline-block\"><\/span>Variante gerando<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel\" id=\"s-step-3\">\r\n <div class=\"lesson-layout\">\r\n <div class=\"lesson-main\">\r\n <div class=\"lesson-topbar\">\r\n <div class=\"breadcrumb\"><a onclick=\"goToStep(2)\">Plano<\/a><span>\u203a<\/span><span>Fundamentos<\/span><span>\u203a<\/span><span>Aula 01<\/span><\/div>\r\n <div class=\"adaptive-badge\" id=\"adaptive-badge\">formato adaptado: v\u00eddeo<\/div>\r\n <div class=\"fmt-switcher\">\r\n <button class=\"fmt-btn active\" id=\"fb-video\" onclick=\"switchFmt('video')\">\u25b6 V\u00eddeo<\/button>\r\n <button class=\"fmt-btn\" id=\"fb-text\" onclick=\"switchFmt('text')\">\u2261 Texto<\/button>\r\n <button class=\"fmt-btn\" id=\"fb-h5p\" onclick=\"switchFmt('h5p')\">\u2b1c H5P<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fmt-content\" id=\"fc-video\">\r\n <div class=\"video-wrap\">\r\n <div class=\"video-screen\" id=\"vid-screen\" onclick=\"togglePlay()\">\r\n <div id=\"vid-placeholder\" style=\"display:flex;flex-direction:column;align-items:center;gap:12px\">\r\n <div class=\"play-circle\"><span style=\"font-size:22px;margin-left:4px\">\u25b6<\/span><\/div>\r\n <div class=\"video-overlay-title\">Node.js \u2014 fundamentos e event loop<\/div>\r\n <\/div>\r\n <div id=\"vid-playing\" style=\"width:100%;padding:24px;flex-direction:column;align-items:center;gap:10px\">\r\n <div style=\"font-size:12px;color:#5a5a70;font-family:'DM Mono',monospace\">\u25b6 reproduzindo...<\/div>\r\n <div class=\"vid-progress-wrap\"><div class=\"vid-progress-fill\" id=\"vid-prog-inner\"><\/div><\/div>\r\n <div class=\"vid-time\" id=\"vid-time-disp\">0:00 \/ 8:45<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"video-controls\">\r\n <button class=\"ctrl-btn\" onclick=\"togglePlay()\" id=\"play-ctrl\">\u25b6<\/button>\r\n <div class=\"prog-track-v\" onclick=\"seekVid(event)\"><div class=\"prog-fill-v\" id=\"vid-prog-bar\"><\/div><\/div>\r\n <span class=\"time-label\" id=\"vid-time-ctrl\">0:00 \/ 8:45<\/span>\r\n <button class=\"ctrl-btn\" title=\"Replay\" onclick=\"replayVid()\">\u21ba<\/button>\r\n <\/div>\r\n <\/div>\r\n <div style=\"padding:0 32px 24px\">\r\n <div style=\"font-family:'Syne',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.3px;color:#e8e8f0;margin-bottom:5px\">Node.js \u2014 fundamentos e event loop<\/div>\r\n <div style=\"font-size:11px;color:#5a5a70;font-family:'DM Mono',monospace\">Aula 01 de 32 \u00b7 42 min \u00b7 Backend \u00b7 do cat\u00e1logo<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fmt-content\" id=\"fc-text\" style=\"display:none\">\r\n <div class=\"text-content\">\r\n <h3>Node.js \u2014 fundamentos e event loop<\/h3>\r\n <p>Node.js \u00e9 um runtime JavaScript constru\u00eddo sobre o motor V8 do Chrome. Diferente de linguagens como PHP que criam uma nova thread para cada requisi\u00e7\u00e3o, o Node usa uma \u00fanica thread com um modelo de I\/O n\u00e3o-bloqueante.<\/p>\r\n <p>O conceito mais importante \u00e9 o <strong style=\"color:#c4b5fd\">event loop<\/strong>. Em vez de bloquear esperando I\/O, o Node registra callbacks e continua processando outras requisi\u00e7\u00f5es.<\/p>\r\n <div class=\"code-block\"><span class=\"kw\">const<\/span> http = <span class=\"fn\">require<\/span>(<span class=\"str\">'http'<\/span>);<br><br><span class=\"kw\">const<\/span> server = http.<span class=\"fn\">createServer<\/span>((req, res) => {<br> res.<span class=\"fn\">writeHead<\/span>(200, { <span class=\"str\">'Content-Type'<\/span>: <span class=\"str\">'text\/plain'<\/span> });<br> res.<span class=\"fn\">end<\/span>(<span class=\"str\">'Ol\u00e1 do Node!\\n'<\/span>);<br>});<br><br>server.<span class=\"fn\">listen<\/span>(3000, () => {<br> console.<span class=\"fn\">log<\/span>(<span class=\"str\">'Servidor rodando na porta 3000'<\/span>);<br>});<\/div>\r\n <p>Isso torna o Node eficiente para o backend do nosso iFood \u2014 com muitas requisi\u00e7\u00f5es simult\u00e2neas de clientes, restaurantes e entregadores ao mesmo tempo.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fmt-content\" id=\"fc-h5p\" style=\"display:none\">\r\n <div class=\"h5p-wrap\">\r\n <div class=\"h5p-hdr\"><span class=\"h5p-badge\">H5P<\/span><span style=\"font-size:13px;font-weight:500;color:#9191a8\">Node.js \u2014 fundamentos e event loop<\/span><span class=\"h5p-type\" id=\"h5p-type\">Quiz de m\u00faltipla escolha<\/span><\/div>\r\n <div class=\"quiz-body\" id=\"quiz-body\">\r\n <div class=\"quiz-q\">O que acontece quando o Node.js recebe duas requisi\u00e7\u00f5es simult\u00e2neas que precisam ler um arquivo do disco?<\/div>\r\n <div class=\"quiz-sub\">Escolha a op\u00e7\u00e3o que melhor descreve o comportamento do event loop.<\/div>\r\n <div class=\"quiz-opts\" id=\"quiz-opts\">\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'A')\" data-ok=\"false\"><div class=\"opt-letter\">A<\/div>Bloqueia a segunda requisi\u00e7\u00e3o at\u00e9 a primeira terminar<\/div>\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'B')\" data-ok=\"true\"><div class=\"opt-letter\">B<\/div>Envia as duas leituras ao sistema operacional e continua processando outras requisi\u00e7\u00f5es<\/div>\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'C')\" data-ok=\"false\"><div class=\"opt-letter\">C<\/div>Cria duas threads separadas, uma para cada requisi\u00e7\u00e3o<\/div>\r\n <div class=\"quiz-opt\" onclick=\"selOpt(this,'D')\" data-ok=\"false\"><div class=\"opt-letter\">D<\/div>Retorna erro 503 para uma das requisi\u00e7\u00f5es automaticamente<\/div>\r\n <\/div>\r\n <div class=\"quiz-fb\" id=\"quiz-fb\"><\/div>\r\n <div id=\"quiz-actions\"><button class=\"quiz-action-btn\" onclick=\"checkQuiz()\">Verificar resposta<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lesson-sidebar\">\r\n <div>\r\n <div class=\"ls-section-title\">Perfil de aprendizado<\/div>\r\n <div class=\"profile-ring-row\">\r\n <div class=\"ring-wrap\">\r\n <svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\r\n <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#1e1e28\" stroke-width=\"5\"\/>\r\n <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"#6c63ff\" stroke-width=\"5\" stroke-dasharray=\"75.4 125.7\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <div class=\"ring-center\">60%<\/div>\r\n <\/div>\r\n <div class=\"profile-info\">\r\n <div class=\"pname\">Aluno #4821<\/div>\r\n <div class=\"ppref\">prefer\u00eancia: <span style=\"color:#c4b5fd\">v\u00eddeo<\/span><\/div>\r\n <div class=\"ppref\" style=\"margin-top:2px\">4 aulas conclu\u00eddas<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"ls-section-title\">Reten\u00e7\u00e3o por formato<\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\">V\u00eddeo<\/span><div class=\"ret-track\"><div class=\"ret-fill\" id=\"ret-video\" style=\"width:78%;background:#9d78ff\"><\/div><\/div><span class=\"ret-pct\" id=\"ret-video-pct\">78%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\">H5P<\/span><div class=\"ret-track\"><div class=\"ret-fill\" id=\"ret-h5p\" style=\"width:65%;background:#f97316\"><\/div><\/div><span class=\"ret-pct\" id=\"ret-h5p-pct\">65%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\">Texto<\/span><div class=\"ret-track\"><div class=\"ret-fill\" id=\"ret-text\" style=\"width:42%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-pct\" id=\"ret-text-pct\">42%<\/span><\/div>\r\n <div style=\"font-size:9px;color:#5a5a70;font-family:'DM Mono',monospace;margin-top:6px\">Baseado em 4 aulas \u00b7 \u00faltima atualiza\u00e7\u00e3o h\u00e1 2min<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"ls-section-title\">Eventos registrados<\/div>\r\n <div id=\"event-feed\">\r\n <div class=\"event-item\"><div class=\"event-dot\" style=\"background:#4ade80\"><\/div><div><div>Aula 01 iniciada \u2014 v\u00eddeo<\/div><div style=\"color:#3a3a50;font-size:9px\">h\u00e1 3min<\/div><\/div><\/div>\r\n <div class=\"event-item\"><div class=\"event-dot\" style=\"background:#9d78ff\"><\/div><div><div>Aula 04 conclu\u00edda \u2014 94% reten\u00e7\u00e3o<\/div><div style=\"color:#3a3a50;font-size:9px\">h\u00e1 22min<\/div><\/div><\/div>\r\n <div class=\"event-item\"><div class=\"event-dot\" style=\"background:#f97316\"><\/div><div><div>Replay em 2:14 \u2014 event loop<\/div><div style=\"color:#3a3a50;font-size:9px\">h\u00e1 24min<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"ls-section-title\">Pr\u00f3xima aula<\/div>\r\n <div class=\"next-card\">\r\n <div class=\"next-lbl\">Em seguida<\/div>\r\n <div class=\"next-title\">Express.js \u2014 criando sua primeira API REST<\/div>\r\n <div class=\"next-meta\">38min \u00b7 formato sugerido: v\u00eddeo<\/div>\r\n <\/div>\r\n <button class=\"done-btn\" onclick=\"goToStep(4);showToast('Aula conclu\u00edda! Perfil atualizado.')\">Concluir aula \u2713<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"s-panel\" id=\"s-step-4\">\r\n <div class=\"profile-screen\">\r\n <div class=\"profile-card\">\r\n <div class=\"check-anim\">\u2713<\/div>\r\n <div class=\"profile-title\">Aula conclu\u00edda!<\/div>\r\n <div class=\"profile-sub\">Node.js \u2014 fundamentos e event loop<\/div>\r\n <div class=\"stats-grid\">\r\n <div class=\"s-stat\" style=\"background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.2)\"><div class=\"s-stat-n\" style=\"color:#4ade80\">1<\/div><div class=\"s-stat-l\" style=\"color:#4ade80\">aula hoje<\/div><\/div>\r\n <div class=\"s-stat\" style=\"background:rgba(108,99,255,.08);border-color:rgba(108,99,255,.2)\"><div class=\"s-stat-n\" style=\"color:#c4b5fd\">31<\/div><div class=\"s-stat-l\" style=\"color:#c4b5fd\">restantes<\/div><\/div>\r\n <div class=\"s-stat\" style=\"background:rgba(157,120,255,.08);border-color:rgba(157,120,255,.2)\"><div class=\"s-stat-n\" style=\"color:#c4b5fd\">78%<\/div><div class=\"s-stat-l\" style=\"color:#c4b5fd\">reten\u00e7\u00e3o v\u00eddeo<\/div><\/div>\r\n <div class=\"s-stat\" style=\"background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.2)\"><div class=\"s-stat-n\" style=\"color:#f97316\">42min<\/div><div class=\"s-stat-l\" style=\"color:#f97316\">estudo hoje<\/div><\/div>\r\n <\/div>\r\n <div class=\"profile-learn-title\">Como voc\u00ea aprende melhor<\/div>\r\n <div style=\"margin-bottom:12px\">\r\n <div class=\"ret-row\"><span class=\"ret-label\" style=\"color:#9191a8\">V\u00eddeo<\/span><div class=\"ret-track\" style=\"background:#1e1e28\"><div class=\"ret-fill\" style=\"width:78%;background:#9d78ff\"><\/div><\/div><span class=\"ret-pct\" style=\"color:#c4b5fd\">78%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\" style=\"color:#9191a8\">H5P<\/span><div class=\"ret-track\" style=\"background:#1e1e28\"><div class=\"ret-fill\" style=\"width:65%;background:#f97316\"><\/div><\/div><span class=\"ret-pct\" style=\"color:#f97316\">65%<\/span><\/div>\r\n <div class=\"ret-row\"><span class=\"ret-label\" style=\"color:#9191a8\">Texto<\/span><div class=\"ret-track\" style=\"background:#1e1e28\"><div class=\"ret-fill\" style=\"width:42%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-pct\" style=\"color:#2dd4bf\">42%<\/span><\/div>\r\n <\/div>\r\n <div style=\"font-size:11px;color:#5a5a70;font-family:'DM Mono',monospace;margin-bottom:16px\">Perfil calculado com base em 5 aulas<\/div>\r\n <div style=\"display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;text-align:left\">\r\n <div style=\"font-size:11px;color:#9191a8;width:100%;margin-bottom:4px\">T\u00f3picos para refor\u00e7ar:<\/div>\r\n <span style=\"font-size:10px;font-family:'DM Mono',monospace;padding:3px 9px;border-radius:4px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);color:#f97316\">event loop<\/span>\r\n <span style=\"font-size:10px;font-family:'DM Mono',monospace;padding:3px 9px;border-radius:4px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);color:#f97316\">I\/O n\u00e3o-bloqueante<\/span>\r\n <\/div>\r\n <div class=\"next-lesson-card\">\r\n <div class=\"next-lbl\" style=\"color:#5a5a70\">Pr\u00f3xima aula<\/div>\r\n <div class=\"next-title\" style=\"font-size:13px;font-weight:500;color:#e8e8f0;margin-bottom:3px\">Express.js \u2014 criando sua primeira API REST<\/div>\r\n <div class=\"next-meta\" style=\"font-size:10px;color:#5a5a70;font-family:'DM Mono',monospace;margin-bottom:12px\">38min \u00b7 formato sugerido: v\u00eddeo<\/div>\r\n <button class=\"done-btn\" onclick=\"goToStep(3);showToast('Pr\u00f3xima aula carregada!')\">Pr\u00f3xima aula \u2192<\/button>\r\n <\/div>\r\n <span class=\"back-plan-link\" onclick=\"goToStep(2)\">Ver plano completo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div id=\"view-prof\" class=\"view\">\r\n <div class=\"p-header\">\r\n <div class=\"p-logo\">DevFullStack <span>\/ Professor<\/span><\/div>\r\n <div class=\"p-tabs\">\r\n <button class=\"p-tab active\" onclick=\"showPTab('overview',this)\">Vis\u00e3o Geral<\/button>\r\n <button class=\"p-tab\" onclick=\"showPTab('profiles',this)\">Perfis de Alunos<\/button>\r\n <button class=\"p-tab\" onclick=\"showPTab('catalog',this)\">Cat\u00e1logo IA<\/button>\r\n <button class=\"p-tab\" onclick=\"showPTab('generated',this)\">Conte\u00fado Gerado<\/button>\r\n <\/div>\r\n <button class=\"p-back\" onclick=\"switchView('arch',null)\">\u2190 Voltar<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel active\" id=\"p-overview\">\r\n <div class=\"p-metric-grid\">\r\n <div class=\"p-metric\" style=\"border-left-color:var(--blue)\"><div class=\"p-metric-n\" style=\"color:var(--blue)\">24<\/div><div class=\"p-metric-l\">alunos ativos<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--violet)\"><div class=\"p-metric-n\" style=\"color:var(--violet)\">18<\/div><div class=\"p-metric-l\">projetos em andamento<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--green)\"><div class=\"p-metric-n\" style=\"color:var(--green)\">847<\/div><div class=\"p-metric-l\">aulas reutilizadas<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--amber)\"><div class=\"p-metric-n\" style=\"color:var(--amber)\">134<\/div><div class=\"p-metric-l\">aulas geradas pela IA<\/div><\/div>\r\n <div class=\"p-metric\" style=\"border-left-color:var(--rose)\"><div class=\"p-metric-n\" style=\"color:var(--rose)\">89%<\/div><div class=\"p-metric-l\">taxa m\u00e9dia de conclus\u00e3o<\/div><\/div>\r\n <\/div>\r\n <div class=\"p-two-col\">\r\n <div class=\"p-card\">\r\n <div class=\"p-card-title\">Tipo de formato preferido \u2014 24 alunos <button class=\"info-btn\" onclick=\"openModal()\">\u24d8 como \u00e9 calculado?<\/button><\/div>\r\n <div class=\"donut-row\">\r\n <svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\">\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#e2dfd8\" stroke-width=\"12\"\/>\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#6c63ff\" stroke-width=\"12\" stroke-dasharray=\"156.4 133.6\" stroke-linecap=\"round\" transform=\"rotate(-90 60 60)\"\/>\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#f97316\" stroke-width=\"12\" stroke-dasharray=\"84 206\" stroke-linecap=\"round\" transform=\"rotate(104.4 60 60)\"\/>\r\n <circle cx=\"60\" cy=\"60\" r=\"46\" fill=\"none\" stroke=\"#2dd4bf\" stroke-width=\"12\" stroke-dasharray=\"49.2 240.8\" stroke-linecap=\"round\" transform=\"rotate(208.8 60 60)\"\/>\r\n <text x=\"60\" y=\"55\" text-anchor=\"middle\" font-family=\"Syne\" font-size=\"18\" font-weight=\"700\" fill=\"#1a1916\">24<\/text>\r\n <text x=\"60\" y=\"70\" text-anchor=\"middle\" font-family=\"IBM Plex Mono\" font-size=\"8\" fill=\"#8a8880\">alunos<\/text>\r\n <\/svg>\r\n <div class=\"donut-legend\">\r\n <div class=\"donut-legend-item\"><div class=\"donut-legend-dot\" style=\"background:#6c63ff\"><\/div>V\u00eddeo<span class=\"donut-pct\" style=\"color:#6c63ff\">54% \u00b7 13<\/span><\/div>\r\n <div class=\"donut-legend-item\"><div class=\"donut-legend-dot\" style=\"background:#f97316\"><\/div>H5P<span class=\"donut-pct\" style=\"color:#f97316\">29% \u00b7 7<\/span><\/div>\r\n <div class=\"donut-legend-item\"><div class=\"donut-legend-dot\" style=\"background:#2dd4bf\"><\/div>Texto<span class=\"donut-pct\" style=\"color:#2dd4bf\">17% \u00b7 4<\/span><\/div>\r\n <div style=\"font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:4px\">baseado em LearnerProfile.preferredFormat<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-card\">\r\n <div class=\"p-card-title\">Reten\u00e7\u00e3o m\u00e9dia por formato <button class=\"info-btn\" onclick=\"openModal()\">\u24d8 como \u00e9 calculado?<\/button><\/div>\r\n <div style=\"margin-bottom:16px;font-size:12px;color:var(--ink3)\">M\u00e9dia de todos os alunos com \u2265 3 aulas por formato<\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:76%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">76%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:68%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">68%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:51%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">51%<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-section\">Atividade recente<\/div>\r\n <div class=\"p-card\" style=\"padding:0;overflow:hidden\">\r\n <table class=\"p-table\">\r\n <thead><tr><th>Aluno<\/th><th>Projeto<\/th><th>\u00daltima aula<\/th><th>Formato<\/th><th>Reten\u00e7\u00e3o<\/th><th>Status<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr onclick=\"openDrawer('Jo\u00e3o','iFood clone','v\u00eddeo',82,'Formato preferido: v\u00eddeo com 82% de reten\u00e7\u00e3o. Tende a pausar em trechos conceituais e revisar antes de avan\u00e7ar.')\"><td>Jo\u00e3o Silva<\/td><td>iFood clone<\/td><td>Node.js fundamentos<\/td><td><span class=\"entity-pill\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/td><td>82%<\/td><td><span class=\"p-status star\">destaque<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Ana','Netflix clone','H5P',71,'Formato preferido: H5P com 71% de reten\u00e7\u00e3o. Boa performance em exerc\u00edcios interativos.')\"><td>Ana Costa<\/td><td>Netflix clone<\/td><td>React hooks avan\u00e7ado<\/td><td><span class=\"entity-pill\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/td><td>71%<\/td><td><span class=\"p-status ok\">ativo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Pedro','CRM','texto',44,'Aten\u00e7\u00e3o: reten\u00e7\u00e3o abaixo do esperado (44%). O formato texto, que ele mais usa, tem menor taxa. Recomendado migrar para H5P ou v\u00eddeo.')\"><td>Pedro Lemos<\/td><td>CRM completo<\/td><td>PostgreSQL joins<\/td><td><span class=\"entity-pill\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">texto<\/span><\/td><td style=\"color:var(--amber)\">44%<\/td><td><span class=\"p-status warn\">baixo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Mariana','iFood clone','v\u00eddeo',89,'Melhor aluna da turma em reten\u00e7\u00e3o de v\u00eddeo. Progresso consistente e sem replays excessivos.')\"><td>Mariana Souza<\/td><td>iFood clone<\/td><td>Express middlewares<\/td><td><span class=\"entity-pill\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/td><td>89%<\/td><td><span class=\"p-status star\">destaque<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Carlos','SaaS','H5P',77,'Bom engajamento com H5P. Prefer\u00eancia clara por exerc\u00edcios interativos com feedback imediato.')\"><td>Carlos Mendes<\/td><td>SaaS com IA<\/td><td>Autentica\u00e7\u00e3o JWT<\/td><td><span class=\"entity-pill\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/td><td>77%<\/td><td><span class=\"p-status ok\">ativo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Julia','Instagram','texto',38,'Reten\u00e7\u00e3o cr\u00edtica (38%). Texto n\u00e3o est\u00e1 funcionando bem para este perfil. Interven\u00e7\u00e3o recomendada.')\"><td>Julia Ferreira<\/td><td>Instagram clone<\/td><td>CSS Grid avan\u00e7ado<\/td><td><span class=\"entity-pill\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">texto<\/span><\/td><td style=\"color:var(--rose)\">38%<\/td><td><span class=\"p-status warn\">baixo<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Rafael','iFood clone','v\u00eddeo',91,'Excelente. 91% de reten\u00e7\u00e3o em v\u00eddeo. Completa aulas sem replays desnecess\u00e1rios. Refer\u00eancia para a turma.')\"><td>Rafael Nunes<\/td><td>iFood clone<\/td><td>Stripe webhooks<\/td><td><span class=\"entity-pill\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/td><td>91%<\/td><td><span class=\"p-status star\">destaque<\/span><\/td><\/tr>\r\n <tr onclick=\"openDrawer('Beatriz','CRM','H5P',65,'Reten\u00e7\u00e3o moderada em H5P. Tende a tentar mais de uma vez nos quizzes \u2014 pode indicar dificuldade ou cautela antes de responder.')\"><td>Beatriz Lima<\/td><td>CRM completo<\/td><td>React Query<\/td><td><span class=\"entity-pill\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/td><td>65%<\/td><td><span class=\"p-status ok\">ativo<\/span><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel\" id=\"p-profiles\">\r\n <div class=\"p-filters\">\r\n <select class=\"p-select\"><option>Todos os projetos<\/option><option>iFood clone<\/option><option>Netflix clone<\/option><option>CRM completo<\/option><option>SaaS com IA<\/option><\/select>\r\n <select class=\"p-select\"><option>Todos os formatos<\/option><option>V\u00eddeo<\/option><option>H5P<\/option><option>Texto<\/option><\/select>\r\n <select class=\"p-select\"><option>Todos os status<\/option><option>Ativos<\/option><option>Reten\u00e7\u00e3o baixa<\/option><option>Destaques<\/option><\/select>\r\n <\/div>\r\n <div class=\"student-grid\">\r\n <div class=\"student-card\" onclick=\"openDrawer('Jo\u00e3o','iFood clone','v\u00eddeo',82,'Formato preferido: v\u00eddeo com 82% de reten\u00e7\u00e3o. Tende a pausar em trechos conceituais.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#6c63ff\">JS<\/div><div><div class=\"stu-name\">Jo\u00e3o Silva<\/div><div class=\"stu-proj\">iFood clone<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:82%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">82%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:58%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">58%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:35%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">35%<\/span><\/div>\r\n <div class=\"stu-weak\"><span class=\"weak-chip\">callbacks<\/span><span class=\"weak-chip\">async\/await<\/span><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">12<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">82%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">\u2605<\/div><div class=\"stu-stat-l\">destaque<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"student-card\" onclick=\"openDrawer('Ana','Netflix clone','H5P',71,'Bom engajamento com exerc\u00edcios interativos H5P.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#9d78ff\">AC<\/div><div><div class=\"stu-name\">Ana Costa<\/div><div class=\"stu-proj\">Netflix clone<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)\">H5P<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:62%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">62%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:71%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">71%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:40%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">40%<\/span><\/div>\r\n <div class=\"stu-weak\"><span class=\"weak-chip\">React Router<\/span><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">9<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">71%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">\u25cf<\/div><div class=\"stu-stat-l\">ativo<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"student-card\" onclick=\"openDrawer('Pedro','CRM','texto',44,'Reten\u00e7\u00e3o abaixo do esperado. Interven\u00e7\u00e3o recomendada.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#f97316\">PL<\/div><div><div class=\"stu-name\">Pedro Lemos<\/div><div class=\"stu-proj\">CRM completo<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)\">texto<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:48%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">48%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:52%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">52%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:44%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">44%<\/span><\/div>\r\n <div class=\"stu-weak\"><span class=\"weak-chip\">joins<\/span><span class=\"weak-chip\">subqueries<\/span><span class=\"weak-chip\">\u00edndices<\/span><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">7<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\" style=\"color:var(--amber)\">44%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\" style=\"color:var(--amber)\">\u25b2<\/div><div class=\"stu-stat-l\">baixo<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"student-card\" onclick=\"openDrawer('Mariana','iFood clone','v\u00eddeo',89,'Melhor reten\u00e7\u00e3o da turma. Progresso consistente.')\">\r\n <div class=\"stu-head\"><div class=\"stu-avatar\" style=\"background:#15803d\">MS<\/div><div><div class=\"stu-name\">Mariana Souza<\/div><div class=\"stu-proj\">iFood clone<\/div><\/div><span class=\"stu-fmt-badge\" style=\"background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)\">v\u00eddeo<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">V\u00eddeo<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:89%;background:#6c63ff\"><\/div><\/div><span class=\"ret-bar-pct\">89%<\/span><\/div>\r\n <div class=\"ret-bar-row\" style=\"margin-bottom:5px\"><span class=\"ret-bar-label\">H5P<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:72%;background:#f97316\"><\/div><\/div><span class=\"ret-bar-pct\">72%<\/span><\/div>\r\n <div class=\"ret-bar-row\"><span class=\"ret-bar-label\">Texto<\/span><div class=\"ret-bar-track\"><div class=\"ret-bar-fill\" style=\"width:55%;background:#2dd4bf\"><\/div><\/div><span class=\"ret-bar-pct\">55%<\/span><\/div>\r\n <div class=\"stu-weak\"><\/div>\r\n <div class=\"stu-stats\"><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">15<\/div><div class=\"stu-stat-l\">aulas<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">89%<\/div><div class=\"stu-stat-l\">conclus\u00e3o<\/div><\/div><div class=\"stu-stat-item\"><div class=\"stu-stat-v\">\u2605<\/div><div class=\"stu-stat-l\">destaque<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel\" id=\"p-catalog\">\r\n <div class=\"p-section\">Cobertura por categoria<\/div>\r\n <div class=\"cat-grid\">\r\n <div class=\"p-card\"><div class=\"cat-name\">React <span class=\"cat-total\">280 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:87%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:13%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">243 do cat\u00e1logo<\/span><span class=\"iai\">37 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">Node.js <span class=\"cat-total\">210 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:91%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:9%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">191 do cat\u00e1logo<\/span><span class=\"iai\">19 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">PostgreSQL <span class=\"cat-total\">180 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:74%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:26%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">133 do cat\u00e1logo<\/span><span class=\"iai\">47 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">DevOps <span class=\"cat-total\">165 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:95%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:5%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">157 do cat\u00e1logo<\/span><span class=\"iai\">8 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">Stripe \/ Pagamentos <span class=\"cat-total\">95 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:61%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:39%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">58 do cat\u00e1logo<\/span><span class=\"iai\">37 geradas por IA<\/span><\/div><\/div>\r\n <div class=\"p-card\"><div class=\"cat-name\">Deploy \/ Infra <span class=\"cat-total\">120 aulas<\/span><\/div><div class=\"stacked-bar\"><div class=\"stacked-seg\" style=\"width:83%;background:var(--blue)\"><\/div><div class=\"stacked-seg\" style=\"width:17%;background:var(--amber)\"><\/div><\/div><div class=\"cat-detail\"><span class=\"orig\">99 do cat\u00e1logo<\/span><span class=\"iai\">21 geradas por IA<\/span><\/div><\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\r\n <div>\r\n <div class=\"p-section\">Top desempenho (IA gerou)<\/div>\r\n <table class=\"p-table\" style=\"background:white;border:1.5px solid var(--rule2);border-radius:10px;overflow:hidden\">\r\n <thead><tr><th>Aula<\/th><th>Alunos<\/th><th>Reten\u00e7\u00e3o<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>PostgreSQL \u2014 card\u00e1pios e pedidos<\/td><td>14<\/td><td><span style=\"color:var(--green);font-weight:600\">81%<\/span><\/td><\/tr>\r\n <tr><td>Stripe webhooks para delivery<\/td><td>11<\/td><td><span style=\"color:var(--green);font-weight:600\">78%<\/span><\/td><\/tr>\r\n <tr><td>React tela de card\u00e1pio \u2014 iFood<\/td><td>14<\/td><td><span style=\"color:var(--amber);font-weight:600\">76%<\/span><\/td><\/tr>\r\n <tr><td>Deploy Railway \u2014 app fullstack<\/td><td>10<\/td><td><span style=\"color:var(--amber);font-weight:600\">74%<\/span><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div>\r\n <div class=\"p-section\">Precisam aten\u00e7\u00e3o<\/div>\r\n <table class=\"p-table\" style=\"background:white;border:1.5px solid var(--rule2);border-radius:10px;overflow:hidden\">\r\n <thead><tr><th>Aula<\/th><th>Alunos<\/th><th>Reten\u00e7\u00e3o<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>CSS avan\u00e7ado \u2014 anima\u00e7\u00f5es<\/td><td>3<\/td><td><span style=\"color:var(--rose);font-weight:600\">41%<\/span><\/td><\/tr>\r\n <tr><td>GraphQL subscriptions<\/td><td>2<\/td><td><span style=\"color:var(--rose);font-weight:600\">48%<\/span><\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"callout callout-amber\" style=\"margin-top:12px;font-size:12px\"><div class=\"callout-icon\">\u26a0<\/div><div class=\"callout-text\">Aulas com reten\u00e7\u00e3o < 55% geradas por IA. Considere revis\u00e3o ou novas variantes de formato.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-panel\" id=\"p-generated\">\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px\">\r\n <div class=\"p-card\" style=\"text-align:center\"><div style=\"font-family:var(--mono);font-size:10px;color:var(--green);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px\">Reutiliza\u00e7\u00f5es do cat\u00e1logo<\/div><div style=\"font-family:'Syne',sans-serif;font-size:32px;font-weight:700;color:var(--green)\">847<\/div><div style=\"font-size:11px;color:var(--ink3)\">cada uma evitou uma chamada ao LLM<\/div><\/div>\r\n <div class=\"p-card\" style=\"text-align:center\"><div style=\"font-family:var(--mono);font-size:10px;color:var(--amber);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px\">Novas aulas geradas<\/div><div style=\"font-family:'Syne',sans-serif;font-size:32px;font-weight:700;color:var(--amber)\">134<\/div><div style=\"font-size:11px;color:var(--ink3)\">permanentes \u2014 n\u00e3o ser\u00e3o geradas de novo<\/div><\/div>\r\n <div class=\"p-card\" style=\"text-align:center\"><div style=\"font-family:var(--mono);font-size:10px;color:var(--blue);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px\">J\u00e1 dispon\u00edveis para futuros alunos<\/div><div style=\"font-family:'Syne',sans-serif;font-size:32px;font-weight:700;color:var(--blue)\">134<\/div><div style=\"font-size:11px;color:var(--ink3)\">cada aula nova beneficia todos os pr\u00f3ximos projetos<\/div><\/div>\r\n <\/div>\r\n <div class=\"p-section\">Timeline de gera\u00e7\u00e3o<\/div>\r\n <div class=\"gen-timeline\">\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">PostgreSQL \u2014 modelando card\u00e1pios e pedidos<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>PostgreSQL \u00b7 iFood clone<\/span><span>Gerado em 18s via Claude API \u00b7 h\u00e1 3 dias<\/span><span>14 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:81%;background:var(--green)\"><\/div><\/div><span style=\"font-weight:600;color:var(--green)\">81%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">Stripe webhooks para apps de delivery<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>Stripe \u00b7 iFood clone<\/span><span>Gerado em 34s via Claude API \u00b7 h\u00e1 3 dias<\/span><span>11 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:78%;background:var(--green)\"><\/div><\/div><span style=\"font-weight:600;color:var(--green)\">78%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u25c8<\/span><span class=\"tl-title\">Variante H5P \u2014 React hooks avan\u00e7ado<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-var\">variante H5P<\/span><\/div><\/div><div class=\"tl-row2\"><span>React \u00b7 gerada por demanda de formato<\/span><span>Gerado em 41s \u00b7 h\u00e1 2 dias<\/span><span>7 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:83%;background:var(--green)\"><\/div><\/div><span style=\"font-weight:600;color:var(--green)\">83%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">Autentica\u00e7\u00e3o JWT com refresh token \u2014 SaaS<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>Node.js \u00b7 SaaS com IA<\/span><span>Gerado em 27s \u00b7 h\u00e1 2 dias<\/span><span>6 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:71%;background:var(--amber)\"><\/div><\/div><span style=\"font-weight:600;color:var(--amber)\">71%<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u25c8<\/span><span class=\"tl-title\">Variante v\u00eddeo \u2014 Express middlewares<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-gen\">\u25cc gerando...<\/span><span class=\"tl-badge tl-var\">variante v\u00eddeo<\/span><\/div><\/div><div class=\"tl-row2\"><span>Node.js \u00b7 gerada por demanda<\/span><span>Em gera\u00e7\u00e3o h\u00e1 4min...<\/span><span>\u2014<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">CSS avan\u00e7ado \u2014 anima\u00e7\u00f5es para feed Instagram<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-ready\">\u25cf pronta<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>CSS \u00b7 Instagram clone<\/span><span>Gerado em 19s \u00b7 hoje<\/span><span>3 alunos<\/span><div class=\"tl-ret-bar\"><div class=\"tl-ret-fill\" style=\"width:41%;background:var(--rose)\"><\/div><\/div><span style=\"font-weight:600;color:var(--rose)\">41% \u26a0<\/span><\/div><\/div>\r\n <div class=\"tl-item\"><div class=\"tl-row1\"><span class=\"tl-icon\">\u2726<\/span><span class=\"tl-title\">Pipeline CI\/CD \u2014 GitHub Actions + Railway<\/span><div class=\"tl-badges\"><span class=\"tl-badge tl-gen\">\u25cc gerando...<\/span><span class=\"tl-badge tl-new\">aula nova<\/span><\/div><\/div><div class=\"tl-row2\"><span>DevOps \u00b7 iFood clone<\/span><span>Em gera\u00e7\u00e3o h\u00e1 2min...<\/span><span>\u2014<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"overlay\" id=\"drawer-overlay\" onclick=\"closeDrawer()\">\r\n <div class=\"drawer\" onclick=\"event.stopPropagation()\">\r\n <button class=\"drawer-close\" onclick=\"closeDrawer()\">\u2715 fechar<\/button>\r\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:4px\">\r\n <div class=\"stu-avatar\" id=\"drawer-avatar\" style=\"background:#6c63ff;width:48px;height:48px;font-size:15px\">JS<\/div>\r\n <div><div class=\"drawer-name\" id=\"drawer-name\">Jo\u00e3o Silva<\/div><div class=\"drawer-proj\" id=\"drawer-proj\">iFood clone \u00b7 12 aulas conclu\u00eddas<\/div><\/div>\r\n <\/div>\r\n <div class=\"drawer-interp\" id=\"drawer-interp\">Perfil carregando...<\/div>\r\n <div class=\"p-section\" style=\"margin-top:0\">Variante entregue vs motivo<\/div>\r\n <table class=\"delivery-table\">\r\n <thead><tr><th>Aula<\/th><th>Variante<\/th><th>Motivo<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>Node.js fundamentos<\/td><td>V\u00eddeo<\/td><td>preferred_format<\/td><\/tr>\r\n <tr><td>Express REST API<\/td><td>V\u00eddeo<\/td><td>preferred_format<\/td><\/tr>\r\n <tr><td>PostgreSQL card\u00e1pios<\/td><td>Texto<\/td><td>fallback (v\u00eddeo gerando)<\/td><\/tr>\r\n <tr><td>React componentes<\/td><td>V\u00eddeo<\/td><td>preferred_format<\/td><\/tr>\r\n <tr><td>iFood tela React<\/td><td>H5P<\/td><td>new_user_default<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"p-section\" style=\"margin-top:20px\">F\u00f3rmula do perfil<\/div>\r\n <div class=\"formula-block\">\r\n <span class=\"hl\">retentionScore(formato)<\/span> =<br>\r\n (conclusao_media \u00d7 0.5) +<br>\r\n (acerto_quiz_media \u00d7 0.3) +<br>\r\n (sem_replays_excessivos \u00d7 0.2)<br><br>\r\n <span style=\"color:#8a8880\">Calculado por job peri\u00f3dico.<br>M\u00ednimo 3 aulas por formato para ativar.<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"modal-backdrop\" id=\"formula-modal\" onclick=\"closeModal()\">\r\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\r\n <div class=\"modal-title\">Como o perfil de aprendizado \u00e9 calculado<\/div>\r\n <div class=\"modal-sub\">LearnerProfile \u00b7 job peri\u00f3dico \u00b7 m\u00ednimo 3 aulas por formato<\/div>\r\n <div class=\"modal-card\"><div class=\"modal-card-title\">Sinais coletados (LearnerEvent)<\/div>\r\n <div style=\"font-size:12px;color:var(--ink2);line-height:1.8\">\u25cf Tempo total assistido vs dura\u00e7\u00e3o = % de conclus\u00e3o<br>\u25cf N\u00famero de replays = dificuldade no t\u00f3pico<br>\u25cf Acertos e tentativas no quiz = desempenho<br>\u25cf Formato escolhido = prefer\u00eancia declarada<\/div>\r\n <\/div>\r\n <div class=\"modal-card\"><div class=\"modal-card-title\">F\u00f3rmula de score<\/div>\r\n <div class=\"formula-block\"><span class=\"hl\">retentionScore(formato)<\/span> =<br> (conclusao_media \u00d7 0.5) +<br> (acerto_quiz_media \u00d7 0.3) +<br> (sem_replays_excessivos \u00d7 0.2)<br><br><span style=\"color:var(--ink3)\">Alunos com < 3 aulas em um formato recebem o formato padr\u00e3o.<\/span><\/div>\r\n <\/div>\r\n <div class=\"modal-card\"><div class=\"modal-card-title\">Algoritmo de sele\u00e7\u00e3o (V1)<\/div>\r\n <div class=\"formula-block\">1. Busca LearnerProfile do aluno<br>2. Se preferredFormat definido (\u22653 aulas, reten\u00e7\u00e3o \u226565%)<br> \u2192 entrega esse formato \u00b7 reason: <span class=\"hl\">\"preferred_format\"<\/span><br>3. Se perfil vazio (aluno novo)<br> \u2192 entrega v\u00eddeo \u00b7 reason: <span class=\"hl\">\"new_user_default\"<\/span><br>4. Se variante preferida est\u00e1 \"generating\"<br> \u2192 entrega pr\u00f3ximo dispon\u00edvel \u00b7 reason: <span class=\"hl\">\"fallback_generating\"<\/span><br>5. Sempre registra em <span class=\"hl\">LessonDelivery<\/span> para auditoria<\/div>\r\n <\/div>\r\n <button class=\"modal-close\" onclick=\"closeModal()\">Fechar<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550 VIEW SWITCHING \u2550\u2550\u2550 *\/\r\nfunction switchView(id, btn) {\r\n document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));\r\n document.getElementById('view-' + id).classList.add('active');\r\n if (btn) {\r\n document.querySelectorAll('.sw-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n } else {\r\n document.querySelectorAll('.sw-btn').forEach(b => b.classList.remove('active'));\r\n document.querySelectorAll('.sw-btn')[0].classList.add('active');\r\n }\r\n window.scrollTo(0, 0);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 ARCH TABS \u2550\u2550\u2550 *\/\r\nfunction showTab(view, id) {\r\n document.querySelectorAll('#view-arch .panel').forEach(p => p.classList.remove('active'));\r\n document.querySelectorAll('#view-arch .tab').forEach(t => t.classList.remove('active'));\r\n document.getElementById('tab-' + id).classList.add('active');\r\n event.target.classList.add('active');\r\n}\r\n\r\n\/* \u2550\u2550\u2550 STUDENT FLOW \u2550\u2550\u2550 *\/\r\nvar chatPhase = 0;\r\n\r\nfunction updateStepper(step) {\r\n for (var i = 1; i <= 4; i++) {\r\n var el = document.getElementById('ss' + i);\r\n el.classList.remove('active', 'done');\r\n if (i < step) el.classList.add('done');\r\n else if (i === step) el.classList.add('active');\r\n }\r\n}\r\n\r\nfunction goToStep(n) {\r\n document.querySelectorAll('.s-panel').forEach(p => p.classList.remove('active'));\r\n document.getElementById('s-step-' + n).classList.add('active');\r\n updateStepper(n);\r\n window.scrollTo(0, 0);\r\n}\r\n\r\nfunction goToLesson() { goToStep(3); }\r\n\r\nfunction selectProj(card, text) {\r\n document.querySelectorAll('.proj-card').forEach(c => c.classList.remove('sel'));\r\n card.classList.add('sel');\r\n document.getElementById('chat-input').value = text;\r\n}\r\n\r\nfunction addMsg(who, html) {\r\n var msgs = document.getElementById('chat-messages');\r\n var div = document.createElement('div');\r\n div.className = 'msg' + (who === 'user' ? ' user' : '');\r\n div.innerHTML = '<div class=\"avatar ' + who + '\">' + (who === 'ai' ? 'AI' : 'EU') + '<\/div><div class=\"bubble\">' + html + '<\/div>';\r\n msgs.appendChild(div);\r\n msgs.scrollTop = msgs.scrollHeight;\r\n}\r\n\r\nfunction showTyping(cb, delay) {\r\n var msgs = document.getElementById('chat-messages');\r\n var div = document.createElement('div');\r\n div.className = 'msg'; div.id = 'typing-indicator';\r\n div.innerHTML = '<div class=\"avatar ai\">AI<\/div><div class=\"bubble\"><div class=\"typing\"><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><\/div><\/div>';\r\n msgs.appendChild(div);\r\n msgs.scrollTop = msgs.scrollHeight;\r\n setTimeout(function() {\r\n var t = document.getElementById('typing-indicator');\r\n if (t) t.remove();\r\n cb();\r\n }, delay || 1400);\r\n}\r\n\r\nvar chatResponses = [\r\n function() {\r\n addMsg('ai', '\u00d3tima escolha! Para montar o melhor plano, me conta:<br><br>\u2014 Voc\u00ea j\u00e1 tem experi\u00eancia com <strong>React<\/strong> ou <strong>Node.js<\/strong>?<br>\u2014 Quer incluir <strong>pagamentos<\/strong>, <strong>painel do restaurante<\/strong> e <strong>rastreamento<\/strong>?<div class=\"quick-replies\"><button class=\"qr\" onclick=\"sendQuick(\\'Sou iniciante, nunca fiz backend\\')\">Sou iniciante<\/button><button class=\"qr\" onclick=\"sendQuick(\\'Tenho no\u00e7\u00e3o b\u00e1sica de JavaScript\\')\">No\u00e7\u00e3o b\u00e1sica<\/button><\/div>');\r\n },\r\n function() {\r\n addMsg('ai', 'Perfeito! Encontrei <span class=\"tag\">22 aulas prontas<\/span> no cat\u00e1logo que cobrem sua trilha.<br><br>Vou gerar <span class=\"tag\">10 aulas espec\u00edficas<\/span> para o contexto do iFood \u2014 card\u00e1pios, mapa e painel do restaurante.<br><br>Estimativa: <strong>32 aulas \u00b7 6\u20138 semanas<\/strong>. Gerando seu plano...<br><br><span id=\"plan-status\" style=\"font-family:\\'DM Mono\\',monospace;font-size:11px;color:#9191a8\">\u27f3 processando...<\/span>');\r\n setTimeout(function() {\r\n var s = document.getElementById('plan-status');\r\n if (s) {\r\n s.style.color = '#4ade80';\r\n s.textContent = '\u2713 Plano gerado!';\r\n var b = document.createElement('div');\r\n b.style.marginTop = '10px';\r\n b.innerHTML = '<button class=\"plan-ready-btn\" onclick=\"goToStep(2)\">Ver meu plano de curso \u2192<\/button>';\r\n s.parentNode.appendChild(b);\r\n }\r\n }, 2000);\r\n }\r\n];\r\n\r\nfunction sendChat() {\r\n var input = document.getElementById('chat-input');\r\n var text = input.value.trim();\r\n if (!text) return;\r\n input.value = ''; input.style.height = 'auto';\r\n addMsg('user', text);\r\n if (chatPhase < chatResponses.length) {\r\n var resp = chatResponses[chatPhase++];\r\n showTyping(resp, 1200 + chatPhase * 100);\r\n }\r\n}\r\n\r\nfunction sendQuick(text) {\r\n document.getElementById('chat-input').value = text;\r\n sendChat();\r\n}\r\n\r\n\/* \u2550\u2550\u2550 VIDEO PLAYER \u2550\u2550\u2550 *\/\r\nvar isPlaying = false;\r\nvar vidProgress = 0;\r\nvar vidInterval = null;\r\n\r\nfunction togglePlay() {\r\n if (!isPlaying) {\r\n isPlaying = true;\r\n document.getElementById('vid-placeholder').style.display = 'none';\r\n document.getElementById('vid-playing').style.display = 'flex';\r\n document.getElementById('play-ctrl').textContent = '\u23f8';\r\n addEvt('play', 'V\u00eddeo iniciado');\r\n vidInterval = setInterval(function() {\r\n vidProgress = Math.min(vidProgress + 0.003, 1);\r\n var secs = Math.floor(vidProgress * 525);\r\n var pct = (vidProgress * 100).toFixed(1) + '%';\r\n document.getElementById('vid-prog-inner').style.width = pct;\r\n document.getElementById('vid-prog-bar').style.width = pct;\r\n var t = formatTime(secs) + ' \/ 8:45';\r\n document.getElementById('vid-time-disp').textContent = t;\r\n document.getElementById('vid-time-ctrl').textContent = t;\r\n updateRet('video', 1);\r\n if (vidProgress >= 1) { clearInterval(vidInterval); isPlaying = false; }\r\n }, 150);\r\n } else {\r\n clearInterval(vidInterval); isPlaying = false;\r\n document.getElementById('play-ctrl').textContent = '\u25b6';\r\n addEvt('pause', 'V\u00eddeo pausado em ' + document.getElementById('vid-time-ctrl').textContent.split('\/')[0].trim());\r\n }\r\n}\r\n\r\nfunction replayVid() {\r\n vidProgress = Math.max(0, vidProgress - 0.08);\r\n addEvt('replay', 'Replay \u2014 ' + formatTime(Math.floor(vidProgress * 525)));\r\n}\r\n\r\nfunction seekVid(e) {\r\n var pct = e.offsetX \/ e.currentTarget.offsetWidth;\r\n vidProgress = pct;\r\n document.getElementById('vid-prog-bar').style.width = (pct*100) + '%';\r\n document.getElementById('vid-prog-inner').style.width = (pct*100) + '%';\r\n var t = formatTime(Math.floor(pct*525)) + ' \/ 8:45';\r\n document.getElementById('vid-time-disp').textContent = t;\r\n document.getElementById('vid-time-ctrl').textContent = t;\r\n}\r\n\r\nfunction formatTime(s) {\r\n return Math.floor(s\/60) + ':' + (s%60 < 10 ? '0' : '') + (s%60);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 FORMAT SWITCH \u2550\u2550\u2550 *\/\r\nfunction switchFmt(fmt) {\r\n ['video','text','h5p'].forEach(function(f) {\r\n document.getElementById('fc-' + f).style.display = 'none';\r\n document.getElementById('fb-' + f).classList.remove('active');\r\n });\r\n document.getElementById('fc-' + fmt).style.display = 'block';\r\n document.getElementById('fb-' + fmt).classList.add('active');\r\n var labels = {video:'v\u00eddeo', text:'texto \/ leitura', h5p:'H5P interativo'};\r\n document.getElementById('adaptive-badge').textContent = 'formato adaptado: ' + labels[fmt];\r\n addEvt(fmt, 'Trocou para ' + labels[fmt]);\r\n updateRet(fmt, 3);\r\n showToast('Formato registrado no perfil.');\r\n if (fmt !== 'video' && isPlaying) { clearInterval(vidInterval); isPlaying = false; document.getElementById('play-ctrl').textContent = '\u25b6'; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 RETENTION UPDATE \u2550\u2550\u2550 *\/\r\nvar retValues = {video: 78, h5p: 65, text: 42};\r\nvar retUpdateCount = {video: 0, h5p: 0, text: 0};\r\n\r\nfunction updateRet(fmt, delta) {\r\n retUpdateCount[fmt]++;\r\n if (retUpdateCount[fmt] % 5 !== 0 && delta < 2) return;\r\n retValues[fmt] = Math.min(99, retValues[fmt] + delta);\r\n var fill = document.getElementById('ret-' + fmt);\r\n var pct = document.getElementById('ret-' + fmt + '-pct');\r\n if (fill && pct) {\r\n fill.style.width = retValues[fmt] + '%';\r\n pct.textContent = retValues[fmt] + '%';\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550 EVENTS FEED \u2550\u2550\u2550 *\/\r\nvar evtColors = {play:'#4ade80', pause:'#5a5a70', replay:'#f97316', video:'#9d78ff', text:'#2dd4bf', h5p:'#f97316', quiz:'#9d78ff'};\r\nfunction addEvt(type, text) {\r\n var feed = document.getElementById('event-feed');\r\n if (!feed) return;\r\n var div = document.createElement('div');\r\n div.className = 'event-item';\r\n div.innerHTML = '<div class=\"event-dot\" style=\"background:' + (evtColors[type]||'#9d78ff') + '\"><\/div><div><div>' + text + '<\/div><div style=\"color:#3a3a50;font-size:9px\">agora<\/div><\/div>';\r\n feed.insertBefore(div, feed.firstChild);\r\n if (feed.children.length > 6) feed.removeChild(feed.lastChild);\r\n}\r\n\r\n\/* \u2550\u2550\u2550 QUIZ \u2550\u2550\u2550 *\/\r\nvar selOpted = null;\r\nfunction selOpt(el, letter) {\r\n document.querySelectorAll('.quiz-opt').forEach(o => o.classList.remove('sel'));\r\n el.classList.add('sel');\r\n selOpted = el;\r\n}\r\nfunction checkQuiz() {\r\n if (!selOpted) { showToast('Selecione uma op\u00e7\u00e3o primeiro.'); return; }\r\n var ok = selOpted.dataset.ok === 'true';\r\n document.querySelectorAll('.quiz-opt').forEach(o => { if (o.dataset.ok === 'true') o.classList.add('correct'); });\r\n if (!ok) { selOpted.classList.add('wrong'); selOpted.classList.remove('sel'); }\r\n var fb = document.getElementById('quiz-fb');\r\n fb.className = 'quiz-fb show ' + (ok ? 'ok' : 'err');\r\n fb.textContent = ok ? 'Correto! O Node delega o I\/O ao sistema operacional via libuv e registra um callback.' : 'N\u00e3o exatamente. O Node n\u00e3o bloqueia \u2014 delega o I\/O e continua processando. Resposta: B.';\r\n document.getElementById('quiz-actions').innerHTML = '<button class=\"quiz-action-btn\" onclick=\"showToast(\\'Quiz conclu\u00eddo! Perfil atualizado.\\');addEvt(\\'quiz\\',\\'' + (ok ? 'Quiz: resposta correta \u2713' : 'Quiz: resposta incorreta \u2014 refor\u00e7o recomendado') + '\\');updateRet(\\'h5p\\',' + (ok ? '4' : '-2') + ')\">Pr\u00f3xima \u2192<\/button>';\r\n addEvt('quiz', ok ? 'Quiz: resposta correta \u2713' : 'Quiz: resposta incorreta');\r\n}\r\n\r\n\/* \u2550\u2550\u2550 PROFESSOR TABS \u2550\u2550\u2550 *\/\r\nfunction showPTab(id, btn) {\r\n document.querySelectorAll('.p-panel').forEach(p => p.classList.remove('active'));\r\n document.querySelectorAll('.p-tab').forEach(t => t.classList.remove('active'));\r\n document.getElementById('p-' + id).classList.add('active');\r\n btn.classList.add('active');\r\n}\r\n\r\n\/* \u2550\u2550\u2550 DRAWER \u2550\u2550\u2550 *\/\r\nvar avatarColors = {Jo\u00e3o:'#6c63ff', Ana:'#9d78ff', Pedro:'#f97316', Mariana:'#15803d', Carlos:'#2dd4bf', Julia:'#be123c', Rafael:'#334155', Beatriz:'#2563c4'};\r\nfunction openDrawer(name, proj, fmt, ret, interp) {\r\n var initials = name.split(' ').map(n => n[0]).join('').slice(0,2);\r\n document.getElementById('drawer-avatar').textContent = initials;\r\n document.getElementById('drawer-avatar').style.background = avatarColors[name] || '#6c63ff';\r\n document.getElementById('drawer-name').textContent = name;\r\n document.getElementById('drawer-proj').textContent = proj + ' \u00b7 formato: ' + fmt + ' \u00b7 reten\u00e7\u00e3o: ' + ret + '%';\r\n document.getElementById('drawer-interp').textContent = interp;\r\n document.getElementById('drawer-overlay').classList.add('open');\r\n}\r\nfunction closeDrawer() { document.getElementById('drawer-overlay').classList.remove('open'); }\r\n\r\n\/* \u2550\u2550\u2550 FORMULA MODAL \u2550\u2550\u2550 *\/\r\nfunction openModal() { document.getElementById('formula-modal').classList.add('open'); }\r\nfunction closeModal() { document.getElementById('formula-modal').classList.remove('open'); }\r\n\r\n\/* \u2550\u2550\u2550 TOAST \u2550\u2550\u2550 *\/\r\nvar toastTimeout;\r\nfunction showToast(msg) {\r\n var t = document.getElementById('toast');\r\n t.textContent = msg;\r\n t.classList.add('show');\r\n clearTimeout(toastTimeout);\r\n toastTimeout = setTimeout(function() { t.classList.remove('show'); }, 2800);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DevFullStack \u2014 Plataforma Adaptativa DevFullStack Arquitetura Vis\u00e3o do Aluno Dashboard do Professor Desafio T\u00e9cnico \u00b7 V1 \u00b7 2025 Processo Seletivo \u00b7 Etapa 2 Desafio T\u00e9cnicoDevFullStack Proposta de nova arquitetura para uma plataforma de e-learning baseada em aprendizado por projetos, com gera\u00e7\u00e3o de cursos personalizados via IA e camada adaptativa de conte\u00fado. Novo fluxo com IA […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-554","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=554"}],"version-history":[{"count":4,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/554\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/554\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}