html`
<div class="quick-ref-card" style="background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); color: white; padding: 20px; border-radius: 12px; margin: 15px 0;">
<h3 class="depth-l0" style="margin-top: 0; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 10px;">Bluetooth Low Energy</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
<div>
<h4 class="depth-l0" style="margin: 10px 0 5px 0; color: #F1C40F;">Specifications</h4>
<pre style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; font-size: 12px; margin: 0;">
Frequency: 2.4 GHz (40 channels)
Range: 10-100m typical
Data rate: 125kbps - 2Mbps
MTU: 20 bytes (default), 512 max</pre>
</div>
<div>
<h4 class="depth-l0" style="margin: 10px 0 5px 0; color: #F1C40F;">GATT Structure</h4>
<pre style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; font-size: 12px; margin: 0;">
Profile -> Service -> Characteristic
Service UUID: 16-bit or 128-bit
Characteristic: Read/Write/Notify</pre>
</div>
<div>
<h4 class="depth-l0" style="margin: 10px 0 5px 0; color: #F1C40F;">Common UUIDs</h4>
<pre style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; font-size: 12px; margin: 0;">
0x180F - Battery Service
0x2A19 - Battery Level
0x180A - Device Info
0x1801 - Generic Attribute</pre>
</div>
<div>
<h4 class="depth-l0" style="margin: 10px 0 5px 0; color: #F1C40F;">Roles</h4>
<pre style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; font-size: 12px; margin: 0;">
Central: Scans, initiates connection
Peripheral: Advertises, accepts conn
Server: Has GATT database
Client: Reads/writes characteristics</pre>
</div>
</div>
<div style="margin-top: 15px; font-size: 12px; opacity: 0.9;">
<strong>Power Tip:</strong> Use notifications instead of polling, keep connection intervals long
</div>
</div>
`