/* 0x4 官网（2026-09-29 单屏轮播版）
   原则：一屏不滚动、自动轮播；背景是 BytePlus 生成的场景图（WebP，当前页和下一页才加载）；
   动画只动 transform / opacity，只在当前页运行；不用全屏 backdrop-filter / 大面积 filter，照顾显卡和内存。
   整站刻意只做深色一套（电影感），所有颜色都在这里显式给出。 */

/* 数字不走像素字（2026-10-25 goat）：往「Pixelify Sans」这个族里再挂一条，只管 0-9，指到 Geist 的字形文件。
   这样所有用 var(--display) 的地方，中英文照旧是像素字，碰到数字自动换成 Geist，不用在 HTML 里一个个包标签。
   地址是 Google Fonts 自己给 Geist latin 的 woff2，和 <head> 里那行 css2 请求同一套文件。 */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2) format('woff2');
  unicode-range: U+0030-0039;
}

/* 三种外观（2026-10-25 goat：整个官网跟着用户选的外观走，和网页版同一个键 0x4.theme）。
   午夜黑 = 下面的 :root（9/29 定的那套，一个像素没动）；香芋白 = [data-theme="light"]；空间 = [data-look="space"]。
   做法：所有颜色只写「基色 + 透明度」，基色是 token，透明度留在各自的规则里，所以换外观只换基色，层次关系不变。 */
:root {
  color-scheme: dark;
  /* 基色（rgb 分量，配 rgb(var(--x) / .5) 用） */
  --paper: 255 255 255;     /* 往上提亮用的那层（浅色外观里会变成深紫） */
  --shade: 0 0 0;           /* 阴影 */
  --ink-rgb: 7 6 13;        /* 底色，背景图上的遮罩用它 */
  --fg-rgb: 236 231 255;    /* 正文色 */
  --iris: 215 201 255;      /* 紫：光晕、选中、强调线 */
  --peach: 255 211 187;     /* 暖 */
  --sky: 169 230 255;       /* 蓝 */
  --up-rgb: 126 245 193;
  --down-rgb: 255 138 150;
  --ink: #07060d;
  --ink-2: #0d0b17;
  --fg: #f4f1ff;
  --mute: rgb(var(--fg-rgb) / .68);
  --faint: rgb(var(--fg-rgb) / .42);
  --line: rgb(var(--paper) / .12);
  --pearl: linear-gradient(100deg, #ffd9c2 0%, #dccdff 48%, #b6ecff 100%);
  --up: #7ef5c1;
  --down: #ff8a96;
  /* 面板：交易面板、Into the 0x4 按钮里的那层底 */
  --card-a: rgb(30 24 52 / .92);
  --card-b: rgb(11 9 20 / .94);
  /* 面板底：深色外观是「白色微透」，浅色外观要反过来变成白色实底，所以单列一档，不跟着 --paper 走 */
  --surface: rgb(var(--paper) / .05);
  --surface-dim: rgb(var(--paper) / .035);
  --surface-strong: rgb(var(--paper) / .11);
  --surface-faint: rgb(var(--paper) / .02);
  --card-blur: none;        /* 空间外观下才开毛玻璃 */
  --focus: #d7c9ff;
  --brand-1: #ffd9c2; --brand-2: #dccdff; --brand-3: #b6ecff;   /* 0x4 字标的珍珠渐变 */
  --on-into: #fff;    /* Into the 0x4 按钮上的字 */
  --into-shine: #ffe3d3;   /* 字上来回扫的那道光 */
  --hot: #fff;             /* 最亮的那一点：像素大字、点阵、进度条 */
  --ic-line: #ece6ff;      /* 小图标的线 */
  --tag-i: #e4dbff;        /* 标语里被点亮的那个词 */
  --ghost-c: #62f0ff; --ghost-m: #ff62d4;   /* 大字的色差重影 */
  --mega-1: #ffe2cf; --mega-2: #e0d2ff; --mega-3: #b9efff;   /* 首屏那颗大字 */
  --art: 'art';             /* 背景大图的目录，浅色外观换成 art/light */
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  /* goat 9/29：全站只用两种字体。像素字 Pixelify Sans 做标题、标语、按钮、编号和标签；Geist 只用于正文段落。中文落到系统苹方 */
  --display: 'Pixelify Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 香芋白（和网页版的 light 外观同一套底色：#ebedf5 / #19152c） ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --paper: 70 54 140;       /* 提亮层翻过来：浅色上用淡紫压暗，描边、星点、细线都跟着它走 */
  --shade: 90 78 150;       /* 阴影也带紫，纯黑在这套底色上太脏 */
  --ink-rgb: 235 237 245;   /* 背景图上的遮罩跟着变浅 */
  --fg-rgb: 25 21 44;
  --iris: 118 86 239;
  --peach: 214 122 54;
  --sky: 42 140 190;
  --up-rgb: 20 160 106;
  --down-rgb: 214 59 80;
  --ink: #ebedf5;
  --ink-2: #f5f6fa;
  --fg: #19152c;
  --mute: rgb(var(--fg-rgb) / .72);
  --faint: rgb(var(--fg-rgb) / .5);
  --line: rgb(var(--iris) / .18);
  --pearl: linear-gradient(100deg, #b4651f 0%, #6b4ad8 48%, #1c7ca6 100%);
  --up: #14a06a;
  --down: #d63b50;
  --surface: rgb(255 255 255 / .62);
  --surface-dim: rgb(255 255 255 / .45);
  --surface-strong: rgb(255 255 255 / .8);
  --surface-faint: rgb(255 255 255 / .34);
  --card-a: rgb(255 255 255 / .9);
  --card-b: rgb(246 247 251 / .94);
  --focus: #6b4ad8;
  --brand-1: #b4651f; --brand-2: #6b4ad8; --brand-3: #1c7ca6;
  --on-into: #17131f;
  --into-shine: #7a4bd0;
  --hot: #17131f;
  --ic-line: #3c3358;
  --tag-i: #5b3fb8;
  --ghost-c: #0e9fc4; --ghost-m: #d02a9c;
  --mega-1: #c05a12; --mega-2: #5b3fb8; --mega-3: #16708f;
  --art: 'art/light';
}

/* ---------- 空间（深色烟晶玻璃，和网页版 data-look="space" 一脉：面板半透明 + 背后大模糊 + 亮边） ---------- */
:root[data-look="space"] {
  --ink: #05060a;
  --ink-2: #0a0c14;
  --surface: rgb(var(--paper) / .08);
  --surface-dim: rgb(var(--paper) / .055);
  --surface-strong: rgb(var(--paper) / .14);
  --surface-faint: rgb(var(--paper) / .04);
  --card-a: rgb(24 28 42 / .72);
  --card-b: rgb(16 18 27 / .78);
  --card-blur: blur(36px) saturate(180%);
  --line: rgb(var(--paper) / .16);
}
/* 空间外观才给面板开毛玻璃。★只加在面板本身这种叶子节点上：带 backdrop-filter 的元素会变成
   里面 fixed 子元素的定位框，加在 .stage / .scene 上会把顶栏和底部按钮拽歪 */
:root[data-look="space"] :is(.tpanel, .into-fill, .badge, .netswitch, .lang) { backdrop-filter: var(--card-blur); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--fg); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.stage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: var(--ink); touch-action: pan-y; }
/* 静态颗粒：画一次就不动，不用混合模式 */
.grain { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: url(assets/art/grain.png); opacity: .045; }

/* ---------- 顶栏：只有 logo 和 CHN / ENG ---------- */
.bar {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) clamp(20px, 4vw, 48px) 0;
}
/* goat：猫和 0x4 要底部对齐。猫图标去掉了上下留白（cat-tight.svg，下巴贴底），两边都 flex-end */
.brand { display: flex; align-items: flex-end; gap: 10px; text-decoration: none; }
.brand-cat { height: 28px; width: auto; display: block; }
.brand-word { height: 17px; width: auto; display: block; }
.bar-right { display: flex; align-items: center; gap: 10px; }
/* 外观按钮：图标显示当前外观，点一下轮到下一个（theme.js 的 OX4Theme.next） */
.look {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  appearance: none; border: 0; cursor: pointer; border-radius: 999px;
  color: var(--faint); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .25s, background .25s;
}
.look:hover { color: var(--fg); }
.look-ic { width: 19px; height: 19px; display: block; }
.look-ic > g { display: none; }
:root[data-theme="dark"]:not([data-look="space"]) .ic-dark,
:root[data-theme="light"] .ic-light,
:root[data-look="space"] .ic-space { display: block; }

