:root {
  color-scheme: light;
  --bg: #f4f8fb;
  --paper: #fff;
  --paper-soft: #ebf3f8;
  --ink: #1b252c;
  --muted: #5e707d;
  --faint: #899da9;
  --line: rgba(106, 147, 176, .14);
  --line-strong: rgba(106, 147, 176, .24);
  --accent: #6a93b0;
  --accent-soft: rgba(106, 147, 176, .14);
  --warm: #dfb4c0;
  --warm-soft: rgba(223, 180, 192, .18);
  --shadow: 0 18px 48px rgba(60, 85, 105, .09);
  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --sans: "Inter", "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12161a;
  --paper: #191f25;
  --paper-soft: #1e262e;
  --ink: #ebf2f7;
  --muted: #a6b8c4;
  --faint: #748896;
  --line: rgba(180, 215, 235, .1);
  --line-strong: rgba(180, 215, 235, .2);
  --accent: #92b9d3;
  --accent-soft: rgba(146, 185, 211, .15);
  --warm: #dfb4c0;
  --warm-soft: rgba(223, 180, 192, .15);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { position: relative; margin: 0; min-width: 320px; height: 100vh; height: 100dvh; overflow: hidden; color: var(--ink); background: linear-gradient(145deg, #edf4f9 0%, #e6eff6 45%, #f7edf2 100%); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before, body::after { position: fixed; z-index: 0; content: ""; pointer-events: none; filter: blur(30px); opacity: .75; }
body::before { width: 56vw; height: 40vh; left: -12vw; top: 8vh; border-radius: 43% 57% 61% 39% / 58% 42% 58% 42%; background: radial-gradient(ellipse at 52% 48%, rgba(145, 194, 224, .52), rgba(180, 214, 235, .2) 52%, transparent 74%); transform: rotate(-12deg); }
body::after { width: 52vw; height: 38vh; right: -14vw; bottom: 4vh; border-radius: 62% 38% 46% 54% / 39% 57% 43% 61%; background: radial-gradient(ellipse at 42% 48%, rgba(230, 185, 200, .38), rgba(240, 210, 220, .12) 54%, transparent 76%); transform: rotate(10deg); }
:root[data-theme="dark"] body { background: linear-gradient(145deg, #15191e, #11161b 50%, #191418); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
.page { position: relative; z-index: 1; width: min(100%, 680px); height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; min-width: 0; gap: 10px; align-items: center; font-family: var(--serif); font-size: 15px; }
.brand-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: #425866; border-radius: 50%; background: linear-gradient(135deg, #c8e2f0, #f0cdd7); font-size: 13px; box-shadow: 0 6px 18px rgba(152, 177, 194, .22); }
.top-actions { display: flex; gap: 7px; align-items: center; }
.text-action, .icon-button { min-height: 38px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 5px 18px rgba(29, 31, 28, .04); }
.text-action { display: grid; padding: 0 13px; place-items: center; font-size: 12px; }
.icon-button { display: grid; width: 38px; padding: 0; place-items: center; }
.icon-button:hover, .text-action:hover { border-color: var(--accent); background: var(--paper); }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-dot { width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.content { min-height: 0; display: grid; grid-template-rows: minmax(0, .75fr) minmax(0, 1.25fr); gap: 10px; }
.profile-card { min-height: 0; overflow: hidden; border-radius: 22px; background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 18px 48px rgba(74, 87, 96, .11); backdrop-filter: blur(10px); }
.directory { min-height: 0; overflow: hidden; }
.profile-cover { position: relative; display: flex; height: clamp(54px, 10vh, 76px); overflow: hidden; padding: 9px 12px; align-items: flex-start; justify-content: space-between; color: rgba(55, 70, 81, .62); background: linear-gradient(118deg, #bfddea 0%, #d7deea 42%, #edcbd5 100%); font: 8px/1 var(--mono); letter-spacing: .08em; }
.profile-cover::before, .profile-cover::after { position: absolute; content: ""; border-radius: 43% 57% 55% 45% / 58% 42% 58% 42%; filter: blur(8px); mix-blend-mode: multiply; }
.profile-cover::before { width: 174px; height: 74px; right: -24px; top: -20px; background: rgba(143, 190, 215, .28); transform: rotate(-9deg); }
.profile-cover::after { width: 134px; height: 66px; right: 42px; bottom: -34px; background: rgba(223, 161, 179, .26); transform: rotate(12deg); }
.profile-cover span { position: relative; z-index: 1; }
.profile-body { position: relative; height: calc(100% - clamp(54px, 10vh, 76px)); padding: 38px 16px 12px; }
.profile-body::after { position: absolute; right: 15px; bottom: 2px; content: attr(data-monogram); color: var(--accent-soft); font-family: var(--serif); font-size: clamp(50px, 16vw, 86px); line-height: .8; letter-spacing: -.09em; pointer-events: none; }
.profile-body > * { position: relative; z-index: 1; }
.avatar-wrap { position: absolute; top: -35px; left: 16px; width: 68px; height: 68px; padding: 4px; border-radius: 50%; background: var(--paper); box-shadow: 0 8px 22px rgba(29, 31, 28, .16); }
.avatar, .avatar-fallback { width: 100%; height: 100%; border-radius: 50%; }
.avatar { display: block; object-fit: cover; }
.avatar-fallback { display: grid; place-items: center; color: #587489; background: linear-gradient(145deg, #d9edf6, #f2d7df); font-family: var(--serif); font-size: 20px; }
.section-code { margin: 0 0 5px; color: var(--accent); font: 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(24px, 7vw, 34px); line-height: 1; letter-spacing: -.035em; }
.handle { margin: 5px 0 0; color: var(--faint); font: 10px/1.3 var(--mono); }
.bio { display: -webkit-box; max-width: 34rem; margin: 8px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.directory { display: flex; min-height: 0; flex-direction: column; padding: 8px 2px 2px; }
.section-head { display: flex; flex: 0 0 auto; align-items: end; justify-content: space-between; gap: 14px; margin: 0 5px 8px; }
h2 { font-size: clamp(20px, 5vw, 26px); line-height: 1; }
.link-count { padding: 5px 8px; color: #627f94; border-radius: 999px; background: linear-gradient(100deg, rgba(185, 218, 235, .4), rgba(237, 199, 211, .42)); font: 9px/1 var(--mono); white-space: nowrap; }
.social-links { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 6px; }
.social-link { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; min-height: 0; overflow: hidden; padding: 7px 8px; align-items: center; border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line)); border-radius: 15px; background: linear-gradient(140deg, color-mix(in srgb, var(--paper) 95%, var(--brand)), var(--paper) 72%); box-shadow: 0 8px 24px rgba(35, 43, 39, .07); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.social-link::before { position: absolute; width: 48px; height: 48px; right: -28px; bottom: -30px; content: ""; border: 10px solid color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 50%; }
.social-link:hover, .social-link:focus-visible { border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); transform: translateY(-2px); box-shadow: 0 11px 28px rgba(35, 43, 39, .11); }
.platform-icon { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 5px 12px color-mix(in srgb, var(--brand) 24%, transparent); }
.platform-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.platform-icon .filled { fill: currentColor; stroke: none; }
.platform-icon .platform-text { font-size: 8px; font-weight: 700; }
.link-copy { position: relative; z-index: 1; min-width: 0; }
.link-copy strong { display: block; overflow: hidden; font-family: var(--serif); font-size: 15px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.link-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--faint); font: 8px/1.25 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.link-arrow { position: relative; z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; color: var(--brand); border-radius: 50%; background: color-mix(in srgb, var(--brand) 10%, transparent); font: 11px/1 var(--mono); }
footer { display: flex; min-height: 14px; align-items: center; justify-content: space-between; gap: 14px; color: var(--faint); font: 8px/1.3 var(--mono); }
footer p { margin: 0; }
footer a:hover { color: var(--accent); }
.toast { position: fixed; right: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 10; padding: 10px 15px; color: var(--paper); background: var(--ink); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(50%, 8px); transition: opacity 150ms ease, transform 150ms ease; }
.toast.is-visible { opacity: 1; transform: translate(50%, 0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 460px) { .brand { max-width: 150px; font-size: 12px; } .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-action { padding: 0 10px; } }
@media (max-height: 620px) { .brand-mark { width: 30px; height: 30px; } .text-action, .icon-button { min-height: 34px; height: 34px; } .icon-button { width: 34px; } .profile-body { padding-top: 32px; } .profile-body::after { display: none; } .avatar-wrap { top: -29px; width: 56px; height: 56px; } .section-code { display: none; } h1 { font-size: 22px; } .bio { margin-top: 5px; -webkit-line-clamp: 1; } .directory { padding-top: 7px; padding-bottom: 2px; } .section-head { margin-bottom: 5px; } .social-links { gap: 4px; } .social-link { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 3px 8px; border-radius: 11px; } .platform-icon { width: 28px; height: 28px; } .platform-icon svg { width: 15px; height: 15px; } .link-copy strong { font-size: 14px; } .link-copy small { font-size: 8px; } footer p { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }