.demo-root:where(.astro-tb5vpudz){--card-bg: var(--sl-color-gray-5);--card-border: var(--sl-color-gray-4);--text: var(--sl-color-white);--text-muted: var(--sl-color-gray-2);--accent: var(--sl-color-accent);--tag-bg: var(--sl-color-gray-4);--tag-color: var(--sl-color-accent);--badge-bg: #f7768e}.controls:where(.astro-tb5vpudz){background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:20px;margin-bottom:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.control-row:where(.astro-tb5vpudz){display:flex;align-items:center;gap:12px}.control-group:where(.astro-tb5vpudz){display:flex;flex-direction:column;gap:8px}.control-group:where(.astro-tb5vpudz) label:where(.astro-tb5vpudz){font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600}.control-group:where(.astro-tb5vpudz) label:where(.astro-tb5vpudz) span:where(.astro-tb5vpudz){color:var(--accent);font-family:monospace}.toggle-btn:where(.astro-tb5vpudz){display:flex;align-items:center;gap:10px;background:var(--card-border);border:none;border-radius:24px;padding:8px 20px 8px 8px;cursor:pointer;color:var(--text);font-size:14px;font-family:inherit;transition:background .2s}.toggle-dot:where(.astro-tb5vpudz){width:28px;height:28px;border-radius:50%;background:var(--text-muted);transition:background .2s}.toggle-btn:where(.astro-tb5vpudz).loading .toggle-dot:where(.astro-tb5vpudz){background:var(--accent);box-shadow:0 0 12px #7aa2f780}.color-swatches:where(.astro-tb5vpudz){display:flex;gap:6px}.swatch:where(.astro-tb5vpudz){width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s;opacity:.6;padding:0}.swatch:where(.astro-tb5vpudz):hover{opacity:.9;transform:scale(1.1)}.swatch:where(.astro-tb5vpudz).active{border-color:var(--text);opacity:1;transform:scale(1.15)}input:where(.astro-tb5vpudz)[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--card-border);outline:none;width:140px}input:where(.astro-tb5vpudz)[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}.demo-grid:where(.astro-tb5vpudz){display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.card:where(.astro-tb5vpudz){background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:20px;color:var(--text)}.card-header:where(.astro-tb5vpudz){display:flex;align-items:center;gap:12px;margin-bottom:14px}.avatar:where(.astro-tb5vpudz){width:48px;height:48px;border-radius:50%;background:var(--card-border);object-fit:cover;flex-shrink:0}.avatar-sm:where(.astro-tb5vpudz){width:32px;height:32px;border-radius:50%;background:var(--card-border);flex-shrink:0}.card-header:where(.astro-tb5vpudz) h3:where(.astro-tb5vpudz){margin:0 0 2px;font-size:15px}.subtitle:where(.astro-tb5vpudz){margin:0;font-size:12px;color:var(--text-muted)}.body:where(.astro-tb5vpudz){font-size:13px;line-height:1.6;color:var(--text-muted);margin:0 0 8px}.tags:where(.astro-tb5vpudz){display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}.tag:where(.astro-tb5vpudz){background:var(--tag-bg);padding:3px 10px;border-radius:10px;font-size:11px;color:var(--tag-color)}.stats-row:where(.astro-tb5vpudz){display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.stat:where(.astro-tb5vpudz){background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:16px;text-align:center;color:var(--text)}.stat-value:where(.astro-tb5vpudz){font-size:22px;font-weight:700}.stat-label:where(.astro-tb5vpudz){font-size:10px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}.list-item:where(.astro-tb5vpudz){display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--card-border)}.list-item:where(.astro-tb5vpudz):last-child{border-bottom:none}.list-text:where(.astro-tb5vpudz){flex:1}.list-text:where(.astro-tb5vpudz) strong:where(.astro-tb5vpudz){display:block;font-size:13px;margin-bottom:2px}.list-text:where(.astro-tb5vpudz) span:where(.astro-tb5vpudz){font-size:11px;color:var(--text-muted)}.badge:where(.astro-tb5vpudz){background:var(--badge-bg);color:#fff;border-radius:8px;padding:2px 8px;font-size:10px;font-weight:600}.article-cover:where(.astro-tb5vpudz){width:100%;height:120px;background:var(--card-border);border-radius:8px;margin-bottom:12px}.article:where(.astro-tb5vpudz) h3:where(.astro-tb5vpudz){font-size:16px;margin:0 0 4px}.meta:where(.astro-tb5vpudz){font-size:11px;color:var(--text-muted);margin:0 0 8px}.pricing:where(.astro-tb5vpudz){background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:24px;text-align:center;color:var(--text)}.plan:where(.astro-tb5vpudz){font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.price:where(.astro-tb5vpudz){font-size:32px;font-weight:700;margin:6px 0}.price:where(.astro-tb5vpudz) span:where(.astro-tb5vpudz){font-size:13px;font-weight:400;color:var(--text-muted)}.pricing:where(.astro-tb5vpudz) ul:where(.astro-tb5vpudz){list-style:none;text-align:left;margin:14px 0;padding:0}.pricing:where(.astro-tb5vpudz) li:where(.astro-tb5vpudz){font-size:12px;padding:5px 0;color:var(--text-muted);border-bottom:1px solid var(--card-border)}.pricing:where(.astro-tb5vpudz) li:where(.astro-tb5vpudz):last-child{border-bottom:none}.cta:where(.astro-tb5vpudz){background:var(--accent);color:var(--card-bg);border:none;border-radius:8px;padding:10px 32px;font-size:13px;cursor:pointer;width:100%;margin-top:8px;font-weight:600}.comment:where(.astro-tb5vpudz){display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--card-border)}.comment:where(.astro-tb5vpudz):last-child{border-bottom:none}.comment-body:where(.astro-tb5vpudz){flex:1}.comment-body:where(.astro-tb5vpudz) strong:where(.astro-tb5vpudz){font-size:13px}.time:where(.astro-tb5vpudz){font-size:10px;color:var(--text-muted);margin-left:6px}.comment-body:where(.astro-tb5vpudz) p:where(.astro-tb5vpudz){font-size:12px;line-height:1.5;margin:4px 0 0;color:var(--text-muted)}