.lang {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 13px/1 var(--display); letter-spacing: .12em;
}
.lang span { color: var(--faint); font-weight: 400; }
.lang button {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 8px 10px; border-radius: 999px;
  color: var(--faint); letter-spacing: inherit; transition: color .25s, background .25s;
}
.lang button:hover { color: var(--fg); }
.lang button[aria-pressed="true"] { color: var(--ink); background: var(--pearl); }

/* ---------- 场景 ---------- */
.scenes { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity 1s ease; }

/* 背景图：进入时从 1.08 缓慢拉远到 1（只在当前页动） */
.bg { position: absolute; inset: 0; background: var(--ink-2) center / cover no-repeat; transform: scale(1.08); transition: transform 0s linear 1s, translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.scene.on .bg { transform: scale(1); transition: transform var(--dur, 7s) cubic-bezier(.25, .55, .3, 1), translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.bg { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -10px); }
.orbit, .mega-wrap { translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 9px); transition: translate .9s cubic-bezier(.2, .7, .2, 1); }
.bg-keys { background:
    radial-gradient(1.2px 1.2px at 12% 22%, rgb(var(--paper) / .5), transparent), radial-gradient(1px 1px at 28% 78%, rgb(var(--paper) / .4), transparent),
    radial-gradient(1.4px 1.4px at 46% 12%, rgb(var(--peach) / .45), transparent), radial-gradient(1px 1px at 58% 88%, rgb(var(--sky) / .4), transparent),
    radial-gradient(1.2px 1.2px at 88% 18%, rgb(var(--paper) / .45), transparent), radial-gradient(1px 1px at 94% 70%, rgb(var(--iris) / .5), transparent),
    radial-gradient(1.3px 1.3px at 38% 44%, rgb(var(--paper) / .3), transparent), radial-gradient(1px 1px at 76% 92%, rgb(var(--paper) / .35), transparent),
    radial-gradient(ellipse 40% 50% at 18% 80%, rgb(var(--peach) / .07), transparent 70%),
    radial-gradient(ellipse 55% 65% at 70% 52%, #231a42 0%, #0c0a16 58%, var(--ink) 100%); }

.veil { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 42% at 50% 44%, rgb(var(--ink-rgb) / .55), transparent 70%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .35) 0%, transparent 22%, transparent 66%, rgb(var(--ink-rgb) / .9) 100%); }
.veil-left { background:
    linear-gradient(90deg, rgb(var(--ink-rgb) / .94) 0%, rgb(var(--ink-rgb) / .72) 34%, rgb(var(--ink-rgb) / .12) 64%, transparent 80%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / .3) 0%, transparent 20%, transparent 72%, rgb(var(--ink-rgb) / .9) 100%); }
.veil-top { background:
    linear-gradient(180deg, rgb(var(--ink-rgb) / .88) 0%, rgb(var(--ink-rgb) / .5) 30%, transparent 52%, transparent 74%, rgb(var(--ink-rgb) / .88) 100%); }

