@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-latin-700.woff2") format("woff2"); }

:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; color: #fcfcfc; background: #0d0f18; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; background: radial-gradient(ellipse at 50% 30%, #151826 28%, #0d0f18 100%); font-size: 16px; line-height: 1.5; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #a5d4ff; outline-offset: 5px; }
.shell { width: min(100% - 40px, 560px); margin-inline: auto; padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.toolbar { display: flex; justify-content: flex-end; padding-block: 24px 12px; min-height: 80px; }
.share-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #ffffff24; border-radius: 999px; color: #e8ebf4; background: #ffffff08; font-size: 14px; font-weight: 600; }
.share-button:hover { background: #ffffff16; }
.share-button svg { width: 17px; height: 17px; }
.profile { text-align: center; padding: 12px 0 34px; }
.avatar { display: block; width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #ffffff06; }
h1 { margin: 0; font-size: clamp(26px, 5.5vw, 36px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.25; text-wrap: balance; }
.badge { width: .62em; height: .62em; vertical-align: .02em; margin-left: .12em; }
.link-group { max-width: 400px; margin-inline: auto; }
.link-group + .link-group { margin-top: 40px; }
.link-group h2 { text-align: center; margin: 0 0 18px; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -.5px; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.link { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 20px; border: 1px solid #ffffff0c; border-radius: 10px; text-decoration: none; color: #fff; background: #1e1e2e; font-size: 16px; font-weight: 700; line-height: 1.4; box-shadow: 0 2px 6px #00000012; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
.link img { flex: 0 0 21px; width: 21px; height: 21px; object-fit: contain; }
.link span { min-width: 0; }
.linkedin { background: #2867b2; }
.github, .planet-trivia { background: #000; }
.instagram { background: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); }
.substack { background: #ff6719; }
.youtube { background: #f00; }
.facebook { background: #1877f2; }
.discord { background: #5865f2; }
.email { background: #0085ff; }
.jodi-quotient { background: #181a16; }
.borntreger-digital { background: #5b21b6; }
.google-review { background: #4285f4; }
@media (hover: hover) { .link:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 6px 16px #0003; } }
.link:active { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 10; padding: 10px 16px; color: #10131e; background: #fff; border-radius: 6px; }
.skip-link:focus { top: 16px; }
.share-dialog { width: max-content; max-width: calc(100% - 32px); padding: clamp(12px, 4vw, 28px); color: #f8f9fc; background: #1b2031; border: 1px solid #ffffff26; border-radius: 16px; box-shadow: 0 20px 80px #0009; }
.share-dialog::backdrop { background: #05070dbb; backdrop-filter: blur(5px); }
.share-dialog h2 { margin: 0 0 20px; font-size: 22px; }
.share-dialog label { display: block; margin-bottom: 8px; color: #c4cbdc; font-size: 14px; }
.share-dialog input { display: block; width: 100%; min-height: 46px; padding: 10px; border: 1px solid #56627d; border-radius: 6px; background: #101422; color: #fff; }
.dialog-actions { display: flex; gap: clamp(4px, 2vw, 10px); margin-top: 20px; }
.dialog-actions button { display: inline-flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; gap: clamp(4px, 1vw, 8px); min-height: 44px; padding: 10px clamp(4px, 2vw, 16px); border: 1px solid #647394; border-radius: 7px; background: transparent; color: #fff; font-weight: 600; }
.dialog-actions span { min-width: 0; overflow-wrap: anywhere; }
.dialog-actions svg { width: 17px; height: 17px; flex: 0 0 17px; }
.dialog-actions .copy-button { background: #d9e9ff; color: #131c2c; border-color: #d9e9ff; }
.share-status { color: #c4cbdc; font-size: 14px; margin: 16px 0 0; min-height: 21px; }
@media (max-width: 360px) { .dialog-actions svg { display: none; } }
@media (max-width: 420px) { .toolbar { padding-top: 16px; min-height: 72px; } .profile { padding-top: 6px; padding-bottom: 28px; } .avatar { width: 104px; height: 104px; margin-bottom: 18px; } .link-group + .link-group { margin-top: 34px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .link:hover { transform: none; } }