#loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#030405;overflow:hidden;opacity:1;visibility:visible;transition:opacity .35s ease,visibility .35s}
#logo-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease;pointer-events:none}#logo-scene.ready{opacity:.8}
.logo-scene-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 36% 37% at center,#030405dd,#03040588 55%,transparent 100%),linear-gradient(0deg,#03040544,transparent 35%,transparent 70%,#03040522)}
.a3-loading{position:relative;z-index:1;width:min(360px,82vw);display:flex;flex-direction:column;align-items:center;transform:translateY(-12px)}
.a3-stage{width:min(260px,65vw);aspect-ratio:1;position:relative;display:grid;place-items:center}
.a3-badge{position:relative;width:100%;height:100%;display:grid;place-items:center;opacity:0;transition:opacity .5s ease}
#loader.mark-ready .a3-badge{opacity:1}
.a3-badge img{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0}
.a3-monogram{font-size:60px;font-weight:650;color:var(--accent)}
.a3-track{position:relative;width:120px;height:2px;background:#ffffff18;border-radius:8px;overflow:hidden;margin-top:28px}
.a3-track span{position:absolute;inset:0 auto 0 0;width:32%;background:var(--accent);border-radius:inherit;animation:a3-travel 1.5s cubic-bezier(.4,0,.2,1) infinite}
.a3-caption{font:450 11px/1.5 system-ui,sans-serif;color:#a5acb3;letter-spacing:.04em;margin-top:15px}
#loader.is-complete .a3-track span{animation:none;transform:none;width:100%}
#loader.is-leaving{opacity:0;visibility:hidden;transition-duration:.35s}
@keyframes a3-travel{from{transform:translateX(-110%)}to{transform:translateX(420%)}}
@media(max-width:600px){.a3-stage{width:220px}.logo-scene-shade{background:radial-gradient(ellipse 50% 26% at center,#030405ee,#03040599 55%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){#loader,#loader *{animation:none!important;transition:none!important}.a3-track span{width:45%;transform:none}}

/* Visible from the first painted logo, including Telegram WebViews without WebGL. */
.logo-scene-fallback{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:850px;opacity:1;transition:opacity .35s ease}
.logo-scene-fallback img{position:absolute;width:clamp(300px,65vw,850px);height:auto;object-fit:contain;opacity:.64;backface-visibility:visible;filter:brightness(.75);transform-origin:center;animation:compatible-logo-turn 7s ease-in-out 2 alternate}
.logo-scene-fallback img:first-child{left:-25%;top:-12%;--tilt:24deg;--angle:-22deg}
.logo-scene-fallback img:last-child{right:-24%;bottom:-14%;--tilt:-28deg;--angle:20deg;animation-delay:-2s}
#loader.scene-ready .logo-scene-fallback{opacity:0}
@keyframes compatible-logo-turn{from{transform:rotateZ(var(--angle)) rotateY(var(--tilt))}to{transform:rotateZ(calc(var(--angle) + 18deg)) rotateY(calc(var(--tilt) - 45deg))}}
@media(max-width:600px){.logo-scene-fallback img{width:340px}.logo-scene-fallback img:first-child{left:-150px;top:-20px}.logo-scene-fallback img:last-child{right:-140px;bottom:-10px}}
@media(prefers-reduced-motion:reduce){.logo-scene-fallback img{animation:none!important;transform:rotateZ(var(--angle)) rotateY(var(--tilt))}}