.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px} .howto-card{border:2px solid var(--g2);padding:24px;background:var(--off);transition:border-color 0.2s} .howto-card:hover{border-color:var(--y)} .howto-card h3{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:var(--black);margin-bottom:12px;letter-spacing:1px} .howto-card .step{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px;color:var(--g5)} .howto-card .step .num{width:22px;height:22px;background:var(--y);color:var(--black);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0} .howto-card .icon{font-size:24px;margin-bottom:8px} .lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px} .lesson-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--white);border:1px solid var(--g2);font-size:11px;color:var(--g5);transition:all 0.2s;cursor:pointer} .lesson-item:hover{border-color:var(--y);color:var(--black)} .flow-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;padding:16px;border:2px solid var(--g2);background:var(--white);margin-bottom:20px} .flow-step{display:flex;align-items:center;gap:5px;padding:6px 12px;background:var(--off);border:1px solid var(--g2);font-size:11px;color:var(--g5)} .flow-step .dot{width:6px;height:6px;background:var(--y);border-radius:50%;flex-shrink:0} .flow-arrow{color:var(--g3);font-size:14px} @media(max-width:768px){.howto-grid{grid-template-columns:1fr}.lesson-grid{grid-template-columns:1fr}}
Mr. Q is CodexSigma's AI-native IDE. Retro precision, quantum reasoning, zero per-query cost. Your code. Your silicon. Your agent.