.device-frame{flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.device-frame__body{flex-direction:column;display:flex;position:relative}.device-frame__screen{background:#fff;position:relative;overflow:hidden}.device-frame__label{color:#374151;white-space:nowrap;align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex;position:absolute;bottom:-32px;left:50%;transform:translate(-50%)}.device-iphone{--frame-bg:#1a1a1a;--frame-border:#333;--notch-width:120px;--notch-height:28px;--home-indicator-width:134px;--home-indicator-height:5px;--border-radius:44px;--screen-radius:32px;--padding:12px}.device-iphone .device-frame__body{background:var(--frame-bg);border-radius:var(--border-radius);padding:var(--padding);box-shadow:0 0 0 3px var(--frame-border),0 20px 40px #0000004d,inset 0 0 0 1px #ffffff0d}.device-iphone .device-frame__notch{width:var(--notch-width);height:var(--notch-height);background:var(--frame-bg);z-index:10;border-radius:0 0 16px 16px;margin:0 auto;position:relative}.device-iphone .device-frame__notch:before{content:"";background:#333;border-radius:50%;width:8px;height:8px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.device-iphone .device-frame__screen{border-radius:var(--screen-radius);width:375px;height:812px;margin-top:-16px}.device-iphone .device-frame__home-indicator{width:var(--home-indicator-width);height:var(--home-indicator-height);background:var(--frame-border);border-radius:3px;margin:8px auto 4px}.device-ipad{--frame-bg:#1a1a1a;--frame-border:#333;--border-radius:32px;--screen-radius:8px;--padding:16px;--bezel-width:40px}.device-ipad .device-frame__body{background:var(--frame-bg);border-radius:var(--border-radius);padding:var(--padding);box-shadow:0 0 0 2px var(--frame-border),0 20px 40px #00000040,inset 0 0 0 1px #ffffff0d}.device-ipad .device-frame__screen{border-radius:var(--screen-radius);width:768px;height:1024px}.device-ipad .device-frame__camera{z-index:10;background:#333;border-radius:50%;width:10px;height:10px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.device-laptop{--frame-bg:#1a1a1a;--frame-border:#333;--bezel-top:24px;--bezel-side:16px;--bezel-bottom:20px;--screen-radius:4px;--lid-radius:12px;--base-height:16px}.device-laptop .device-frame__body{flex-direction:column;align-items:center;display:flex}.device-laptop .device-frame__lid{background:var(--frame-bg);border-radius:var(--lid-radius)var(--lid-radius)0 0;padding:var(--bezel-top)var(--bezel-side)var(--bezel-bottom);box-shadow:0 0 0 2px var(--frame-border),0 -4px 12px #00000026,inset 0 0 0 1px #ffffff0d;position:relative}.device-laptop .device-frame__lid:before{content:"";background:#333;border-radius:50%;width:6px;height:6px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.device-laptop .device-frame__screen{border-radius:var(--screen-radius);width:1280px;height:800px}.device-laptop .device-frame__base{width:1376px;height:var(--base-height);background:linear-gradient(180deg,#2a2a2a 0%,var(--frame-bg)100%);box-shadow:0 0 0 2px var(--frame-border),0 4px 12px #0003;border-radius:0 0 6px 6px;position:relative}.device-laptop .device-frame__base:before{content:"";background:#333;border-radius:0 0 2px 2px;width:80px;height:4px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.device-frame--highlighted{position:relative}.device-frame--highlighted:before{content:"";z-index:-1;background:linear-gradient(135deg,#10b98133 0%,#10b9811a 100%);border-radius:52px;animation:2s ease-in-out infinite highlight-pulse;position:absolute;inset:-8px}.device-frame--highlighted:after{content:"";z-index:-1;border:2px solid #10b98199;border-radius:48px;animation:2s ease-in-out infinite highlight-glow;position:absolute;inset:-4px}@keyframes highlight-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}@keyframes highlight-glow{0%,to{opacity:.6;box-shadow:0 0 12px #10b9814d}50%{opacity:1;box-shadow:0 0 24px #10b98180}}.device-frame--accent-green .device-frame__label{color:#10b981}.device-frame--accent-blue .device-frame__label{color:#3b82f6}.device-frame--accent-purple .device-frame__label{color:#8b5cf6}.device-frame--accent-orange .device-frame__label{color:#f97316}.device-frame__loading{background:#f9fafb;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.device-frame__loading-spinner{border:3px solid #e5e7eb;border-top-color:#10b981;border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}.device-frame__loading-text{color:#6b7280;font-size:14px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.device-frame__error{text-align:center;background:#fef2f2;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex;position:absolute;inset:0}.device-frame__error-icon{color:#ef4444;width:40px;height:40px}.device-frame__error-text{color:#991b1b;font-size:14px;font-weight:500}.device-frame__error-retry{color:#ef4444;cursor:pointer;background:#fff;border:1px solid #fecaca;border-radius:6px;margin-top:8px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s}.device-frame__error-retry:hover{background:#fff5f5;border-color:#ef4444}.demo-grid{width:100%;height:100%;transition:all .3s ease-in-out}.demo-grid--2x2{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);gap:1rem;min-height:0;padding:1rem;display:grid;overflow:auto}.demo-grid--1x4{scroll-snap-type:x mandatory;scroll-behavior:smooth;flex-direction:row;gap:1rem;padding:1rem;display:flex;overflow-x:auto}.demo-grid--1x4>*{scroll-snap-align:center;flex-shrink:0}.demo-grid--single{flex-direction:column;height:100%;display:flex}@keyframes step-enter{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes step-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}@keyframes step-highlight-enter{0%{transform:scale(1);box-shadow:0 0 #10b98100}50%{transform:scale(1.02);box-shadow:0 0 0 8px #10b98133}to{transform:scale(1);box-shadow:0 0 0 4px #10b9814d}}.device-frame__screen{transition:opacity .3s,transform .3s}.device-frame__screen--loading{opacity:.7;transform:scale(.99)}.device-frame__screen--ready{opacity:1;transform:scale(1)}.device-frame--highlighted{animation:.6s ease-out forwards step-highlight-enter;position:relative}.device-frame--highlighted.device-frame--accent-green:before{background:linear-gradient(135deg,#10b98140 0%,#10b9811a 100%)}.device-frame--highlighted.device-frame--accent-green:after{border-color:#10b981b3}.device-frame--highlighted.device-frame--accent-blue:before{background:linear-gradient(135deg,#3b82f640 0%,#3b82f61a 100%)}.device-frame--highlighted.device-frame--accent-blue:after{border-color:#3b82f6b3}.device-frame--highlighted.device-frame--accent-purple:before{background:linear-gradient(135deg,#8b5cf640 0%,#8b5cf61a 100%)}.device-frame--highlighted.device-frame--accent-purple:after{border-color:#8b5cf6b3}.device-frame--highlighted.device-frame--accent-orange:before{background:linear-gradient(135deg,#f9731640 0%,#f973161a 100%)}.device-frame--highlighted.device-frame--accent-orange:after{border-color:#f97316b3}@keyframes progress-step-complete{0%{background-color:#d1d5db;transform:scale(1)}50%{background-color:#10b981;transform:scale(1.3)}to{background-color:#10b981;transform:scale(1)}}@keyframes progress-connector-fill{0%{background:linear-gradient(90deg,#10b981 0%,#d1d5db 0%)}to{background:linear-gradient(90deg,#10b981 100%,#d1d5db 100%)}}.progress-step--completing{animation:.5s ease-out forwards progress-step-complete}.progress-connector--filling{animation:.4s ease-out forwards progress-connector-fill}@keyframes play-button-pulse{0%,to{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 8px #10b98100}}@keyframes pause-button-pulse{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 0 8px #f59e0b00}}.demo-control--playing{animation:2s ease-in-out infinite pause-button-pulse}.demo-control--ready{animation:2s ease-in-out infinite play-button-pulse}@keyframes tab-switch{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.demo-tab-content--entering{animation:.3s ease-out forwards tab-switch}@keyframes tab-notification-pulse{0%,to{background-color:#0000}50%{background-color:#10b9811a}}.demo-tab--notifying{animation:1s ease-in-out infinite tab-notification-pulse}@keyframes scenario-complete{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100%)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.scenario-complete-overlay{animation:.5s ease-out forwards scenario-complete}@keyframes settings-panel-enter{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes settings-panel-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.settings-panel--entering{animation:.3s ease-out forwards settings-panel-enter}.settings-panel--exiting{animation:.3s ease-in forwards settings-panel-exit}@media (prefers-reduced-motion:reduce){.device-frame,.device-frame__screen,.device-frame--highlighted,.demo-grid,.progress-step--completing,.progress-connector--filling,.demo-control--playing,.demo-control--ready,.demo-tab-content--entering,.demo-tab--notifying,.scenario-complete-overlay,.settings-panel--entering,.settings-panel--exiting{transition:none!important;animation:none!important}.device-frame--highlighted:before,.device-frame--highlighted:after{animation:none!important}}
/*# sourceMappingURL=bd3c5c2077412d41.css.map*/