/* 文字进场：逐行从下方升起 */
.rise > * { opacity: 0; transform: translateY(22px); }
.scene.on .rise > * { animation: rise .95s var(--ease) both; }
.scene.on .rise > h2 { animation: rise .95s var(--ease) both, pxWipe 1s steps(12) both; }
@keyframes pxWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.scene.on .rise > :nth-child(1) { animation-delay: .25s; }
.scene.on .rise > :nth-child(2) { animation-delay: .38s; }
.scene.on .rise > :nth-child(3) { animation-delay: .52s; }
.scene.on .rise > :nth-child(4) { animation-delay: .66s; }
.scene.on .rise > :nth-child(5) { animation-delay: .78s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- 1 首屏 ---------- */
.kline { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 3vh, 34px); padding: 0 16px 10vh;
}
.mega-wrap { position: relative; margin: 0; line-height: 0; }
.mega-wrap::before { /* 字后面的柔光：静态渐变，不用 filter */
  content: ''; position: absolute; inset: -30% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--iris) / .30), rgb(var(--sky) / .08) 55%, transparent);
}
.mega { display: block; width: min(74vw, 900px, 82vh); height: auto; overflow: visible; }
.s-hero.on .mega-wrap { animation: floaty 9s ease-in-out 1.6s infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }

.mega .px rect {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.2);
  transition: fill .5s ease;
}
.s-hero.on .mega .px rect { animation: pxIn 1.25s cubic-bezier(.2, 1.3, .35, 1) var(--d) both; }
@keyframes pxIn {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.2); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.mega .px rect.hot { fill: var(--hot); }
.mega .ghost { opacity: 0; mix-blend-mode: screen; }
.mega .ghost-c { fill: var(--ghost-c); }
.mega .ghost-m { fill: var(--ghost-m); }
.s-hero.on .mega .ghost-c { animation: glitchC 5.4s steps(1) 2.2s infinite; }
.s-hero.on .mega .ghost-m { animation: glitchM 5.4s steps(1) 2.2s infinite; }
@keyframes glitchC { 0%, 86%, 100% { opacity: 0; transform: none; } 87% { opacity: .75; transform: translate(-.26px, 0); } 89% { opacity: .5; transform: translate(.16px, .06px); } 91% { opacity: .8; transform: translate(-.1px, -.05px); } 93% { opacity: 0; } }
@keyframes glitchM { 0%, 86%, 100% { opacity: 0; transform: none; } 87% { opacity: .75; transform: translate(.26px, 0); } 89% { opacity: .5; transform: translate(-.16px, -.06px); } 91% { opacity: .8; transform: translate(.1px, .05px); } 93% { opacity: 0; } }
.mega .sweep { transform: skewX(-18deg) translateX(0); opacity: 0; }
.s-hero.on .mega .sweep { animation: sweep 4.8s ease-in-out 2s infinite; }
@keyframes sweep { 0% { opacity: .0; transform: skewX(-18deg) translateX(0); } 4% { opacity: .55; } 30% { opacity: .55; transform: skewX(-18deg) translateX(30px); } 31%, 100% { opacity: 0; transform: skewX(-18deg) translateX(30px); } }

/* goat 定：Friends, Token, Community，英文，像素字 Pixelify Sans，全部大写（9/29 从 10 种字体里选的 4 号） */
.tagline { margin: 0; font: 600 clamp(20px, 2.9vw, 42px)/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.tagline span { display: inline-block; background: var(--pearl); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .02em; overflow: hidden; vertical-align: bottom; }
.tagline i { font-style: normal; color: var(--tag-i); }
.tagline span, .tagline i { opacity: 0; transform: translateY(.35em); }
.scene.on .tagline span, .scene.on .tagline i { animation: rise 1s var(--ease) both; }
.s-hero.on .tagline :nth-child(1) { animation-delay: 1.15s; }
.s-hero.on .tagline :nth-child(2) { animation-delay: 1.3s; }
.s-hero.on .tagline :nth-child(3) { animation-delay: 1.45s; }
/* 「不仅如此」页：FRIENDS, TOKEN, COMMUNITY 放在那句话下面一排（goat 9/29） */
.tagline.tag-row { margin-top: 22px; font-size: clamp(18px, 2.2vw, 32px); }
.s-social.on .tag-row :nth-child(1) { animation-delay: .6s; }
.s-social.on .tag-row :nth-child(2) { animation-delay: .7s; }
.s-social.on .tag-row :nth-child(3) { animation-delay: .76s; }
.s-social.on .tag-row :nth-child(4) { animation-delay: .86s; }
.s-social.on .tag-row :nth-child(5) { animation-delay: .92s; }

/* ---------- 左文右图的通用版式 ---------- */
.split {
  position: absolute; inset: 0; z-index: 2; margin: 0 auto; max-width: 1440px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw;
  padding: 110px clamp(24px, 6vw, 96px) 176px;
}
.copy { max-width: 580px; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 13px/1 var(--display); letter-spacing: .2em; color: var(--faint); }
.kicker::after { content: ''; width: 56px; height: 1px; background: linear-gradient(90deg, rgb(var(--paper) / .45), transparent); }
h2 { margin: 0 0 20px; font: 600 clamp(32px, 4.1vw, 60px)/1.08 var(--display); letter-spacing: .005em; text-wrap: balance; }
h2 em {
  font-style: normal; padding-right: .04em;
  background: var(--pearl); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:lang(zh) h2 { letter-spacing: .01em; line-height: 1.16; }
.lede { margin: 0; max-width: 44ch; font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--sans); color: var(--mute); text-wrap: pretty; }
.lede.big { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; color: var(--fg); }

/* ---------- 2 多链：链 logo 轨道 ---------- */
.orbit { position: relative; justify-self: center; width: min(46vw, 640px, 70vh); aspect-ratio: 1; }
/* 背景图的中心亮点对准右边轨道中心（电脑端），左侧用渐隐接上底色 */
@media (min-width: 900px) {
  .s-chains .bg { left: 22%; right: -22%; -webkit-mask: linear-gradient(90deg, transparent 0, #000 26%); mask: linear-gradient(90deg, transparent 0, #000 26%); }
}
.orbit-glow { position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--iris) / .34), rgb(var(--sky) / .06) 60%, transparent 72%); }
.orbit svg.rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit svg.rings ellipse { fill: none; stroke: rgb(var(--paper) / .1); stroke-width: 1; }
.orbit-cat { position: absolute; left: 50%; top: 50%; z-index: 2; width: 23%; transform: translate(-50%, -50%); }
.s-chains.on .orbit-cat { animation: catBob 6s ease-in-out infinite; }
@keyframes catBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -56%); } }
.coin {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; overflow: hidden; background: #15121f;
  box-shadow: 0 8px 22px rgb(var(--shade) / .5), 0 0 0 1px rgb(var(--paper) / .16);
}
.coin img { display: block; width: 100%; height: 100%; }

/* 多链：网络切换胶囊（同一个钱包在几条链之间切换） */
.netswitch { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--paper) / .14); }
.ns-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px rgb(var(--up-rgb) / .16); }
.ns-track { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 9.5em; height: 26px; overflow: hidden; font: 600 15px/1 var(--display); letter-spacing: .04em; }
.ns-track .ns-item { position: absolute; left: 0; top: 0; height: 26px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: transform .55s var(--ease), opacity .55s; }
.ns-track .ns-item img { width: 22px; height: 22px; border-radius: 50%; }
.ns-track .ns-item.in { transform: none; opacity: 1; }
.ns-track .ns-item.out { transform: translateY(-100%); opacity: 0; }
.ns-track .ns-item.wait { transform: translateY(100%); opacity: 0; transition: none; }
.s-chains.on .s-chains.on 
/* ---------- 3 交易 ---------- */
.feats { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.feats li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; }
.feats h3 { margin: 2px 0 5px; font: 600 19px/1.3 var(--display); letter-spacing: .01em; }
.feats p { margin: 0; font: 400 14.5px/1.55 var(--sans); color: var(--mute); max-width: 50ch; }
.ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface-strong), var(--surface-faint));
  box-shadow: inset 0 0 0 1px rgb(var(--paper) / .13), 0 10px 30px rgb(var(--shade) / .35);
}
.ic svg { width: 40px; height: 40px; overflow: visible; }
.ic .st { fill: none; stroke: var(--ic-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic .up { stroke: var(--up); }
.ic .down { stroke: var(--down); }
.ic rect.up { fill: rgb(var(--up-rgb) / .16); }
.ic .thin { stroke-width: 1.5; opacity: .75; }
.ic .arc { stroke: var(--focus); }
.ic .coin-a { fill: rgb(var(--peach) / .16); stroke: #ffd3bb; stroke-width: 2; }
.ic .coin-b { fill: rgb(var(--sky) / .16); stroke: #a9e6ff; stroke-width: 2; }
.ic .core-a { fill: #ffd3bb; }
.ic .core-b { fill: #a9e6ff; }
.ic .dot { fill: var(--hot); }
.ic .dot2 { fill: #a9e6ff; }
.ic .tap { fill: none; stroke: var(--hot); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.s-trade.on .ic .tap { animation: tap 2.4s ease-out 1s infinite; }
@keyframes tap { 0% { opacity: .9; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.ic .knob { fill: var(--hot); }
.s-trade.on .ic .knob { animation: knob 3.2s ease-in-out infinite; }
@keyframes knob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }

/* 交易面板：现货 / 合约每 3.6 秒自动切换；没有任何价格数字，只有界面本身 */
.tp-wrap { position: relative; justify-self: end; width: min(34vw, 420px); }
.tpanel {
  position: relative; z-index: 2; padding: 16px; border-radius: 22px;
  background: linear-gradient(160deg, var(--card-a), var(--card-b));
  box-shadow: inset 0 0 0 1px rgb(var(--paper) / .12), 0 30px 80px rgb(var(--shade) / .55), 0 0 0 1px rgb(var(--shade) / .4);
  translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px); transition: translate .9s cubic-bezier(.2, .7, .2, 1);
  opacity: 0;
}
.s-trade.on .tpanel { animation: objIn 1s var(--ease) .45s both; }
.tp-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--surface); font: 600 15px/1 var(--display); letter-spacing: .04em; }
.tp-tab { position: relative; z-index: 1; padding: 9px 0; text-align: center; color: var(--faint); transition: color .4s; }
.tp-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: rgb(var(--iris) / .16); box-shadow: inset 0 0 0 1px rgb(var(--iris) / .35); transition: transform .5s var(--ease); }
.tpanel[data-mode="spot"] .t-spot, .tpanel[data-mode="perp"] .t-perp { color: var(--fg); }
.tpanel[data-mode="perp"] .tp-ind { transform: translateX(100%); }
.tp-chart { display: block; width: 100%; height: 118px; margin: 12px 0 10px; }
.tp-chart .c-up { fill: rgb(var(--up-rgb) / .85); } .tp-chart .c-dn { fill: rgb(var(--down-rgb) / .8); }
.tp-chart .wk-up { stroke: rgb(var(--up-rgb) / .8); } .tp-chart .wk-dn { stroke: rgb(var(--down-rgb) / .75); }
.tp-chart .ma { fill: none; stroke: var(--focus); stroke-width: 1.6; opacity: .9; }
.tp-chart .area { fill: url(#tpArea); }
.tp-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 600 15px/1 var(--display); }
.sd { padding: 11px 0; text-align: center; border-radius: 11px; background: var(--surface); color: var(--faint); }
.sd-a { background: rgb(var(--up-rgb) / .14); color: var(--up); box-shadow: inset 0 0 0 1px rgb(var(--up-rgb) / .4); }
.tp-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; font: 500 13px/1 var(--display); }
.tp-chips span { padding: 8px 0; text-align: center; border-radius: 9px; background: var(--surface-dim); color: var(--faint); box-shadow: inset 0 0 0 1px rgb(var(--paper) / .07); transition: all .35s; }
.tp-chips span.on { color: var(--fg); background: rgb(var(--iris) / .14); box-shadow: inset 0 0 0 1px rgb(var(--iris) / .4); }
.tp-go { margin-top: 12px; padding: 14px 0; text-align: center; border-radius: 13px; font: 600 17px/1 var(--display); letter-spacing: .06em; color: #062a1d; background: linear-gradient(180deg, #9ff9d2, #58e0a6); box-shadow: 0 10px 30px rgba(88, 224, 166, .25); }
.s-trade.on .tp-go { animation: goPulse 2.4s ease-in-out 1.6s infinite; }
@keyframes goPulse { 0%, 100% { transform: scale(1); } 8% { transform: scale(.97); } 16% { transform: scale(1); } }
.tpanel .m-perp { display: none; }
.tpanel[data-mode="perp"] .m-spot { display: none; }
.tpanel[data-mode="perp"] .m-perp { display: revert; }
.tpanel[data-mode="perp"] .tp-chips.m-perp { display: grid; }
.tp-route { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(var(--paper) / .08); }
.tp-route img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.rt-line { position: relative; flex: 1; height: 2px; border-radius: 1px; background: rgb(var(--paper) / .12); overflow: hidden; }
.rt-line i { position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--focus), transparent); transform: translateX(-100%); }
.s-trade.on .rt-line i { animation: route 1.8s linear infinite; }
.s-trade.on .rt-line + img + .rt-line i { animation-delay: .9s; }
@keyframes route { to { transform: translateX(340%); } }
.s-trade.on 
/* ---------- 4 密钥 ---------- */
.key-art { position: relative; justify-self: center; width: min(40vw, 580px, 62vh); aspect-ratio: 1; }
.key-art::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--iris) / .22), rgb(var(--peach) / .07) 50%, transparent 75%); }
.key-halo {
  position: absolute; inset: 12%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(var(--peach) / .0), rgb(var(--peach) / .35), rgb(var(--iris) / .0) 35%, rgb(var(--sky) / .3) 60%, rgb(var(--peach) / .0) 80%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89%, #000 100%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 88%, #000 89%, #000 100%, transparent 100%);
}
.s-keys.on .key-halo { animation: turn 14s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.key { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 14px); transition: translate .9s cubic-bezier(.2, .7, .2, 1); }
/* 钥匙外圈：一圈不停变换的加密字符 */
.cipher { position: absolute; inset: -4%; width: 108%; height: 108%; overflow: visible; }
.cipher text { font: 500 7px var(--display); fill: rgb(var(--iris) / .55); text-anchor: middle; dominant-baseline: middle; }
.cipher text.hot { fill: var(--hot); }
.s-keys.on .cipher { animation: turn 60s linear infinite reverse; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--paper) / .12); font: 600 15px/1 var(--display); letter-spacing: .03em; }
.badge b { font-weight: 600; }
.bi { width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--pearl); -webkit-mask: var(--m) center / 18px no-repeat; mask: var(--m) center / 18px no-repeat; }
.bi-face { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2M9 9v1M15 9v1M12 9v4h-1M9 16c1.7 1.3 4.3 1.3 6 0'/%3E%3C/svg%3E"); }
.bi-lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3M12 15v2'/%3E%3C/svg%3E"); }
.s-keys.on .key { animation: keyFloat 8s ease-in-out infinite; }
@keyframes keyFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(-2deg); } }

