.db--viewer{position:relative;background:hsla(0,0%,100%,.015);border:1px solid hsla(0,0%,100%,.06);border-radius:20px;padding:28px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transform:translateY(48px) scale(.98);transition:all .9s cubic-bezier(.16,1,.3,1) .5s;overflow:hidden}.db--viewer.loaded{opacity:1;transform:translateY(0) scale(1)}.db--viewer:hover{border-color:rgba(255,106,61,.15);box-shadow:0 0 0 1px rgba(255,106,61,.05),0 20px 60px rgba(0,0,0,.4)}.db--viewer-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(255,106,61,.03) 60deg,transparent 120deg,rgba(255,60,20,.02) 240deg,transparent 1turn);animation:db-glowRotate 20s linear infinite;pointer-events:none}@keyframes db-glowRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.db--viewer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid hsla(0,0%,100%,.04);position:relative;z-index:2}.db--viewer-meta{display:flex;align-items:center;gap:16px}.db--viewer-tag{display:inline-flex;align-items:center;gap:8px;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:.15em;color:rgba(255,106,61,.7);text-transform:uppercase}.db--tag-dot{width:4px;height:4px;border-radius:50%;background:#ff6a3d;box-shadow:0 0 6px rgba(255,106,61,.6)}.db--viewer-id{font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:600;color:hsla(0,0%,100%,.15);letter-spacing:.1em;padding:4px 10px;border:1px solid hsla(0,0%,100%,.06);border-radius:4px}.db--download-btn{display:inline-flex;align-items:center;gap:10px;background:rgba(255,106,61,.08);border:1px solid rgba(255,106,61,.2);color:#ff6a3d;padding:10px 22px;border-radius:8px;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:700;letter-spacing:.15em;text-decoration:none;text-transform:uppercase;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.db--download-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,106,61,.15),transparent);transition:left .5s ease}.db--download-btn:hover{background:rgba(255,106,61,.15);border-color:rgba(255,106,61,.4);box-shadow:0 0 30px rgba(255,106,61,.2),0 8px 32px rgba(255,106,61,.1);transform:translateY(-2px)}.db--download-btn:hover:before{left:100%}.db--frame{width:100%;aspect-ratio:16/10;background:rgba(0,0,0,.6);border-radius:12px;border:1px solid hsla(0,0%,100%,.04);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:inset 0 2px 20px rgba(0,0,0,.3)}.db--frame iframe{width:100%;height:100%;border:none}.db--loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:60px 0}.db--loader-ring{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,106,61,.1);position:relative;animation:db-ringRotate 2s linear infinite}.db--loader-ring:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#ff6a3d;filter:drop-shadow(0 0 8px rgba(255,106,61,.5))}.db--loader-ring-inner{position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,106,61,.15);animation:db-ringRotate 3s linear infinite reverse}.db--loader-ring-inner:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:50%;border:1px solid transparent;border-bottom-color:rgba(255,106,61,.5)}@keyframes db-ringRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.db--loader-text{font-family:Rajdhani,sans-serif;font-size:13px;font-weight:700;letter-spacing:.25em;color:rgba(255,106,61,.6)}.db--loader-bar{width:180px;height:2px;background:rgba(255,106,61,.1);border-radius:2px;overflow:hidden}.db--loader-progress{width:30%;height:100%;background:linear-gradient(90deg,transparent,#ff6a3d,transparent);border-radius:2px;animation:db-loaderSweep 1.4s ease-in-out infinite}@keyframes db-loaderSweep{0%{transform:translateX(-100%)}to{transform:translateX(500%)}}@media (max-width:768px){.db--viewer{padding:18px;border-radius:16px}.db--frame{aspect-ratio:9/13;border-radius:8px}.db--viewer-header{flex-direction:column;gap:14px;align-items:flex-start}.db--viewer-meta{flex-wrap:wrap;gap:10px}.db--viewer-tag{font-size:9px}.db--download-btn{width:100%;justify-content:center;padding:12px 20px}}