Layout and UI Structure

This part controls the layout of the demo, including the tabs, cards, query boxes, and Q&A section.

<div class="sd-tabs">
  <button class="sd-tab active" data-tab="bypass">01 - Login bypass</button>
  <button class="sd-tab" data-tab="union">02 - UNION example</button>
  <button class="sd-tab" data-tab="defense">03 - Defense</button>
</div>

<div class="sd-panel active" id="sd-panel-bypass">
  <div class="sd-shell">...</div>
</div>

.sd-shell {
  padding: 28px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

.sd-faq-item {
  border: 1px solid rgba(96,165,250,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}