@font-face {
  font-family: "Lovera";
  src: url("./Lovera.woff2") format("woff2");
  font-display: swap;
}

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
.page { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.card { width: min(100%, 430px); min-height: 720px; padding: 56px 25px 48px; border-radius: 28px; background: linear-gradient(180deg, #090909 0%, #090909 48%, #21070b 100%); box-shadow: 0 20px 60px rgb(0 0 0 / 45%); }
.header { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-frame { display: grid; width: 92px; height: 92px; place-items: center; border-radius: 50%; background: #000; }
.logo { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }
h1 { margin: 20px 0 38px; color: #fff; font-family: "Lovera", Georgia, serif; font-size: clamp(1.65rem, 6vw, 2.05rem); font-weight: 400; line-height: 1.15; letter-spacing: .015em; }
.links { display: flex; flex-direction: column; gap: 13px; }
.link { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; min-height: 58px; padding: 7px 10px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 999px; background: #050505; color: #fff; text-decoration: none; }
.link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.link-disabled { cursor: default; }
.icon, .dots { display: grid; place-items: center; color: #fff; }
.icon { width: 42px; height: 42px; overflow: hidden; border-radius: 50%; }
.icon img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.icon svg { width: 22px; height: 22px; fill: currentColor; }
.icon svg.catarse-icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.label { min-width: 0; overflow: hidden; color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dots { height: 100%; color: rgb(255 255 255 / 62%); font-size: 1.35rem; line-height: 1; }
@media (max-width: 480px) { .page { padding: 0; } .card { width: 100%; min-height: 100vh; border-radius: 0; padding: 48px 18px 40px; } }