/* ---------- 5 交易与社交 ---------- */
.social-copy {
  position: absolute; z-index: 2; left: 50%; top: clamp(92px, 14vh, 150px); transform: translateX(-50%);
  width: min(92vw, 940px); text-align: center; display: flex; flex-direction: column; align-items: center;
}
.social-copy .kicker::before { content: ''; width: 56px; height: 1px; background: linear-gradient(270deg, rgb(var(--paper) / .45), transparent); }
.social-copy h2 { font-size: clamp(40px, 5.6vw, 84px); }
.social-copy .lede { max-width: 40ch; color: var(--fg); opacity: .86; text-wrap: balance; }
/* 漂浮的玻璃物件（BytePlus 生成、黑底转透明）。只动 transform；视差用独立的 translate 属性叠加，不和漂浮动画抢 */
.objs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.float-obj { position: absolute; display: block; height: auto; opacity: 0; translate: calc(var(--px, 0) * var(--d, 12px)) calc(var(--py, 0) * var(--d, 12px)); transition: translate .9s cubic-bezier(.2, .7, .2, 1); }
.scene.on .float-obj { animation: objIn 1.1s var(--ease) both, drift 9s ease-in-out infinite; }
@keyframes objIn { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes drift { 0%, 100% { rotate: 0deg; } 50% { rotate: 5deg; } }
.so-chat { left: 7vw; top: 38vh; width: clamp(90px, 10vw, 160px); --d: 26px; }
.so-heart { right: 9vw; top: 26vh; width: clamp(70px, 7.5vw, 120px); --d: 18px; }
.so-gift { left: 19vw; bottom: 17vh; width: clamp(80px, 8.5vw, 136px); --d: 34px; }
.so-live { right: 17vw; bottom: 20vh; width: clamp(90px, 9.5vw, 150px); --d: 30px; }
.s-social.on .so-chat { animation-delay: .5s, 1.6s; }
.s-social.on .so-heart { animation-delay: .7s, 2.4s; animation-duration: 1.1s, 7.5s; }
.s-social.on .so-gift { animation-delay: .9s, 3s; animation-duration: 1.1s, 10s; }
.s-social.on .so-live { animation-delay: 1.1s, 2s; animation-duration: 1.1s, 8.5s; }
.so-gift { filter: blur(1.5px); }   /* 最近的一层稍虚，拉出景深（静态滤镜，只做一次） */

/* 产品名不走像素字（2026-10-25 goat：像素字里的 Z 看久了像 2） */
.wm { font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: 0; }

/* ---------- 5 智能体：它写的交易单，下半截压着主人的规则（2026-10-25 换掉小精灵那屏） ---------- */
.ic .band { fill: rgb(var(--iris) / .16); stroke: var(--focus); stroke-width: 1.4; }
.ic .lk { fill: none; stroke: var(--focus); stroke-width: 2; stroke-linecap: round; }
a.badge { text-decoration: none; color: inherit; transition: background .3s, box-shadow .3s; }
a.badge:hover { background: rgb(var(--iris) / .12); box-shadow: inset 0 0 0 1px rgb(var(--iris) / .4); }
.bi-go { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 12h6M12.5 9l3 3-3 3'/%3E%3C/svg%3E"); }

.ap-wrap { position: relative; justify-self: end; width: min(34vw, 420px); }
.apanel {
  position: relative; z-index: 2; padding: 16px; border-radius: 22px;
  background: linear-gradient(160deg, var(--card-a), var(--card-b));
  box-shadow: inset 0 0 0 1px rgb(var(--paper) / .12), 0 30px 80px rgb(var(--shade) / .55), 0 0 0 1px rgb(var(--shade) / .4);
  translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px); transition: translate .9s cubic-bezier(.2, .7, .2, 1);
  opacity: 0;
}
.s-agent.on .apanel { animation: objIn 1s var(--ease) .45s both; }

.ap-cap { margin: 0 0 10px; display: flex; align-items: center; gap: 9px; font: 500 12px/1 var(--display); letter-spacing: .14em; color: var(--faint); }
.ap-cap::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(var(--paper) / .16), transparent); }
.ap-cap i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--pearl); }
.ap-cap.you i { background: rgb(var(--fg-rgb) / .45); }

