.interactive-demo:where(.astro-e5c4uuyz){margin:2rem 0;border-radius:12px;overflow:hidden;background:var(--sl-color-bg-nav, #1e293b);border:1px solid var(--sl-color-hairline, #334155);box-shadow:0 10px 25px -5px #0000004d}.demo-player:where(.astro-e5c4uuyz){display:flex;flex-direction:column}.demo-viewport:where(.astro-e5c4uuyz){position:relative;width:100%;background:#0f172a;overflow:visible;user-select:none;display:grid;grid-template-columns:1fr}.demo-slide:where(.astro-e5c4uuyz){grid-area:1 / 1;align-self:start;position:relative;display:flex;justify-content:center;align-items:flex-start;opacity:0;pointer-events:none;transition:opacity .3s ease}.demo-slide:where(.astro-e5c4uuyz).active{opacity:1;pointer-events:auto}.demo-image-wrapper:where(.astro-e5c4uuyz){position:relative;display:inline-flex;line-height:0}.demo-media:where(.astro-e5c4uuyz){display:block;max-width:100%;max-height:580px;width:auto;height:auto;object-fit:contain;border-radius:0}.demo-hotspot:where(.astro-e5c4uuyz){position:absolute;border:2px solid #22c55e;background:#22c55e26;border-radius:8px;cursor:pointer;z-index:10;padding:0;outline:none;transition:transform .2s ease,background-color .2s ease}.demo-hotspot:where(.astro-e5c4uuyz):hover{background:#22c55e4d;transform:scale(1.02)}.hotspot-ring:where(.astro-e5c4uuyz){position:absolute;inset:-6px;border:2px solid #22c55e;border-radius:12px;animation:hotspot-pulse 2s infinite;pointer-events:none}.hotspot-ring:where(.astro-e5c4uuyz).ring-2{animation-delay:.6s}.hotspot-dot:where(.astro-e5c4uuyz){position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#22c55e;border-radius:50%;box-shadow:0 0 10px #22c55e}@keyframes hotspot-pulse{0%{transform:scale(.95);opacity:.8}to{transform:scale(1.3);opacity:0}}.demo-tooltip:where(.astro-e5c4uuyz){position:absolute;z-index:20;background:#fff;color:#0f172a;padding:.875rem 1rem;border-radius:10px;box-shadow:0 20px 25px -5px #0006,0 8px 10px -6px #0000004d;max-width:280px;min-width:180px;display:flex;gap:.75rem;align-items:flex-start;animation:tooltip-fade-in .3s ease;pointer-events:none;max-height:calc(100% - 16px);overflow-y:auto}.demo-controls:where(.astro-e5c4uuyz){position:relative;z-index:30}:root[data-theme=dark] .demo-tooltip:where(.astro-e5c4uuyz){background:#1e293b;color:#f8fafc;border:1px solid #334155}.tooltip-step:where(.astro-e5c4uuyz){background:#0284c7;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}.tooltip-content:where(.astro-e5c4uuyz) strong:where(.astro-e5c4uuyz){display:block;font-size:.95rem;margin-bottom:.25rem;line-height:1.3;overflow:hidden;white-space:normal}.tooltip-content:where(.astro-e5c4uuyz) p:where(.astro-e5c4uuyz){margin:0;font-size:.85rem;line-height:1.35;opacity:.9}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.demo-completed:where(.astro-e5c4uuyz){position:absolute;inset:0;background:#0f172aeb;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;opacity:0;pointer-events:none;transition:opacity .3s ease}.demo-completed:where(.astro-e5c4uuyz).active{opacity:1;pointer-events:auto}.demo-completed:where(.astro-e5c4uuyz).active~.demo-slide:where(.astro-e5c4uuyz) .demo-tooltip:where(.astro-e5c4uuyz),.demo-completed:where(.astro-e5c4uuyz).active~.demo-slide:where(.astro-e5c4uuyz) .demo-hotspot:where(.astro-e5c4uuyz){opacity:0!important;pointer-events:none!important}.completed-content:where(.astro-e5c4uuyz){text-align:center;color:#fff!important;display:flex;flex-direction:column;align-items:center;gap:.75rem}.completed-content:where(.astro-e5c4uuyz) h3:where(.astro-e5c4uuyz){color:#fff!important;margin:0}.completed-icon:where(.astro-e5c4uuyz){width:48px;height:48px;color:#22c55e;display:block;margin:0;flex-shrink:0}.demo-restart-btn:where(.astro-e5c4uuyz){margin-top:1rem;padding:.6rem 1.5rem;background:#0284c7;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background-color .2s}.demo-restart-btn:where(.astro-e5c4uuyz):hover{background:#0369a1}.demo-controls:where(.astro-e5c4uuyz){display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.75rem 1rem;background:var(--sl-color-bg-nav, #1e293b);border-top:1px solid var(--sl-color-hairline, #334155);position:relative;z-index:30}.demo-btn:where(.astro-e5c4uuyz){padding:.4rem 1rem;background:var(--sl-color-bg, #0f172a);color:var(--sl-color-text, #f8fafc);border:1px solid var(--sl-color-hairline, #334155);border-radius:6px;cursor:pointer;font-size:.85rem;transition:background-color .2s,opacity .2s;flex-shrink:0;align-self:center}.demo-btn:where(.astro-e5c4uuyz):hover:not(:disabled){background:var(--sl-color-bg-accent, #0284c7);color:#fff}.demo-btn:where(.astro-e5c4uuyz):disabled{color:var(--sl-color-text-muted, #94a3b8);border-color:var(--sl-color-hairline, #334155);cursor:not-allowed}.demo-center-block:where(.astro-e5c4uuyz){display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:1}.demo-progress:where(.astro-e5c4uuyz){display:flex;gap:.5rem;justify-content:center;align-items:center}.demo-dot:where(.astro-e5c4uuyz){-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:var(--sl-color-hairline, #475569);border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:background-color .2s,box-shadow .2s;flex-shrink:0;box-sizing:border-box;display:flex}.demo-dot:where(.astro-e5c4uuyz).active{background:#0284c7;box-shadow:0 0 0 2px #0284c766}.demo-prev:where(.astro-e5c4uuyz){justify-self:start;margin-top:12px}.demo-next:where(.astro-e5c4uuyz){justify-self:end}.demo-counter:where(.astro-e5c4uuyz){font-size:.8rem;color:var(--sl-color-text-muted, #94a3b8);text-align:center}