.logo-stage{position:relative;width:min(100%,390px);height:342px;margin:20px auto 20px;isolation:isolate}
.logo-stage:before{content:"";position:absolute;inset:11% 5% 12%;border-radius:50%;background:radial-gradient(ellipse,#11db8c24,transparent 65%);filter:blur(18px);pointer-events:none;animation:greenAmbientGlow 6s ease-in-out infinite;z-index:-1}
.logo-stage canvas{display:block;width:100%;height:310px;opacity:0;transition:opacity .7s ease;cursor:grab;touch-action:none;outline:none;filter:drop-shadow(0 0 10px #19e99d28)}
.logo-stage canvas:active,.logo-stage.is-dragging canvas{cursor:grabbing}
.logo-stage canvas:focus-visible{outline:1px solid #5bffbd;outline-offset:2px;border-radius:20px}
.logo-fallback{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:200px;height:200px;object-fit:cover;border-radius:50%;border:1px solid #53e5b399;box-shadow:0 0 45px #18d39455;transition:opacity .6s ease;pointer-events:none}
.logo-stage.is-ready canvas{opacity:1}
.logo-stage.is-ready .logo-fallback{opacity:0}
.logo-controls{display:flex;align-items:center;justify-content:center;gap:13px;position:absolute;bottom:6px;left:0;right:0;font-size:.65rem;color:#99b9ab;letter-spacing:.04em}
.logo-controls[hidden]{display:none}
.logo-controls button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid #25df9966;border-radius:999px;background:#041d14cc;color:#a1ffdb;cursor:pointer;font:inherit;font-weight:700;transition:background .2s,box-shadow .2s}
.logo-controls button:hover,.logo-controls button:focus-visible{background:#0a4932;box-shadow:0 0 15px #21e6a04d;outline:1px solid #6cffc8}
.logo-controls button svg{width:12px;height:12px}
@media(max-width:760px){.logo-stage{height:320px;margin-top:10px;margin-bottom:17px}.logo-stage canvas{height:292px}.logo-fallback{top:35px;width:190px;height:190px}}
@media(prefers-reduced-motion:reduce){.logo-stage:before{animation:none}.logo-stage canvas,.logo-fallback{transition:none}}