/* A real 3D gallery canvas, a quiet referral surface, and transparent brand marks. */
:root {
  color-scheme:light;
  --paper:#fdfcff; --surface:#fdfcffed; --header:#fdfcff70; --panel:#f4eff9b3;
  --ink:#292337; --muted:#746c82; --line:#ddd4e7; --accent:#7653b5; --tint:#eee7f8;
  --glass:#fdfcffad; --glass-edge:#ffffffcc; --glass-shadow:#3d24521c;
  --footer-glass:#fdfcff99;
  --sans:"Microsoft YaHei UI","PingFang SC",sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#100d16; --surface:#100d16ed; --header:#17101f70; --panel:#201929a6;
  --ink:#f1edf7; --muted:#b6acc3; --line:#362c42; --accent:#c1a0ef; --tint:#2c203f;
  --glass:#17101fad; --glass-edge:#d8b9fb30; --glass-shadow:#05020966;
  --footer-glass:#100d1699;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; isolation:isolate; background:var(--paper); color:var(--ink); font:14px/1.8 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
a,button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
button:disabled { opacity:.55; cursor:wait; }
::selection { background:var(--tint); color:var(--ink); }
h1,h2,h3,p { margin-top:0; }
.shell { width:min(1120px,calc(100% - 112px)); margin-inline:auto; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-button,.display-controls button,.platform-link { display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; padding:8px; border:1px solid transparent; border-radius:8px; background:transparent; cursor:pointer; transition:background .2s,color .2s; }
.icon-button:hover,.display-controls button:hover,.platform-link:hover { background:var(--tint); color:var(--accent); }
.header {
  position:sticky; top:16px; z-index:30;
  width:min(1040px,calc(100% - 48px)); height:72px; margin-block:16px 0; padding-inline:28px 16px;
  display:flex; align-items:center; gap:32px;
  background:linear-gradient(120deg,#ffffff12,transparent 55%),var(--header); border:1px solid var(--glass-edge); border-radius:999px;
  -webkit-backdrop-filter:blur(30px) saturate(145%); backdrop-filter:blur(30px) saturate(145%);
  box-shadow:0 8px 32px var(--glass-shadow),inset 0 1px 0 var(--glass-edge);
}
.header .display-controls button { border-radius:50%; }
.header-menu { display:flex; align-items:center; gap:32px; margin-left:auto; }
.menu-toggle,.mobile-label { display:none; }
.menu-toggle path { transform-origin:12px 12px; transition:transform .18s ease; }
.menu-toggle[aria-expanded="true"] .menu-line-top { transform:translateY(4px) rotate(45deg); transform-origin:12px 8px; }
.menu-toggle[aria-expanded="true"] .menu-line-bottom { transform:translateY(-4px) rotate(-45deg); transform-origin:12px 16px; }
.brand { flex-shrink:0; font-size:17px; font-weight:600; letter-spacing:4px; line-height:1.4; }
.brand small { display:block; font-size:10px; color:var(--muted); font-weight:400; letter-spacing:1px; margin-top:6px; }
.header nav { display:flex; align-items:center; gap:28px; margin-left:auto; }
.header nav a { display:flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; font-size:13px; color:var(--muted); white-space:nowrap; }
.header nav a:hover,.header nav a.active { color:var(--accent); }
.header-actions,.display-controls { display:flex; align-items:center; gap:4px; }
.display-controls { padding-left:16px; border-left:1px solid var(--line); }
.display-controls button { font-size:12px; white-space:nowrap; }
.music-waves { display:none; }
#music-toggle[data-state="playing"] { color:var(--accent); background:var(--tint); }
#music-toggle[data-state="playing"] .music-waves { display:block; }
#music-toggle[data-state="playing"] .music-slash { display:none; }
#music-toggle[data-state="loading"] .icon { opacity:.45; }
.theme-sun { display:none; }
[data-theme="dark"] .theme-sun { display:block; }
[data-theme="dark"] .theme-moon { display:none; }
#grid-background { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 50% 48%,#ded0ea 8%,#bba5ce 100%); }
[data-theme="dark"] #grid-background { background:radial-gradient(ellipse at 50% 48%,#10091c 8%,#251233 100%); }
#grid-background::before { content:""; position:absolute; inset:48% -40% -60%; background-image:linear-gradient(#aa8fbd30 1px,transparent 1px),linear-gradient(90deg,#aa8fbd30 1px,transparent 1px); background-size:80px 80px; transform:perspective(420px) rotateX(55deg); transform-origin:center top; mask-image:linear-gradient(transparent,#000 45%); }
#grid-background canvas { position:relative; display:block; width:100%; height:100%; opacity:0; transition:opacity 1.4s ease; }
#grid-background[data-state="ready"] canvas { opacity:1; }
@media (prefers-reduced-motion:reduce) { #grid-background canvas { transition:none; } }
#grid-background[data-state="fallback"] canvas { display:none; }
/* Leave a full viewport below the header so the panel and its glow stay off the first screen. */
.background-stage { height:100vh; height:100svh; }
/* Keep the 40px decorative glow from creating horizontal scrolling on narrow screens. */
#main {
  overflow-x:clip;
  /* Leave enough scroll room for the card to reach the viewport center.
     Tall/mobile cards keep their normal document flow. */
  padding-bottom:max(0px,calc((100svh - var(--referral-height,600px)) / 2 - var(--footer-height,70px) - 28px));
}
.content-surface {
  position:relative;
  width:min(1040px,calc(100% - 64px));
  margin:0 auto 28px;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:28px;
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  backdrop-filter:blur(24px) saturate(120%);
  box-shadow:0 28px 80px var(--glass-shadow),inset 0 1px 0 var(--glass-edge);
}
.content-surface .shell { width:calc(100% - 80px); }
.platforms { padding-block:40px 24px; }
.section-heading { margin-bottom:24px; }
.section-heading h1 { font-size:clamp(28px,2.8vw,36px); font-weight:500; letter-spacing:-.8px; line-height:1.35; margin:0; }
.referral-intro { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:20px 24px; border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-bottom:16px; }
.referral-intro h2 { font-size:18px; font-weight:500; margin:0 0 8px; }
.referral-intro p { font-size:13px; color:var(--muted); margin:0 0 6px; }
.referral-intro small { display:block; font-size:12px; color:var(--muted); }
.shared-code { min-width:230px; padding-left:24px; border-left:1px solid var(--line); }
.shared-code>span { font-size:12px; color:var(--muted); }
.copy-code { display:flex; align-items:center; gap:20px; min-height:44px; border:0; border-radius:8px; color:var(--accent); background:transparent; cursor:pointer; padding:8px; margin-left:-8px; transition:background .2s; }
.copy-code:hover { background:var(--tint); }
.copy-code strong { font-size:24px; font-weight:500; letter-spacing:1px; }
.copy-code .icon { width:17px; height:17px; }
.copied-icon { display:none; }
.is-copied .copy-icon { display:none; }
.is-copied .copied-icon { display:block; }
.compact { gap:18px; }
.compact strong { font-size:14px; }
.platform-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.platform-notes { margin-top:16px; font-size:13px; line-height:1.7; color:var(--muted); }
.platform-notes p { margin:6px 0 0; }
.platform-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:12px; min-height:104px; padding:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s,box-shadow .2s;
}
.platform-row:focus-within { border-color:var(--accent); }
.border-glow-card {
  --card-bg:#f6f2fb;
  --edge-sensitivity:30; --border-radius:28px; --glow-padding:40px; --cone-spread:25; --fill-opacity:.5;
}
.content-surface.border-glow-card { display:block; }
.platform-row.border-glow-card { box-shadow:none; }
[data-theme="dark"] .border-glow-card { --card-bg:#120F17; }
.border-glow-card::before,.border-glow-card::after { pointer-events:none; }
/* Cut out the border center so the original translucent glass stays visible. */
.border-glow-card::before {
  padding:1px; border:0;
  background:var(--gradient-one),var(--gradient-two),var(--gradient-three),var(--gradient-four),var(--gradient-five),var(--gradient-six),var(--gradient-seven),var(--gradient-base);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.content-surface.border-glow-card > section { position:relative; z-index:2; }
.platform-row.border-glow-card > .platform-name,.platform-row.border-glow-card > .copy-code { position:relative; z-index:2; }
:root:not([data-theme="dark"]) .border-glow-card::after,
:root:not([data-theme="dark"]) .border-glow-card > .edge-light { mix-blend-mode:normal; }
.platform-row .platform-name { width:auto; min-width:0; min-height:44px; font-size:18px; gap:8px; border-radius:6px; }
.platform-row .platform-brand--backpack { font-size:17px; }
.platform-row .copy-code { justify-self:end; gap:8px; padding:8px 4px; margin:0; }
.platform-row .copy-code strong { font-size:13px; letter-spacing:.3px; }
@media(hover:hover) {
  .platform-row a.platform-name:hover { opacity:.8; }
}
.platform-name { font-size:21px; font-weight:500; }
.platform-brand,.brand-lockup { width:160px; min-height:36px; display:flex; align-items:center; gap:10px; background:none; border:0; }
.brand-symbol { width:27px; height:27px; object-fit:contain; }
.brand-lockup img { display:block; width:auto; max-width:116px; height:32px; object-fit:contain; }
.brand-lockup .logo-dark { display:none; }
[data-theme="dark"] .brand-lockup .logo-light { display:none; }
[data-theme="dark"] .brand-lockup .logo-dark { display:block; }
.brand-lockup--okx img { width:92px; height:92px; margin-block:-30px; }
.platform-brand--backpack .brand-symbol { width:19px; height:28px; }
.platform-brand--backpack { font-size:20px; }
.brand-lockup--bagel img { width:108px; height:36px; }
[data-theme="dark"] .brand-lockup--okx img,[data-theme="dark"] .brand-lockup--bitget img { filter:invert(1); }
.platform-link { color:var(--accent); }
.copy-status { position:fixed; bottom:24px; left:50%; z-index:50; transform:translateX(-50%); max-width:calc(100% - 40px); width:max-content; margin:0; padding:12px 20px; background:var(--ink); color:var(--paper); border-radius:10px; box-shadow:0 8px 24px #1510201a; font-size:13px; pointer-events:none; }
.copy-status:empty { display:none; }
.connect-inner { padding-block:0 28px; }
.connect-links { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.connect-links>a { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:10px 20px; border:1px solid var(--line); border-radius:999px; background:var(--panel); transition:border-color .2s,background .2s; }
.connect-links>a:hover,.connect-links>a:focus-visible { border-color:var(--accent); background:var(--tint); }
.connect-links strong { font-size:16px; font-weight:400; }
.social-logo { display:block; width:24px; height:24px; flex-shrink:0; object-fit:contain; }
.social-logo--x { width:22px; height:22px; }
[data-theme="dark"] .social-logo--x { filter:invert(1); }
.footer.shell { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; padding:10px max(32px,calc((100% - 1120px)/2)); font-size:12px; color:var(--muted); background:var(--footer-glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.footer-brand { font-size:13px; letter-spacing:2.5px; color:var(--ink); }
.footer-brand span { display:block; margin-top:4px; font-size:11px; letter-spacing:.5px; color:var(--muted); }
.footer p { margin:0; }
.footer-actions { display:flex; gap:4px; }
#pet-toggle[aria-pressed="true"] { background:var(--tint); color:var(--accent); }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px; background:var(--ink); color:var(--paper); z-index:100; }
.skip-link:focus { top:12px; }
.flower-cursor { position:fixed; top:0; left:0; width:60px; height:62px; z-index:1000; pointer-events:none; visibility:hidden; }
.flower-cursor.is-visible { visibility:visible; }
.flower-cursor img { position:absolute; left:12px; top:14px; display:block; width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 2px 3px #100d1630); }
.flower-cursor-arrow { position:absolute; left:-2px; top:-2px; width:24px; height:28px; filter:drop-shadow(0 1px 1px #100d1640); }
.flower-cursor.is-pressed img { transform:scale(.82); }
html.has-image-cursor,html.has-image-cursor * { cursor:none!important; }
@media(max-width:1100px) {
  .platform-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .shell { width:calc(100% - 64px); }
  .content-surface { width:calc(100% - 40px); }
  .content-surface .shell { width:calc(100% - 64px); }
  .header { gap:24px; }
  .referral-intro { gap:20px; padding:20px; }
  .shared-code { min-width:210px; padding-left:24px; }
}
@media(max-width:600px) {
  html { scroll-padding-top:88px; }
  .shell { width:calc(100% - 40px); }
  .content-surface { width:calc(100% - 24px); margin-bottom:24px; border-radius:20px; -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); }
  .content-surface .shell { width:calc(100% - 32px); }
  .header { top:8px; width:calc(100% - 16px); height:64px; margin-top:8px; flex-wrap:nowrap; gap:8px; padding:8px 12px; border-radius:24px; }
  .menu-toggle { display:inline-flex; margin-left:auto; flex-shrink:0; border-radius:50%; }
  .header-menu { position:absolute; top:calc(100% + 8px); left:0; right:0; display:block; margin:0; padding:12px; border:1px solid var(--glass-edge); border-radius:22px; background:linear-gradient(120deg,#ffffff0a,transparent 60%),var(--glass); box-shadow:0 14px 36px var(--glass-shadow); -webkit-backdrop-filter:blur(30px) saturate(145%); backdrop-filter:blur(30px) saturate(145%); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
  .header[data-menu-open="true"] .header-menu { opacity:1; visibility:visible; transform:translateY(0); }
  .header-actions { display:block; margin:8px 0 0; padding:0; border:0; }
  .display-controls { display:grid; grid-template-columns:repeat(3,1fr); border:0; padding:0; gap:8px; }
  .header nav { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; width:auto; gap:8px; margin:0; }
  .header nav a,.header .display-controls button { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--ink); font-size:14px; }
  .header nav a:hover,.header nav a:focus-visible,.header .display-controls button:hover,.header .display-controls button:focus-visible { background:var(--tint); color:var(--accent); }
  .header nav a.active { background:var(--tint); color:var(--accent); }
  .brand { font-size:15px; letter-spacing:3px; }
  .brand small { font-size:9px; letter-spacing:.3px; margin-top:3px; white-space:nowrap; }
  .platforms { padding-block:28px 20px; }
  .section-heading { margin-bottom:20px; }
  .section-heading h1 { font-size:28px; }
  .referral-intro { grid-template-columns:1fr; gap:16px; padding:18px; margin-bottom:12px; }
  .referral-intro h2 { font-size:17px; }
  .referral-intro p { font-size:14px; }
  .shared-code { min-width:0; padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }
  .platform-group { gap:12px; }
  .platform-row { gap:8px; min-height:96px; padding:16px; }
  .platform-row .copy-code { gap:6px; }
  .platform-row .copy-code strong { font-size:12px; letter-spacing:0; }
  .platform-row .platform-name { font-size:17px; }
  .platform-row .platform-brand--backpack { font-size:15px; }
  .platform-brand,.brand-lockup { width:114px; gap:7px; }
  .platform-name { font-size:17px; }
  .brand-symbol { width:22px; height:22px; }
  .brand-lockup img { max-width:98px; height:30px; }
  .brand-lockup--okx img { width:84px; height:84px; margin-block:-27px; }
  .platform-brand--backpack { font-size:15px; }
  .platform-brand--backpack .brand-symbol { width:16px; height:24px; }
  .compact { gap:10px; padding:6px 4px; margin-left:0; }
  .compact strong { font-size:13px; letter-spacing:0; }
  .connect-inner { padding-bottom:20px; }
  .connect-links { grid-template-columns:1fr; gap:10px; }
  .connect-links strong { font-size:16px; }
  .footer.shell { flex-wrap:wrap; gap:8px; padding:10px 20px; }
  .footer-brand { flex:1; min-width:0; }
  .footer p { order:3; width:100%; }
}
@media(max-width:680px) {
  .platform-group { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .flower-cursor.is-pressed img { transform:scale(.96); }
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation:none!important; transition:none!important; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header,.content-surface,.footer.shell { background:var(--surface); }
}