body{font-family:var(--font);background:#031224;color:#fff}.app,.screen,.ambient{position:fixed;inset:0}.screen{display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:scale(.985);transition:opacity .48s ease,transform .48s ease;padding:32px}.screen.is-active{opacity:1;pointer-events:auto;transform:scale(1)}.screen-welcome,.screen-loading,.screen-result,.screen-code{background:radial-gradient(circle at 80% 15%,rgba(0,153,102,.22),transparent 24%),radial-gradient(circle at 20% 80%,rgba(57,217,138,.18),transparent 28%),linear-gradient(135deg,#041326 0%,#063462 46%,#00845c 100%)}.ambient{z-index:0;background:linear-gradient(135deg,#041326,#063462 50%,#00845c);overflow:hidden}.screen{z-index:2}.orb{position:absolute;border-radius:50%;filter:blur(22px);opacity:.30;animation:float 12s ease-in-out infinite alternate}.orb-1{width:360px;height:360px;background:#00b778;top:6%;left:6%}.orb-2{width:440px;height:440px;background:#004b93;right:6%;bottom:8%;animation-delay:1s}.orb-3{width:260px;height:260px;background:#39d98a;left:28%;bottom:6%;animation-delay:2s}.orb-4{width:220px;height:220px;background:#fff;right:22%;top:15%;animation-delay:.5s;opacity:.12}@media(max-height:780px){.screen{padding:18px}}
/* ==========================================
   Marca de agua MUESTRA
========================================== */

.screen{
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.screen::after{
    content:"MUESTRA";

    position:absolute;
    top:50%;
    left:50%;

    transform:translate(-50%,-50%) rotate(-28deg);

    z-index:999;

    font-size:clamp(110px,14vw,230px);
    font-weight:900;
    letter-spacing:.15em;

    color:rgba(255,255,255,.08);

    border:5px solid rgba(255,255,255,.08);
    border-radius:18px;

    padding:25px 70px;

    pointer-events:none;
    user-select:none;
}