.ap-chart { display: block; width: 100%; height: 104px; margin: 0 0 12px; }
.ap-chart .c-up { fill: rgb(var(--up-rgb) / .85); }
.ap-chart .c-dn { fill: rgb(var(--down-rgb) / .8); }
.ap-chart .wk-up { stroke: rgb(var(--up-rgb) / .8); }
.ap-chart .wk-dn { stroke: rgb(var(--down-rgb) / .75); }
.ap-chart .ma { fill: none; stroke: var(--focus); stroke-width: 1.6; opacity: .9; }
.ap-chart .zone { fill: rgb(var(--iris) / .22); }
.ap-chart .zline { stroke: var(--focus); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .95; }
.ap-chart .stop { stroke: var(--down); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .9; transition: opacity .4s; }
.ap-chart .last-ring { fill: none; stroke: var(--fg); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.s-agent.on .ap-chart .last-ring { animation: tap 1.8s ease-out infinite; }

.ap-row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 8px; }
.ap-k { font: 500 13px/1 var(--display); letter-spacing: .06em; color: var(--faint); }
.ap-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 600 14px/1 var(--display); }
.ap-side b { padding: 9px 0; text-align: center; border-radius: 10px; font-weight: 600;
  background: var(--surface); color: var(--faint); transition: background .45s, color .45s, box-shadow .45s; }
.ap-side b.on { background: rgb(var(--up-rgb) / .14); color: var(--up); box-shadow: inset 0 0 0 1px rgb(var(--up-rgb) / .4); }
.ap-side b.on.dn { background: rgb(var(--down-rgb) / .14); color: var(--down); box-shadow: inset 0 0 0 1px rgb(var(--down-rgb) / .4); }

.ap-slot { display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px;
  background: var(--surface-dim); box-shadow: inset 0 0 0 1px rgb(var(--paper) / .08); }
.ap-slot svg { display: block; width: 100%; height: 14px; overflow: visible; }
.ap-slot svg.fit { width: 44px; height: 17px; flex: none; }
.ap-slot .bracket { fill: none; stroke: var(--focus); stroke-width: 1.6; stroke-linecap: round; }
.ap-slot .bubble { fill: none; stroke: rgb(var(--fg-rgb) / .85); stroke-width: 1.4; stroke-linejoin: round; }
.ap-slot .dots { fill: var(--focus); }
.ap-slot .stopline { fill: none; stroke: var(--down); stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }

.ap-sep { height: 1px; margin: 16px 0 14px; background: rgb(var(--paper) / .08); }
.ap-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font: 500 13px/1 var(--display); }
.ap-chips span { padding: 8px 0; text-align: center; border-radius: 9px; background: var(--surface-dim);
  color: var(--faint); box-shadow: inset 0 0 0 1px rgb(var(--paper) / .07); }
.ap-chips span.on { color: var(--fg); background: rgb(var(--iris) / .14); box-shadow: inset 0 0 0 1px rgb(var(--iris) / .4); }

