.blackgrad{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(900px 700px at 20% 20%,rgba(90,140,255,.22),transparent 60%),radial-gradient(800px 600px at 80% 30%,rgba(255,120,200,.14),transparent 60%),radial-gradient(900px 700px at 50% 90%,rgba(120,255,200,.1),transparent 60%),#070b16;color:#fff}.demo-wrap{padding:28px}.liquid-card{--mx: 50%;--my: 35%;--rx: 0deg;--ry: 0deg;--bx: 20px;--by: 14px;position:relative;--width: min(620px, 92vw);--padding: 22px 22px;border-radius:22px;overflow:hidden;transform:translateZ(0);color:#ffffffeb;background:linear-gradient(180deg,#ffffff24,#ffffff0f);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);border:1px solid rgba(255,255,255,.16);outline:1px solid rgba(255,255,255,.06);outline-offset:-2px;box-shadow:0 22px 70px #0000008c,inset 0 1px #ffffff2e;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.liquid-card.is-hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-2px);box-shadow:0 30px 95px #000000a6,inset 0 1px #ffffff38;border-color:#ffffff38}.liquid-content{position:relative;z-index:5}.liquid-card h3{margin:0 0 8px;font-size:18px;letter-spacing:.2px}.liquid-card p{margin:0 0 14px;color:#ffffffc7;line-height:1.35}.liquid-surface{position:absolute;inset:-25%;z-index:1;pointer-events:none;opacity:0;transition:opacity .18s ease;mix-blend-mode:screen;filter:url(#liquidDistort);transform:translate3d(calc(var(--bx) * -1),calc(var(--by) * -1),0);background:radial-gradient(48% 40% at var(--mx) var(--my),rgba(255,255,255,.42),rgba(255,255,255,.12) 35%,transparent 62%),radial-gradient(34% 28% at calc(var(--mx) + 12%) calc(var(--my) + 10%),rgba(140,200,255,.2),transparent 62%),radial-gradient(28% 24% at calc(var(--mx) - 18%) calc(var(--my) + 18%),rgba(255,160,220,.14),transparent 65%)}.liquid-card.is-hover .liquid-surface{opacity:.95}.liquid-caustics{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .18s ease;mix-blend-mode:screen;filter:url(#liquidDistort);background:repeating-radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.1) 0 10px,transparent 10px 22px),conic-gradient(from 220deg at calc(var(--mx) + 10%) calc(var(--my) - 10%),rgba(255,255,255,.1),transparent 25%,rgba(255,255,255,.06),transparent 60%,rgba(255,255,255,.08));background-size:240px 240px,100% 100%;animation:causticsMove 9s ease-in-out infinite}.liquid-card.is-hover .liquid-caustics{opacity:.55}@keyframes causticsMove{0%,to{background-position:0 0,0 0}50%{background-position:80px 40px,0 0}}.liquid-noise{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);animation:noiseDrift 6s linear infinite}@keyframes noiseDrift{0%{transform:translateZ(0)}to{transform:translate3d(24px,-18px,0)}}.liquid-btn{--mx: 50%;--my: 50%;--rx: 0deg;--ry: 0deg;position:relative;display:inline-grid;place-items:center;gap:0;border:0;padding:12px 16px;border-radius:16px;color:#ffffffeb;background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transform:translateZ(0);-webkit-tap-highlight-color:transparent;box-shadow:0 12px 28px #00000059,inset 0 1px #ffffff2e;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.liquid-btn:focus-visible{outline:2px solid rgba(180,220,255,.55);outline-offset:3px}.liquid-btn__bg,.liquid-btn__shine,.liquid-btn__noise{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.liquid-btn__bg{background:linear-gradient(180deg,#ffffff24,#ffffff0f);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);border:1px solid rgba(255,255,255,.16);outline:1px solid rgba(255,255,255,.06);outline-offset:-2px}.liquid-btn__shine{filter:url(#liquidDistort);mix-blend-mode:screen;opacity:0;transition:opacity .16s ease;background:radial-gradient(55% 60% at var(--mx) var(--my),rgba(255,255,255,.4),rgba(255,255,255,.1) 40%,transparent 68%),radial-gradient(35% 40% at calc(var(--mx) + 10%) calc(var(--my) + 10%),rgba(140,200,255,.18),transparent 65%)}.liquid-btn.is-hover .liquid-btn__shine{opacity:.95}.liquid-btn__noise{opacity:.18;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}.liquid-btn__label{position:relative;z-index:2;font-weight:600;letter-spacing:.2px}.liquid-btn:active{transform:translateY(1px) scale(.985);box-shadow:0 8px 18px #00000052,inset 0 1px #ffffff1f;filter:saturate(1.06)}@media (prefers-reduced-motion: reduce){.liquid-card,.liquid-surface,.liquid-caustics,.liquid-noise,.liquid-btn,.liquid-btn__shine{transition:none!important;animation:none!important}.liquid-card.is-hover{transform:translateY(-2px)}}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat.ttf)}@font-face{font-family:SymbolsRounded;src:url(../fonts/SymbolsRounded.ttf)}body{box-sizing:border-box;margin:0;position:fixed;min-height:100vh;inset:0;--font-size: 16px;--font-family: Montserrat, Helvetica, sans-serif;--bgc: hsl(0, 0%, 100%);--fgc: hsl(0, 0%, 0%);--bdc: hsl(0, 0%, 70%);--btn-bgc: hsl(210, 100%, 50%);--btn-fgc: hsl(0, 0%, 100%);--btn-hlc: hsl(210, 100%, 60%);--btn-disc: hsl(0, 0%, 80%);--mnu-bgc: hsl(0, 0%, 90%);--mnu-fgc: hsl(0, 0%, 0%);--mnu-hlc: hsl(218, 92%, 70%);--mnu-hsc: hsl(0, 0%, 60%);--shadow: 0 6px 18px hsla(0, 0%, 0%, .2);font-size:var(--font-size);--font-family: var(--font-family);--background-color: var(--bgc);--color: var(--fgc);--app-bgc: hsl(0, 0%, 97%)}container-app{display:block;margin:auto;height:100vh;width:100vw;overflow:hidden}content{display:flex;flex-direction:column;height:100%;overflow:hidden}pc-menu{display:none}pc-login{font-size:.8em}pc-login::part(field){font-size:1.2em}img{max-width:100%;height:auto}