:root { color-scheme:dark; font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; background:#000; color:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; min-height:100svh; background:#000; }
[hidden] { display:none !important; }
a { color:inherit; }
a:focus-visible { outline:3px solid #fff; outline-offset:5px; }
.landing-frame { position:relative; isolation:isolate; min-height:100svh; background:#101112; overflow:hidden; }
.landing-nav { position:absolute; z-index:2; top:max(64px,env(safe-area-inset-top)); left:34px; }
.landing-logo { display:inline-flex; align-items:center; gap:4px; text-decoration:none; }
.landing-logo img { display:block; object-fit:contain; }
.brand-mark { width:48px; height:34px; }
.brand-wordmark { width:100px; height:34px; }
.landing-hero { position:relative; min-height:100svh; padding:62svh 24px max(80px,env(safe-area-inset-bottom)); }
.landing-copy { position:relative; z-index:1; min-width:0; width:100%; max-width:480px; margin:auto; text-align:center; text-shadow:0 2px 16px #0008; }
h1 { font-size:20px; font-weight:600; line-height:28px; margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.landing-description { margin:4px 0 0; font-size:14px; line-height:24px; color:#aaa; white-space:pre-line; overflow-wrap:anywhere; }
.landing-description p { margin:0; }
.landing-description .description-highlight { color:#fff; font-size:20px; line-height:28px; font-weight:600; }
.actions { display:grid; gap:12px; margin:18px auto 0; width:100%; max-width:310px; text-shadow:none; }
.action { min-height:58px; display:flex; gap:6px; align-items:center; justify-content:center; text-align:center; padding:16px 24px; border-radius:32px; background:#ff4747; font-size:16px; font-weight:600; text-decoration:none; line-height:24px; overflow-wrap:anywhere; }
.action:hover { background:#ff5c5c; }
.action:active { background:#e93b3b; }
.action-arrow { flex:none; font-size:20px; font-weight:400; }
.action.secondary { min-height:50px; background:#151515; border:1px solid #555; font-size:14px; }
.action.secondary:hover { background:#292929; }
.landing-hint { margin:18px 0 0; color:#999; font-size:10px; line-height:16px; letter-spacing:.4px; }
.landing-contact { display:inline-block; padding:14px 8px; margin-top:4px; font-size:12px; color:#bbb; text-decoration:none; }
.landing-contact:hover { color:#fff; text-decoration:underline; }
.collage-zone { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* 用户确认手机上图下文、桌面左图右文；同一份模板使用真实封面，不复制图片凑数。 */
.collage-zone::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 25% 25%,#54362685,transparent 58%),radial-gradient(ellipse at 60% 5%,#4c1a2080,transparent 65%),radial-gradient(ellipse at 90% 85%,#123b2b50,transparent 60%); }
.covers { --columns:4; --rows:3; position:absolute; top:78px; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); grid-template-rows:repeat(var(--rows),minmax(0,1fr)); gap:4px; width:100%; height:56svh; max-height:580px; mask-image:linear-gradient(180deg,transparent,#000 18%,#000 60%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-composite:intersect; }
.covers[data-count="0"] { display:none; }
.covers[data-count="1"] { --columns:1; --rows:1; max-width:460px; }
.covers[data-count="2"] { --columns:2; --rows:1; }
.covers[data-count="3"] { --columns:3; --rows:1; }
.covers[data-count="4"] { --columns:2; --rows:2; }
.covers[data-count="5"],.covers[data-count="6"] { --columns:3; --rows:2; }
.covers[data-count="7"],.covers[data-count="8"] { --columns:4; --rows:2; }
.covers[data-count="9"] { --columns:3; --rows:3; }
.cover-tile { position:relative; min-width:0; min-height:0; overflow:hidden; }
.cover-tile img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.covers[data-count="1"] .cover-tile img { object-fit:cover; object-position:center 30%; }
.cover-empty { width:100%; height:100%; background:radial-gradient(ellipse at 25% 35%,#25131b,transparent 65%); }
.unavailable { width:min(620px,100%); min-height:100svh; margin:auto; padding:48px 24px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.unavailable h1 { font-size:clamp(26px,5vw,40px); line-height:1.3; }
.unavailable p { line-height:1.8; color:#aaa; }
.unavailable-mark { font-size:90px; color:#ff4747; }
@media(min-width:900px) {
  .landing-frame { max-width:1920px; margin:auto; }
  .landing-nav { top:clamp(96px,22svh,180px); left:54.5%; }
  .brand-mark { width:62px; height:44px; }
  .brand-wordmark { width:128px; height:44px; }
  .landing-hero { display:grid; grid-template-columns:1fr 1fr; padding:clamp(162px,31svh,256px) 5% max(72px,env(safe-area-inset-bottom)); }
  .landing-copy { grid-column:2; margin:0; padding-left:10%; max-width:640px; text-align:left; }
  h1 { font-size:clamp(28px,3.1vw,44px); line-height:1.25; }
  .landing-description { font-size:22px; line-height:32px; margin-top:12px; }
  .description-continuation { padding-top:clamp(36px,10svh,90px); }
  .description-continuation + .description-continuation { padding-top:0; }
  .landing-description .description-highlight { font-size:clamp(28px,3.1vw,42px); line-height:1.3; margin-top:6px; }
  .actions { margin:30px 0 0; max-width:330px; }
  .action { font-size:20px; }
  .landing-hint { font-size:12px; }
  .covers { top:6svh; left:0; transform:none; width:50%; height:88svh; max-height:850px; gap:6px; }
  .covers[data-count="1"] { max-width:none; }
  .covers[data-count="1"] .cover-tile img { object-fit:contain; }
}
@media(max-height:740px) and (max-width:899px) {
  .landing-nav { top:max(32px,env(safe-area-inset-top)); }
  .landing-hero { padding-bottom:max(40px,env(safe-area-inset-bottom)); }
  .covers { top:64px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }