@font-face {
  font-family: 'Open Runde';
  src: url('../fonts/OpenRunde-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Runde';
  src: url('../fonts/OpenRunde-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Runde';
  src: url('../fonts/OpenRunde-Semibold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: 'Open Runde', ui-rounded, system-ui, sans-serif;
  color: #fff;
  background: #100d0e;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#000000db, #000000db), url('../images/background.webp') center / cover;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; top: -80px; left: 18px; z-index: 20; padding: 12px 20px; background: #fff; color: #111; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.profile { width: calc(100% - 36px); max-width: 424px; margin: 0 auto; padding: 40px 0 calc(90px + env(safe-area-inset-bottom)); }
.profile-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 36px; }
.avatar { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff1a; }
.profile-copy { min-width: 0; letter-spacing: -.03em; }
.name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
h1 { margin: 0; font-size: 22.4px; line-height: 1.25; font-weight: 600; letter-spacing: -.035em; }
.display-name { position: relative; }
.display-name--chrome { color: #cad0db; -webkit-text-stroke: 2px #31343d; paint-order: stroke fill; }
.display-name--chrome::before { content: attr(data-name); position: absolute; inset: 0; pointer-events: none; color: #e5e7eb; background: linear-gradient(180deg, #fff 0%, #cbd2de 12%, #7c8799 25%, #f1f4fa 43%, #a8b2c1 55%, #fff 73%, #a6afbe 85%, #edf0f6 100%); background-size: 100% 380%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; animation: name-chrome 5s cubic-bezier(.44,.29,.48,1) infinite; }
.profile-header { animation: component-enter .65s cubic-bezier(.2,.7,.2,1) backwards; }
.avatar { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.avatar:hover { transform: rotate(-4deg) scale(1.04); box-shadow: 0 0 0 3px #ffffff26, 0 12px 36px #0005; }
.grid-heading { animation: component-enter .65s .1s cubic-bezier(.2,.7,.2,1) backwards; }
.handle { padding: 4px 6px; border-radius: 8px; background: #ffffff0d; color: #ffffff9c; font-size: 16px; font-weight: 600; line-height: 18px; backdrop-filter: blur(4px); letter-spacing: normal; }
.bio { margin: 4px 0 0; font-size: 18px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }

/* Mobile order is also the DOM order. Desktop positions are retained below. */
.bento-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; container-type: inline-size; }
.grid-heading { margin: 0; align-self: center; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.03em; }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: calc((100cqw - 24px) / 2); margin: 0; padding: 16px; overflow: hidden; border-radius: 16px; background: linear-gradient(150deg, var(--from, #39393f), var(--to, #17171a)); box-shadow: inset 0 0 0 1px #ffffff1a, 0 1px 4px #00000014; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; }
.card { animation: component-enter .65s cubic-bezier(.2,.7,.2,1) var(--enter-delay, 0ms) backwards; }
a.card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px #ffffff40, 0 14px 28px #00000045; }
a.card:active { transform: scale(.98); }
.card-picture { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.card:hover .card-picture { transform: scale(1.04); }
.card-tint { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, #0006, #0000001a 45%, transparent 72%); }
.has-picture .card-tint::before { content: ''; position: absolute; inset: 0; opacity: .55; background: linear-gradient(to top, var(--from), transparent 55%); }
.has-pattern::before, .wallet-card::before { content: ''; position: absolute; inset: 0; z-index: -2; opacity: .14; background: var(--tile) 0 0 / 150px auto repeat; mask-image: linear-gradient(to top, transparent, #000 90%); }
.service-icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(#3a3a3d, #0f0f10); box-shadow: 0 2px 8px #00000040, inset 0 0 0 1px #ffffff1a; }
.service-glyph { width: 28px; height: 28px; background: var(--icon-color, var(--from, #fff)); mask: var(--glyph) center / contain no-repeat; }
.fetched-icon { width: 26px; height: 26px; object-fit: contain; }
.card-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px; }
.card-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; letter-spacing: -.03em; }
.card-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; font-weight: 600; line-height: 1.25; }
.card-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffffc7; font-size: 16px; font-weight: 500; line-height: 1.3; }
.card-action { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: 38px; padding: 9px 13px; border: 1px solid #ffffff1a; border-radius: 50px; background: #00000030; backdrop-filter: blur(16px); font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.external-icon { width: 16px; height: 16px; flex-shrink: 0; }
.service-icon { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.card-action { transition: background-color .25s ease, border-color .25s ease; }
.external-icon { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
a.card:hover .service-icon { transform: translateY(-2px) rotate(-3deg); }
a.card:hover .card-action { background: #ffffff1c; border-color: #ffffff38; }
a.card:hover .external-icon { transform: translate(2px, -2px); }
.media-card { height: 100cqw; padding: 0; }
.media-card img { width: 100%; height: 100%; object-fit: cover; }
.wallet-card { --from: #7057d9; --to: #204e49; --tile: url('../patterns/solana.webp'); height: calc((100cqw - 72px) / 4); min-height: 86px; flex-direction: row; align-items: center; gap: 12px; overflow: visible; }
.wallet-card h3 { margin: 0; flex: 1; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.wallet-card details { position: static; }
.wallet-card summary { cursor: pointer; list-style: none; padding: 10px 12px; border: 1px solid #ffffff26; border-radius: 24px; background: #0003; font-size: 14px; }
.wallet-card summary::-webkit-details-marker { display: none; }
.wallet-address { position: absolute; top: calc(100% + 8px); right: 0; left: 0; padding: 16px; border: 1px solid #ffffff40; border-radius: 12px; z-index: 5; background: #181522; overflow-wrap: anywhere; font-size: 14px; user-select: all; box-shadow: 0 8px 24px #0006; }
.wallet-address a { text-decoration: underline; text-underline-offset: 3px; }
.icon--link { --glyph: url('../icons/link.svg'); --icon-color: #fff; }
.icon--link .service-glyph { width: 44px; height: 44px; mask: none; background: url('../icons/link.svg') center / contain no-repeat; }
.service--github .fetched-icon { background: #fff; border-radius: 50%; }
.icon--instagram { --glyph: url('../icons/instagram.svg'); --icon-color: #f05287; }
.icon--tiktok { --glyph: url('../icons/tiktok.svg'); --icon-color: #fff; }
.icon--discord { --glyph: url('../icons/discord.svg'); }
.icon--x { --glyph: url('../icons/x.svg'); --icon-color: #fff; }
.icon--twitch { --glyph: url('../icons/twitch.svg'); --icon-color: #a970ff; }
.icon--telegram { --glyph: url('../icons/telegram.svg'); }
.icon--snapchat { --glyph: url('../icons/snapchat.svg'); }
.icon--threads { --glyph: url('../icons/threads.svg'); --icon-color: #fff; }
.icon--github { --glyph: url('../icons/github.svg'); --icon-color: #fff; }
.icon--roblox { --glyph: url('../icons/roblox.svg'); --icon-color: #fff; }
.icon--spotify { --glyph: url('../icons/spotify.svg'); }
.icon--applemusic { --glyph: url('../icons/applemusic.svg'); }
.icon--soundcloud { --glyph: url('../icons/soundcloud.svg'); }
.icon--steam { --glyph: url('../icons/steam.svg'); --icon-color: #fff; }
.icon--patreon { --glyph: url('../icons/patreon.svg'); }
.icon--signal { --glyph: url('../icons/signal.svg'); }
.icon--pinterest { --glyph: url('../icons/pinterest.svg'); }
.icon--email { --glyph: url('../icons/email.svg'); --icon-color: #fff; }
.icon--solana { --glyph: url('../icons/solana.svg'); --icon-color: #a496fa; }
.service--link { --from: #3a3a40; --to: #141416; --tile: url('../patterns/link.webp'); }
.service--instagram { --from: #e1306c; --to: #a72164; }
.service--tiktok { --from: #333338; --to: #0f0f10; }
.service--discord { --from: #7480f7; --to: #3a40a8; }
.service--x { --from: #3a3a3d; --to: #0f0f10; }
.service--twitch { --from: #9146ff; --to: #4c1b94; }
.service--telegram { --from: #26a5e4; --to: #1c84b8; }
.service--snapchat { --from: #fffd3d; --to: #c9c600; }
.service--threads, .service--github { --from: #3a3a3d; --to: #0f0f10; }
.service--roblox { --from: #4a4e52; --to: #121316; }
.service--spotify { --from: #1ed760; --to: #0c5827; --tile: url('../patterns/spotify.webp'); }
.service--applemusic { --from: #fa243c; --to: #8c0f21; }
.service--soundcloud { --from: #ff5500; --to: #8c2e00; --tile: url('../patterns/soundcloud.webp'); }
.service--steam { --from: #5a7a9a; --to: #1b2838; }
.service--patreon { --from: #ff7078; --to: #c8323b; --tile: url('../patterns/patreon.webp'); }
.service--signal { --from: #4a83f2; --to: #2453c4; --tile: url('../patterns/signal.webp'); }
.service--pinterest { --from: #e60023; --to: #a3001a; --tile: url('../patterns/pinterest.webp'); }
.service--email { --from: #303035; --to: #141417; --tile: url('../patterns/email.webp'); }
.error-page { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 24px; }
.error-page h1 { font-size: 56px; }
.error-page a { justify-self: center; margin-top: 12px; padding: 12px 20px; background: #ffffff1a; border-radius: 30px; }

@media (min-width: 1252px) {
  .profile-header { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; }
  .avatar { width: 120px; height: 120px; }
  .profile-copy { flex: 1; }
  h1 { font-size: 27.2px; }
}
@media (min-width: 1252px) {
  .profile { max-width: 1360px; }
  .bento-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 26px; grid-auto-rows: auto; gap: 32px; }
  .grid-heading { grid-column: 1 / -1; grid-row: 1; }
  .card { height: auto; aspect-ratio: 1; border-radius: 18px; }
  .card-bottom { flex-direction: column; align-items: stretch; }
  .card-copy { flex: auto; }
  .card-action { flex-shrink: 1; width: 100%; }
  .wallet-card { flex-direction: column; align-items: stretch; }
  .wallet-card .service-icon { align-self: flex-start; }
  .wallet-card h3 { flex: 0; margin-top: auto; margin-bottom: 12px; }
  .wallet-card summary { text-align: center; }
}
@media (max-width: 360px) {
  .card { padding: 12px; }
  .card-bottom { gap: 6px; }
  .card-action { padding: 8px; gap: 4px; font-size: 12px; }
  .card-title { font-size: 20px; }
  .card-description { font-size: 14px; }
  .wallet-card h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .avatar:hover, a.card:hover, a.card:hover .card-picture, a.card:hover .service-icon, a.card:hover .external-icon { transform: none; }
}
@keyframes component-enter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes name-chrome {
  0%, 8% { background-position: 50% 0%; }
  62%, 100% { background-position: 50% 100%; }
}
@media (hover: none) {
  .avatar:hover, a.card:hover, a.card:hover .service-icon, a.card:hover .external-icon { transform: none; }
}

/* Animation sequence and desktop positions from src/data/profile.ts. */
  .card--github { --enter-delay: 0ms; }
  .card--card-1 { --enter-delay: 28ms; }
  .card--x { --enter-delay: 56ms; }
  .card--telegram { --enter-delay: 84ms; }
  .card--discord { --enter-delay: 112ms; }
  .card--instagram { --enter-delay: 140ms; }
  .card--tiktok { --enter-delay: 168ms; }
  .card--twitch { --enter-delay: 196ms; }
  .card--snapchat { --enter-delay: 224ms; }
  .card--threads { --enter-delay: 252ms; }
  .card--roblox { --enter-delay: 280ms; }
  .card--spotify { --enter-delay: 308ms; }
  .card--applemusic { --enter-delay: 336ms; }
  .card--soundcloud { --enter-delay: 364ms; }
  .card--steam { --enter-delay: 392ms; }
  .card--patreon { --enter-delay: 420ms; }
  .card--signal { --enter-delay: 420ms; }
  .card--pinterest { --enter-delay: 420ms; }
  .card--email { --enter-delay: 420ms; }
  .card--custom { --enter-delay: 420ms; }
  .card--card-2 { --enter-delay: 420ms; }
@media (min-width: 1252px) {
  .card--github { grid-column: 4; grid-row: 3; }
  .card--card-1 { grid-column: 2; grid-row: 5; }
  .card--x { grid-column: 5; grid-row: 2; }
  .card--telegram { grid-column: 1; grid-row: 3; }
  .card--discord { grid-column: 4; grid-row: 2; }
  .card--instagram { grid-column: 2; grid-row: 2; }
  .card--tiktok { grid-column: 3; grid-row: 2; }
  .card--twitch { grid-column: 6; grid-row: 2; }
  .card--snapchat { grid-column: 2; grid-row: 3; }
  .card--threads { grid-column: 3; grid-row: 3; }
  .card--roblox { grid-column: 5; grid-row: 3; }
  .card--spotify { grid-column: 6; grid-row: 3; }
  .card--applemusic { grid-column: 1; grid-row: 4; }
  .card--soundcloud { grid-column: 2; grid-row: 4; }
  .card--steam { grid-column: 3; grid-row: 4; }
  .card--patreon { grid-column: 4; grid-row: 4; }
  .card--signal { grid-column: 5; grid-row: 4; }
  .card--pinterest { grid-column: 6; grid-row: 4; }
  .card--email { grid-column: 1; grid-row: 5; }
  .card--custom { grid-column: 1; grid-row: 2; }
  .card--card-2 { grid-column: 3; grid-row: 5; }
}