/* 对照参考站的窄屏布局；电商素材统一从 config.js 与 assets/ 加载。 */
:root { --page-width:25vw; --background-columns:1; --accent:#ff58a0; --cream:#e5d2bd; color-scheme:dark; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
/* 背景独立铺满页面；图片和黑色遮罩使用同一尺寸，每一排都有自己的上下渐隐。 */
html { background-color:#000; }
body {
  --background-tile-width:calc(100vw / var(--background-columns));
  --background-tile-height:calc(var(--background-tile-width) * 1624 / 750);
  min-width:280px; min-height:100vh; min-height:100svh; background-color:#000; color:#fff;
  background-image:
    linear-gradient(to bottom,
      #000 19%, rgb(0 0 0 / .845) 27%, rgb(0 0 0 / .483) 37%,
      rgb(0 0 0 / .07) 48%, transparent 55%, rgb(0 0 0 / .172) 66%,
      rgb(0 0 0 / .586) 74%, #000 83%),
    var(--background-image,none);
  background-position:left top;
  background-size:var(--background-tile-width) var(--background-tile-height);
  background-repeat:no-repeat;
}
@media(min-width:769px) { :root { --background-columns:2; } body { background-repeat:repeat; } }
@media(min-width:1025px) { :root { --background-columns:5; } }
button, .download-link { font:inherit; color:inherit; cursor:pointer; border:0; background:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.download-link { text-decoration:none; }
button:focus-visible, .download-link:focus-visible, .carousel:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button, .download-link { transition:opacity 150ms; } button:hover, .download-link:hover { opacity:.82; } button:active, .download-link:active { opacity:.62; }
img { display:block; max-width:100%; } button img, .download-link img { pointer-events:none; }
.page-shell { width:var(--page-width); margin:auto; min-height:100vh; min-height:100svh; position:relative; padding-bottom:120px; }
.header { display:flex; align-items:center; justify-content:space-between; padding:1vw; padding-bottom:calc(1vw + 5.5px); gap:12px; }
.brand { display:flex; align-items:center; gap:.75vw; min-width:0; }
.logo { height:3vw; width:auto; flex-shrink:0; }
.brand-name { font-size:1.25vw; font-weight:600; line-height:1.2; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header nav { display:flex; align-items:center; gap:.5vw; transform:translateY(2.75px); flex-shrink:0; }
.header nav button { min-height:44px; display:flex; align-items:center; }
.header nav button[hidden] { display:none; }
.header nav img { height:3vw; width:auto; }
.header nav button:nth-child(-n+2) img { width:2.4vw; object-fit:contain; }
/* 两行标题及渐变使用本地图片，按图片原始比例显示。 */
.headline { width:90%; height:auto; margin:0 auto 5.5px; }
/* 轮播独立于页面栏宽居中，按视口断点缩放；图片高度随原始比例变化。 */
.carousel { width:507px; left:50%; transform:translateX(-50%); overflow:hidden; position:relative; touch-action:pan-y; padding-bottom:12px; }
.carousel-track { display:flex; transition:transform 400ms ease; will-change:transform; }
.slide { flex:0 0 100%; width:100%; list-style:none; text-align:center; }
.slide img { width:100%; height:auto; user-select:none; -webkit-user-drag:none; margin:auto; }
@media(max-width:768px) { .carousel { width:100vw; } }
@media(max-width:390px) { .carousel { width:85vw; } }
.download-bar { position:fixed; width:var(--page-width); bottom:0; left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; justify-content:space-between; padding:1vw; padding-bottom:max(1vw,env(safe-area-inset-bottom)); z-index:5; background:linear-gradient(transparent,#000 24%); }
.qr-container { flex-shrink:0; display:flex; align-items:center; flex-direction:column; gap:5px; }
.qr-container span { font-size:12px; white-space:nowrap; }
#qr-code { border:2px solid var(--accent); border-radius:5px; background:white; padding:4px; width:80px; height:80px; }
#qr-code img { width:100%; height:100%; display:block; image-rendering:pixelated; }
.platform-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; flex:1; align-items:center; }
.platform-buttons .download-link { width:100%; min-width:0; min-height:44px; display:flex; align-items:center; }
.platform-buttons img { width:100%; height:auto; }
dialog { border:0; padding:0; color:#171719; color-scheme:light; }
/* 无原生 dialog 的浏览器也不会提前展示关闭状态的弹层。 */
dialog:not([open]) { display:none; }
.dialog-backdrop { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.5); z-index:9998; }
dialog.dialog-fallback[open] { display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; z-index:9999; }
dialog::backdrop { background:rgb(0 0 0 / .62); }
/* 对齐参考浮层：图片自带边框、图标和文案，不再额外绘制按钮样式。 */
.more-dialog { --more-padding:1.5vw; --more-gap:1vw; --more-button-width:20vw; --more-title-size:1.25vw; width:var(--page-width); max-width:90vw; margin:auto; border-radius:15px; overflow:hidden; background:#fff; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
.more-dialog::backdrop { background:rgb(0 0 0 / .5); }
.more-menu { display:flex; flex-direction:column; gap:var(--more-gap); align-items:center; padding:var(--more-padding); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.more-menu h2 { flex-shrink:0; color:#333; font-size:var(--more-title-size); line-height:.958; font-weight:700; white-space:nowrap; text-align:center; }
.more-menu h2:focus { outline:none; }
.more-menu>button { flex-shrink:0; width:var(--more-button-width); max-width:100%; }
.more-menu>button img { width:100%; height:auto; }
.toast { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); background:rgb(20 20 20 / .95); color:white; padding:15px 24px; border:1px solid #555; border-radius:7px; font-size:14px; line-height:1.6; max-width:90vw; width:max-content; z-index:100; text-align:center; pointer-events:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.noscript { text-align:center; padding:20px; }
@media(min-width:769px) and (max-width:1024px) { :root { --page-width:65vw; }.logo,.header nav img { height:8vw; }.header nav button:nth-child(-n+2) img { width:6.4vw; }.more-dialog { --more-padding:3.5vw; --more-gap:3vw; --more-button-width:56vw; --more-title-size:3.75vw; } }
@media(max-width:768px) { :root { --page-width:100vw; }.page-shell { min-height:750px; min-height:max(750px,100vh); min-height:max(750px,100svh); }.header { padding:3vw; padding-top:max(3vw,env(safe-area-inset-top)); padding-bottom:calc(3vw + 5.5px); }.logo { height:15vw; }.header nav { gap:2vw; }.header nav img { height:14vw; }.header nav button:nth-child(-n+2) img { width:11.2vw; }.download-bar { gap:3vw; padding:1vw; padding-bottom:max(1vw,env(safe-area-inset-bottom)); }.platform-buttons { gap:3vw; }#qr-code { width:76px; height:76px; }.more-dialog { width:90vw; --more-padding:5vw; --more-gap:3vw; --more-button-width:80vw; --more-title-size:5vw; }}
@media(min-width:769px) and (max-width:1024px) { .brand { gap:2vw; }.brand-name { font-size:3.25vw; } }
@media(max-width:768px) { .brand { gap:3vw; }.brand-name { font-size:6vw; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }