.concept-grid,.compare-grid,.security-grid,.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}.concept-grid article,.compare-grid article,.security-grid article,.project-grid article{min-width:0;padding:19px;border:1px solid #c8d8e8;border-radius:14px;background:#f5f9fd}.concept-grid span,.compare-grid span,.security-grid span,.project-grid span{color:#8a6500;font-size:.72rem;font-weight:950;letter-spacing:.08em}.concept-grid h3,.compare-grid h3,.security-grid h3,.project-grid h3{margin:8px 0;color:#104678}.concept-grid p,.compare-grid p,.security-grid p,.project-grid p{color:#526d87;line-height:1.6}.formula-strip{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;padding:17px;border-radius:14px;background:#071b32;color:#d9e9f6}.formula-strip code{padding:8px 11px;border:1px solid #315979;border-radius:8px;color:#8ce7f3}.advanced-lab{margin-top:24px;overflow:hidden;border:1px solid #285272;border-radius:18px;background:#071b32;color:white}.lab-controls{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;gap:11px;align-items:end;padding:19px;background:#0c2b49}.lab-controls label{display:block;color:#72dfef;font-size:.7rem;font-weight:950;letter-spacing:.07em}.lab-controls input,.lab-controls select,.lab-controls textarea{width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #436987;border-radius:8px;background:#102f4d;color:white;font:inherit}.lab-controls textarea{min-height:43px;resize:vertical}.lab-controls button,.trace-controls button{min-height:43px;padding:10px 16px;border:1px solid #f1be2d;border-radius:9px;background:#f1be2d;color:#10243a;font:inherit;font-weight:950;cursor:pointer}.lab-output{padding:21px}.lab-summary{padding:16px;border:1px solid #345b79;border-radius:12px;background:#0d2b48}.lab-summary span{color:#70ddec;font-size:.7rem;font-weight:950;letter-spacing:.08em}.lab-summary h3{margin:7px 0}.lab-summary p{margin:0;color:#c6d9e8;line-height:1.6}.visual-row{display:flex;gap:8px;overflow-x:auto;margin-top:16px;padding-bottom:6px}.visual-cell{display:grid;flex:0 0 74px;min-height:62px;place-items:center;padding:8px;border:1px solid #3c6483;border-radius:9px;background:#10304d;color:#dceaf5;text-align:center}.visual-cell strong{color:#ffe173}.visual-cell.hit{border-color:#2ca67d;background:#0d3a35}.visual-cell.fault,.visual-cell.alert{border-color:#cf6658;background:#402522}.trace-table-wrap{overflow:auto;margin-top:16px}.trace-table{width:100%;min-width:620px;border-collapse:collapse}.trace-table th,.trace-table td{padding:10px;border:1px solid #315675;text-align:center}.trace-table th{background:#10314f;color:#8de6f1;font-size:.73rem}.trace-table td{color:#d8e6f1}.trace-runner{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:16px;margin-top:22px}.trace-controls{display:grid;align-content:start;gap:9px;padding:18px;border-radius:14px;background:#eef5fc}.trace-controls button.secondary{border-color:#9eb9d5;background:white;color:#145ba7}.trace-stage{min-height:255px;padding:23px;border-radius:14px;background:#071b32;color:white}.trace-stage>span{color:#69ddeb;font-size:.72rem;font-weight:950;letter-spacing:.08em}.trace-stage h3{margin:10px 0}.trace-stage p{color:#c6d9e8;line-height:1.65}.trace-progress{display:flex;gap:6px;margin-top:18px}.trace-progress i{height:7px;flex:1;border-radius:99px;background:#294c68}.trace-progress i.done{background:#f1be2d}.code-example{position:relative;overflow:auto;margin-top:18px;padding:20px;border-radius:14px;background:#071b32;color:#d9e9f5;font:500 .88rem/1.7 monospace;white-space:pre}.code-example .comment{color:#7fc293}.decision-table{width:100%;margin-top:20px;border-collapse:collapse}.decision-table th,.decision-table td{padding:12px;border:1px solid #cbd9e8;text-align:left}.decision-table th{background:#0b3154;color:white}.decision-table tr:nth-child(even){background:#f5f9fd}.risk-note{margin-top:18px;padding:16px;border-left:5px solid #df9c1d;border-radius:8px;background:#fff5d7;color:#5e4a18}.success-note{margin-top:18px;padding:16px;border-left:5px solid #249b71;border-radius:8px;background:#eaf8f2;color:#175b45}.roadmap-list{display:grid;gap:10px;margin-top:18px}.roadmap-list article{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;padding:15px;border:1px solid #cad9e8;border-radius:12px;background:#f7faff}.roadmap-list b{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#0d3761;color:#fff}.roadmap-list h3{margin:0 0 5px}.roadmap-list p{margin:0;color:#56708a;line-height:1.55}.project-card.selected{border-color:#1c69da;box-shadow:0 0 0 3px rgba(28,105,218,.12)}
@media(max-width:900px){.concept-grid,.compare-grid,.security-grid,.project-grid{grid-template-columns:1fr 1fr}.lab-controls{grid-template-columns:1fr 1fr}.trace-runner{grid-template-columns:1fr}}
@media(max-width:560px){.concept-grid,.compare-grid,.security-grid,.project-grid,.lab-controls{grid-template-columns:1fr}.lab-output{padding:16px 13px}.code-example{font-size:.78rem}.visual-cell{flex-basis:64px}.roadmap-list article{grid-template-columns:1fr}.decision-table{display:block;overflow-x:auto}}
.project-card{cursor:pointer}.project-card:focus-visible{outline:3px solid #f1be2d;outline-offset:3px}