/* ---------- 底部：Into the 0x4（永远居中）+ 轮播进度 ---------- */
.dock {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
}
.dock > * { pointer-events: auto; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.into {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 30px 0 34px; border-radius: 999px; text-decoration: none; color: var(--on-into);
  font: 600 19px/1 var(--display); letter-spacing: .05em; white-space: nowrap;
  transition: transform .4s var(--ease);
}
.into-border {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--a), #ffd3bb, #d7c9ff, #a9e6ff, #7ef5c1, #ffd3bb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: spin 4.5s linear infinite;
}
@keyframes spin { to { --a: 360deg; } }
.into-fill { position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 1px 0 rgb(var(--paper) / .2); }
.into::after {
  content: ''; position: absolute; inset: -16px -10px; z-index: -2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--iris) / .38), transparent); opacity: .7; transition: opacity .35s;
}
.into:hover { transform: translateY(-2px) scale(1.02); }
.into:hover::after { opacity: 1; }
.into-label { background: linear-gradient(90deg, var(--on-into) 0%, var(--on-into) 40%, var(--into-shine) 50%, var(--on-into) 60%, var(--on-into) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: labelShine 5s ease-in-out infinite; }
@keyframes labelShine { 0%, 60% { background-position: 100% 0; } 90%, 100% { background-position: -50% 0; } }
.into-arrow { width: 14px; height: 14px; fill: var(--on-into); transition: transform .3s steps(3); }
.into:hover .into-arrow { transform: translateX(5px); }

.dots { display: flex; gap: 6px; }
.dots button { appearance: none; border: 0; background: none; cursor: pointer; padding: 10px 0; width: 34px; }
.dots button:focus-visible { outline: none; }
.dots button:focus-visible i { box-shadow: 0 0 0 2px rgb(var(--iris) / .6); }
.dots i { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: rgb(var(--paper) / .18); }
.dots i::after { content: ''; display: block; height: 100%; background: var(--hot); transform: scaleX(0); transform-origin: left; }
.dots button.done i::after { transform: scaleX(1); opacity: .5; }
.dots button.cur i::after { animation: fill var(--dur, 7s) linear forwards; }
.paused .dots button.cur i::after { animation-play-state: paused; }
/* 用户接手后不再自动翻页：当前进度条直接填满，不再走进度 */
.manual .dots button.cur i::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

/* ---------- 密钥页动效（goat 9/29：背景太空）：金库门背景对准钥匙、扫描光环、刷脸扫描线、上浮像素光点 ---------- */
@media (min-width: 900px) {
  .s-keys .bg { left: 8%; right: -8%; -webkit-mask: linear-gradient(90deg, transparent 0, #000 22%); mask: linear-gradient(90deg, transparent 0, #000 22%); }
}
.pulse { position: absolute; left: 50%; top: 50%; width: 56%; aspect-ratio: 1; margin: -28% 0 0 -28%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--iris) / .55), 0 0 24px rgb(var(--iris) / .18); opacity: 0; pointer-events: none; }
.s-keys.on .pulse { animation: pulseOut 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.s-keys.on .p2 { animation-delay: 1.2s; } .s-keys.on .p3 { animation-delay: 2.4s; }
@keyframes pulseOut { 0% { opacity: 0; transform: scale(.55); } 12% { opacity: .75; } 100% { opacity: 0; transform: scale(1.5); } }
.scanline { position: absolute; inset: 16%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.scanline::before { content: ''; position: absolute; inset: 0; transform: translateY(-60%); background: linear-gradient(180deg, rgba(185, 236, 255, 0) 40%, rgba(185, 236, 255, .06) 47%, rgba(225, 245, 255, .7) 50%, rgba(185, 236, 255, .06) 53%, rgba(185, 236, 255, 0) 60%); }
.s-keys.on .scanline::before { animation: faceScan 4.2s ease-in-out 1s infinite; }
@keyframes faceScan { 0% { transform: translateY(-60%); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(60%); opacity: 1; } 55%, 100% { transform: translateY(60%); opacity: 0; } }
.motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; bottom: -10px; width: var(--z, 3px); height: var(--z, 3px); background: #e8e0ff; border-radius: 1px; opacity: 0; box-shadow: 0 0 6px rgb(var(--iris) / .8); }
.scene.on .motes i { animation: moteUp var(--t, 12s) linear var(--dl, 0s) infinite; }
@keyframes moteUp { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: var(--o, .7); } 85% { opacity: var(--o, .7); } 100% { opacity: 0; transform: translate(var(--dx, 20px), -70vh); } }

/* ---------- 不仅如此页：3D 照片（深度图视差，WebGL 一层全屏着色器；不支持时退回普通背景图）+ 猫咪币雨 ---------- */
.photo3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.photo3d.ready { opacity: 1; }
.s-social.has3d .bg { visibility: hidden; }
.rain { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.rain img { position: absolute; top: -12vh; left: var(--x); width: var(--w); height: auto; opacity: 0; filter: var(--f, none); }
.s-social.on .rain img { animation: coinFall var(--t) linear var(--dl) infinite; }
@keyframes coinFall { 0% { opacity: 0; transform: translate(0, 0) rotate(var(--r0)); } 8% { opacity: var(--o); } 88% { opacity: var(--o); } 100% { opacity: 0; transform: translate(var(--dx), 128vh) rotate(var(--r1)); } }

/* ---------- 不仅如此页动效：夜空光斑（画布）、珍珠色扫光、直播点赞飘心 ---------- */
.bokeh { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.sheen { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.sheen::before { content: ''; position: absolute; top: -50%; left: 0; width: 38%; height: 200%; transform: translateX(-160%) rotate(16deg); background: linear-gradient(90deg, transparent, rgba(255, 228, 214, .08) 30%, rgba(222, 210, 255, .13) 50%, rgba(190, 236, 255, .08) 70%, transparent); }
.s-social.on .sheen::before { animation: sheen 7.5s ease-in-out 1.5s infinite; }
@keyframes sheen { 0% { transform: translateX(-160%) rotate(16deg); } 55%, 100% { transform: translateX(330%) rotate(16deg); } }
.likes { position: absolute; right: calc(17vw + 30px); bottom: calc(20vh + 90px); width: 90px; height: 0; }
.likes img { position: absolute; left: var(--x, 30px); bottom: 0; width: var(--w, 34px); height: auto; opacity: 0; animation: likeUp var(--t, 2.6s) cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes likeUp { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 10px), -220px) scale(1.05) rotate(var(--r, 8deg)); } }

/* Into the 0x4 过场：按钮处的光铺满屏幕，当前页往前放大淡出（旧版首页的效果，goat 点名要回来） */
.warp-portal {
  position: fixed; z-index: 200; width: 80px; height: 80px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--hot) 0%, var(--ic-line) 35%, rgb(var(--iris)) 70%, rgb(var(--iris) / .78) 100%);
  transform: translate(-50%, -50%) scale(0); animation: warp-bloom .72s cubic-bezier(.55, 0, .75, .35) forwards;
}
@keyframes warp-bloom { to { transform: translate(-50%, -50%) scale(var(--s, 40)); } }
.warping .scene.on .hero-center, .warping .scene.on .split, .warping .scene.on .social-copy, .warping .scene.on .objs { transition: transform .8s cubic-bezier(.7, 0, .84, 0), opacity .7s ease-in; transform: scale(1.6); opacity: 0; }
.warping .scene.on .kline, .warping .scene.on .bg { transition: transform .8s cubic-bezier(.7, 0, .84, 0), opacity .7s ease-in; transform: scale(1.3); opacity: 0; }
.warping .bar, .warping .dots { transition: opacity .35s ease-in; opacity: 0; }

/* 不在当前页的动画一律暂停（兜底） */
.scene:not(.on) * { animation-play-state: paused !important; }

/* ---------- 手机 / 窄屏 ---------- */
@media (max-width: 899px) {
  .bar { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
  .brand-cat { height: 24px; }
  .brand-word { height: 15px; }
  .split {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 22px;
    padding: 76px 20px 152px;
  }
  .split > .art { order: -1; }
  .copy { max-width: none; }
  .kicker { margin-bottom: 12px; }
  h2 { font-size: clamp(27px, 7.8vw, 40px); margin-bottom: 12px; }
  .lede { font-size: 15px; }
  .lede.big { font-size: 20px; }
  .veil-left { background: linear-gradient(180deg, rgb(var(--ink-rgb) / .35) 0%, transparent 16%, rgb(var(--ink-rgb) / .7) 38%, rgb(var(--ink-rgb) / .92) 60%, rgb(var(--ink-rgb) / .96) 100%); }
  .s-trade .veil-left { background: linear-gradient(180deg, rgb(var(--ink-rgb) / .4) 0%, rgb(var(--ink-rgb) / .78) 24%, rgb(var(--ink-rgb) / .9) 50%, rgb(var(--ink-rgb) / .96) 100%); }
  .mega { width: 86vw; }
  .tagline { font-size: clamp(16px, 5.4vw, 26px); letter-spacing: .05em; }
  .tagline.tag-row { margin-top: 14px; font-size: clamp(14px, 4.4vw, 20px); }
  .orbit { width: min(80vw, 38svh); }
  .s-trade .feats p { display: none; }
  .s-trade .feats { gap: 10px; }
  .feats { margin-top: 18px; gap: 14px; }
  .feats li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .ic { width: 44px; height: 44px; border-radius: 12px; }
  .ic svg { width: 30px; height: 30px; }
  .feats h3 { font-size: 16.5px; margin-top: 1px; }
  .feats p { font-size: 13.5px; }
  .key-art { width: min(66vw, 34svh); }
  .social-copy { top: 84px; }
  .social-copy h2 { font-size: clamp(34px, 10vw, 48px); }
  .so-chat { left: 4vw; top: auto; bottom: 30svh; width: 78px; }
  .so-heart { right: 5vw; top: auto; bottom: 40svh; width: 60px; }
  .so-gift { left: 30vw; bottom: 17svh; width: 64px; }
  .so-live { right: 8vw; bottom: 19svh; width: 72px; }
  .likes { right: calc(8vw + 10px); bottom: calc(19svh + 60px); }
  .likes img { --w: 24px; }
  .netswitch { margin-top: 16px; }
  .tp-wrap { justify-self: center; width: min(88vw, 360px); }
  .tpanel { padding: 12px; }
  .tp-chart { height: 72px; margin: 8px 0; }
  .tp-route,   .badges { margin-top: 16px; }
  .s-agent .feats p { display: none; }
  .ap-wrap { justify-self: center; width: min(88vw, 360px); }
  .apanel { padding: 12px; }
  .ap-cap { margin-bottom: 8px; font-size: 11px; }
  .ap-chart { height: 58px; margin-bottom: 8px; }
  .ap-row { margin-top: 6px; }
  .ap-k { font-size: 12px; }
  .ap-side b { padding: 8px 0; font-size: 13px; }
  .ap-slot { height: 30px; }
  .ap-chips span { padding: 7px 0; }
  .ap-sep { margin: 12px 0 10px; }
  /* 窄屏一屏放不下六行：留下它的方案 + 一行杠杆，分工靠左边两条说明讲 */
  .ap-row.r-stop, .ap-row.r-size { display: none; }
  .into { height: 54px; font-size: 17px; padding: 0 26px 0 30px; }
  .dock { gap: 10px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
}
/* 矮屏（小手机、横屏笔记本浏览器窗口）收掉次要内容，保证一屏放得下 */
@media (max-height: 760px) and (max-width: 899px) {
  .feats p { display: none; }
  .ap-row.r-why { display: none; }
  .orbit { width: min(72vw, 32svh); }
  .key-art { width: min(56vw, 28svh); }
}
@media (max-height: 640px) and (max-width: 899px) {
  .caveat, .s-agent .kicker, .s-chains .kicker, .s-trade .kicker, .s-keys .kicker { display: none; }
}
@media (min-width: 900px) and (max-height: 720px) {
  .split { padding-top: 88px; padding-bottom: 150px; }
  h2 { font-size: clamp(30px, 3.6vw, 52px); }
  .feats p { display: none; }
  .caveat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .warp-portal { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scene { transition: opacity .01ms, visibility 0s; }
  .bg, .scene.on .bg { transform: none; }
}