.example-player{margin:32px 0;display:flex;flex-direction:column;align-items:center}.example-player__header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;width:100%;text-align:center}.example-player__level{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:99px;font-size:.8rem;font-weight:700;letter-spacing:.05em;background:#79abc526;color:var(--primary-blue)}.example-player__title{font-size:1.1rem;font-weight:600;color:var(--text-white);margin:0}.example-player__mockup{position:relative;width:100%;max-width:480px;height:520px;background:#141a1f;border-radius:24px;border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 4px 24px #0006,0 0 0 1px #ffffff0a}.example-player__loading{display:flex;align-items:center;justify-content:center;height:100%}.example-player__loading-dots{display:flex;gap:8px}.example-player__loading-dots span{width:10px;height:10px;border-radius:50%;background:var(--text-muted);animation:example-dot-pulse 1.4s ease-in-out infinite}.example-player__loading-dots span:nth-child(2){animation-delay:.2s}.example-player__loading-dots span:nth-child(3){animation-delay:.4s}@keyframes example-dot-pulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}.example-player__idle{display:flex;flex-direction:column;height:100%;padding:16px 0 20px;gap:0;position:relative}.example-player__idle-preview{flex:1;overflow:hidden;padding:0 12px;display:flex;flex-direction:column;gap:4px;-webkit-mask-image:linear-gradient(to bottom,black 30%,transparent 100%);mask-image:linear-gradient(to bottom,black 30%,transparent 100%)}.example-player__idle-bubble{pointer-events:none}.example-player__play-btn{display:flex;align-items:center;align-self:center;flex-shrink:0;margin-top:16px;gap:12px;padding:16px 32px;background:var(--accent-gold);color:#111;font-weight:700;font-size:1.05rem;border:none;border-radius:99px;cursor:pointer;transition:all .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 16px #c99e4b4d}.example-player__play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #c99e4b66}.example-player__play-btn i{font-size:1rem}.example-player__blocked{position:absolute;inset:0;background:#000000bf;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10;cursor:pointer}.example-player__blocked-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-gold);display:flex;align-items:center;justify-content:center;font-size:20px;color:#111}.example-player__blocked p{color:var(--text-white);font-size:.9rem;margin:0}.example-player__playback{display:flex;flex-direction:column;height:100%}.example-player__scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 0;-webkit-overflow-scrolling:touch}.example-player__history-item{opacity:.5}.example-player__active{min-height:120px;padding:16px 0}.example-player__pause-dots{display:flex;justify-content:center;gap:8px;padding:16px 0}.example-player__pause-dots span{width:8px;height:8px;border-radius:50%;background:var(--text-muted);animation:example-dot-pulse 1.4s ease-in-out infinite}.example-player__pause-dots span:nth-child(2){animation-delay:.2s}.example-player__pause-dots span:nth-child(3){animation-delay:.4s}.example-player__controls{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0000004d;border-top:1px solid rgba(255,255,255,.06)}.example-player__progress{flex:1;display:flex;flex-direction:column;gap:6px}.example-player__progress-text{font-size:.75rem;color:var(--text-muted);font-weight:500}.example-player__progress-bar{height:3px;background:#ffffff1a;border-radius:2px;overflow:hidden}.example-player__progress-fill{height:100%;background:var(--accent-gold);border-radius:2px;transition:width .3s ease}.example-player__stop-btn{width:40px;height:40px;border:none;border-radius:50%;background:#ffffff14;color:var(--text-white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:background .2s}.example-player__stop-btn:hover{background:#ffffff26}.example-player__complete{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;padding:32px;text-align:center}.example-player__complete-icon{font-size:3rem;color:#59c059}.example-player__complete-text{font-size:1.25rem;font-weight:600;color:var(--text-white);margin:0}.example-player__complete-actions{display:flex;gap:12px;margin-top:8px}.example-player__replay-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#ffffff14;color:var(--text-white);border:1px solid rgba(255,255,255,.12);border-radius:99px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none}.example-player__replay-btn:hover{background:#ffffff1f}.example-player__view-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#ffffff14;color:var(--text-white);border:1px solid rgba(255,255,255,.12);border-radius:99px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none}.example-player__view-btn:hover{background:#ffffff1f}.example-player__cta-btn{display:inline-block;margin-top:16px;padding:14px 32px;background:var(--accent-gold);color:#111;font-weight:700;font-size:1rem;border-radius:99px;text-decoration:none;transition:all .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 16px #c99e4b4d}.example-player__cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #c99e4b66}@media(max-width:768px){.example-player__mockup{max-width:100%;height:480px}.example-player__header{flex-direction:column;align-items:flex-start;gap:8px}}