.demo-modal-backdrop{z-index:9999;background:#000000d9;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.demo-modal-card{aspect-ratio:16/9;background:#0f0f1a;border:1px solid #dbe2fd1f;border-radius:16px;width:100%;max-width:960px;position:relative;overflow:hidden;box-shadow:0 32px 80px #000c}.demo-modal-close{z-index:20;color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s;display:flex;position:absolute;top:12px;right:12px}.demo-modal-close:hover{background:#fff3}.demo-modal-recording{flex-direction:column;width:100%;height:100%;display:flex}.demo-modal-iframe-wrap{flex:1;min-height:0;position:relative}.demo-modal-hint{z-index:15;color:#ffffffe6;text-align:center;pointer-events:none;background:#0f0f1aeb;border:1px solid #dbe2fd29;border-radius:999px;align-items:center;gap:8px;max-width:min(84%,560px);padding:8px 16px;font-family:Space Grotesk,sans-serif;font-size:12.5px;line-height:1.35;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 10px 28px #00000073}.demo-modal-hint strong{color:#eec202;font-weight:700}.demo-modal-hint-dot{background:#ff3c3c;border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:1.2s ease-in-out infinite rrweb-pulse}.demo-modal-iframe{border:none;width:100%;height:100%;display:block}.demo-modal-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0000008c;border-top:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.demo-modal-rec-indicator{align-items:center;gap:8px;display:flex}.demo-modal-rec-dot{background:#ff3c3c;border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:1.2s ease-in-out infinite rrweb-pulse}.demo-modal-rec-label{color:#ffffffb3;letter-spacing:.05em;text-transform:uppercase;font-family:Space Grotesk,sans-serif;font-size:12px;font-weight:600}.demo-modal-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff26;border-radius:8px;align-items:center;gap:6px;padding:6px 14px;font-family:Space Grotesk,sans-serif;font-size:12px;font-weight:600;transition:background .15s;display:flex}.demo-modal-btn:hover{background:#ffffff2e}.demo-modal-btn--stop{color:#0f0f1a;background:#eec202;border-color:#eec202;animation:1.8s ease-in-out infinite demo-stop-attention}.demo-modal-btn--stop:hover{background:#f5cf2e}@keyframes demo-stop-attention{0%,to{box-shadow:0 0 #eec20280}50%{box-shadow:0 0 0 6px #eec20200}}@media (prefers-reduced-motion:reduce){.demo-modal-btn--stop{animation:none}}.demo-modal-player{width:100%;height:100%;position:absolute;inset:0}.demo-modal-record-again{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;background:#0009;border:1px solid #ffffff26;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-family:Space Grotesk,sans-serif;font-size:11px;font-weight:600;transition:background .15s;display:flex;position:absolute;top:12px;left:12px}.demo-modal-record-again:hover{background:#000c}@keyframes rrweb-pulse{0%,to{opacity:1;box-shadow:0 0 #ff3c3c99}50%{opacity:.7;box-shadow:0 0 0 5px #ff3c3c00}}.demo-modal-player .rr-player,.demo-modal-player [class*=rr-player]{float:none!important;background:#0f0f1a!important;flex-direction:column!important;justify-content:flex-end!important;width:100%!important;height:100%!important;display:flex!important;position:absolute!important;inset:0!important;overflow:hidden!important}.demo-modal-player .rr-player__frame,.demo-modal-player [class*=rr-player__frame]{flex:1!important;width:100%!important;min-height:0!important;overflow:hidden!important}.demo-modal-player .replayer-wrapper{float:none!important;margin:0 auto!important;position:relative!important;top:0!important;left:0!important;transform:none!important}.demo-modal-player .rr-controller,.demo-modal-player [class*=rr-controller]{-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;background:#0000008c!important;border-top:1px solid #ffffff0f!important}.demo-modal-player .rr-timeline,.demo-modal-player [class*=rr-timeline]{background:0 0!important;border-radius:4px!important}.demo-modal-player .rr-progress.handler{background:#f5c542!important}.demo-modal-player .rr-controller button,.demo-modal-player [class*=rr-controller] button{color:#ffffffb3!important;background:#0f0f1a!important;border:1px solid #dbe2fd1f!important;border-radius:6px!important;padding:4px 8px!important}.demo-modal-player .rr-controller button:hover,.demo-modal-player [class*=rr-controller] button:hover{color:#fff!important;background:#1a1a2e!important}.demo-modal-player .rr-controller svg,.demo-modal-player [class*=rr-controller] svg{fill:#fff!important}.demo-modal-player .rr-controller span,.demo-modal-player [class*=rr-controller] span{color:#ffffff80!important;font-family:Space Grotesk,sans-serif!important}@media (width<=768px){.demo-modal-card{aspect-ratio:auto;border-radius:10px;max-width:95vw;height:95vh}}
