/* PicWish homepage reference, 2026-09-19. Native web styles, loaded only for home. */
body[data-page="home"] {
  --text: #2d2d33;
  --muted: #767680;
  --gradient: linear-gradient(90deg,#3babff,#5555ff);
  --radius-btn: 80px;
  font-family: "Microsoft YaHei","PingFang SC",Arial,sans-serif;
  color: var(--text);
}
body[data-page="home"] .page-container { padding:0; }
body[data-page="home"] h1,body[data-page="home"] h2,body[data-page="home"] h3 { letter-spacing:0; }
body[data-page="home"] [hidden] { display:none!important; }
.home-hero.pw-hero { padding:120px 16px; background:#e5f1ff; position:relative; isolation:isolate; min-height:0; }
.pw-hero-copy { max-width:1200px; position:relative; z-index:2; margin:0 auto; }
.pw-hero h1 { font-size:60px; line-height:90px; letter-spacing:8px!important; font-weight:600; margin:0; }
.pw-banner-gradient { position:relative; background:linear-gradient(165deg,#b9fbff 8.17%,#5ea9f9 29.61%,#55f 53.18%,#d5f 76.88%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.pw-underline::after { content:""; position:absolute; bottom:-8px; left:-4px; width:calc(100% + 20px); height:15px; background:url("/assets/pc/images/picwish/text-line.2e_1AxJP.svg") no-repeat center/contain; }
.pw-hero-copy>p { max-width:720px; margin:20px auto 0; font-size:20px; line-height:30px; color:#898991; }
.pw-primary { min-width:400px; min-height:60px; padding:14px 32px; font-size:20px; font-weight:600; box-shadow:0 30px 30px color-mix(in srgb,var(--primary) 20%,transparent); transition:transform .25s; }
.pw-primary:hover { transform:translateY(-4px); box-shadow:0 30px 30px color-mix(in srgb,var(--primary) 20%,transparent); }
.pw-mobile-hero { display:none; }
.pw-web-recommended { position:relative; z-index:2; max-width:1476px; margin:64px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pw-recommend-card { position:relative; display:block; aspect-ratio:36/25; overflow:hidden; border-radius:24px; background:#e2e6f4; color:#fff; }
.pw-recommend-card>img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.pw-recommend-card--icon>img { object-fit:contain; padding:40px 40px 70px; }
.pw-recommend-card::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.95)); pointer-events:none; }
.pw-recommend-caption { position:absolute; z-index:1; bottom:24px; left:16px; right:16px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:24px; line-height:1.4; font-weight:700; }
.pw-recommend-caption svg { flex-shrink:0; }
.pw-recommend-card:hover { color:#fff; }
.pw-recommend-card:hover>img { transform:scale(1.04); }
.pw-recommend-card:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.pw-recommend-compare { position:absolute; inset:0; display:block; pointer-events:none; }
.pw-recommend-compare>img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.pw-compare-before { clip-path:inset(0 50% 0 0); visibility:hidden; }
.pw-compare-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-50%); visibility:hidden; }
.pw-compare-ready .pw-compare-before,.pw-compare-ready .pw-compare-divider { visibility:visible; }
.pw-compare-ready .pw-compare-before { animation:pw-compare-reveal 6s ease-in-out infinite; }
.pw-compare-ready .pw-compare-divider { animation:pw-compare-sweep 6s ease-in-out infinite; }
@keyframes pw-compare-reveal { 0%,100% { clip-path:inset(0 50% 0 0); } 25% { clip-path:inset(0 0 0 0); } 75% { clip-path:inset(0 100% 0 0); } }
@keyframes pw-compare-sweep { 0%,100% { left:50%; } 25% { left:100%; } 75% { left:0%; } }
@media (prefers-reduced-motion:reduce) { .pw-compare-ready .pw-compare-before,.pw-compare-ready .pw-compare-divider { animation:none; } }
@media (max-width:1100px) { .pw-recommend-caption { font-size:20px; bottom:20px; } }
@media (max-width:800px) { .pw-web-recommended { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:40px; } .pw-recommend-card { border-radius:20px; } }
@media (max-width:480px) { .pw-recommend-caption { font-size:16px; left:10px; right:10px; bottom:16px; gap:4px; } .pw-recommend-caption svg { width:18px; height:18px; } .pw-recommend-card--icon>img { padding:24px 24px 50px; } }
@media (prefers-reduced-motion:reduce) { .pw-recommend-card>img { transition:none; } }
.pw-hero-light { position:absolute; pointer-events:none; z-index:-1; border-radius:50%; }
.pw-hero-light--blue { bottom:18%; left:-10%; width:548px; height:548px; filter:blur(150px); transform:rotate(28deg); opacity:.5; background:linear-gradient(90deg,#545bf6,#5ea9f9); }
.pw-hero-light--white { bottom:10px; right:15%; width:460px; height:460px; filter:blur(50px); background:#fff; }
.pw-hero-light--purple { bottom:-14%; right:-2%; width:632px; height:632px; filter:blur(150px); background:#e5d0fc; transform:rotate(28deg); }
.pw-hero-light--orb { top:6%; right:20%; width:112px; height:112px; filter:blur(10px); opacity:.2; background:linear-gradient(90deg,#545bf6 20%,#5ea9f9 92%); }
.pw-hero-light--top { top:-6%; left:28%; width:460px; height:460px; filter:blur(138px); background:#fff; }
.pw-gradient { background:linear-gradient(92.05deg,#c488ff 18.1%,#55f 65.18%,#5fbaff 99.15%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.pw-section-intro { text-align:center; padding:0 16px; }
.pw-section-intro h2 { font-size:50px; line-height:76px; font-weight:600; letter-spacing:2px!important; margin:0; }
.pw-section-intro>p { color:#898991; font-size:20px; line-height:30px; margin:24px auto 32px; max-width:1080px; }
.pw-tools { padding:120px 24px 128px; background:radial-gradient(ellipse at 10% 48%,#eceeff 0,transparent 55%),radial-gradient(ellipse at 100% 70%,#e5f3ff 0,transparent 55%),#fff; scroll-margin-top:85px; }
.pw-tabs { max-width:680px; width:max-content; min-width:560px; margin:0 auto 32px; padding:5px; display:flex; border:0; border-radius:80px; gap:8px; }
.pw-tab { flex:1; padding:7px 28px; color:var(--text); text-align:center; white-space:nowrap; font-size:20px; line-height:30px; border-radius:80px; }
.pw-tab[aria-selected="true"] { color:#fff; background:var(--primary); }
.pw-tab:hover:not([aria-selected="true"]) { color:var(--primary); }
.pw-slide-dots { display:none; }
.pw-tool-panels { max-width:1220px; margin:auto; }
.pw-tool-panel { scroll-margin-top:100px; }
.pw-group-title { margin:32px 0 24px; font-size:24px!important; }
.pw-tabs-ready .pw-group-title { display:none; }
.pw-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; }
.pw-tool-card { display:block; color:var(--text); background:#fff; border-radius:32px; overflow:hidden; box-shadow:0 10px 10px rgba(184,184,202,.1),0 60px 60px rgba(178,178,228,.2); transition:transform .25s,outline-color .25s; outline:2px solid transparent; outline-offset:0; }
.pw-tool-card:hover,.pw-tool-card:focus-visible { transform:scale(1.025); outline-color:var(--primary); }
.pw-card-art { position:relative; aspect-ratio:1.9; overflow:hidden; background:#f3f3fb; display:grid; place-items:center; }
.pw-card-art img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.pw-card-art--icon img { width:96px; height:96px; object-fit:contain; }
.pw-card-art .pw-card-icon { width:64px; height:64px; object-fit:contain; }
.pw-tool-card:hover .pw-card-art>img { transform:scale(1.05); }
.pw-card-copy { padding:20px 24px 38px; position:relative; min-height:158px; text-align:center; }
.pw-card-copy h3 { font-size:20px; font-weight:600; line-height:30px; margin:0 0 16px; }
.pw-card-copy p { color:var(--muted); font-size:16px; line-height:24px; margin:0; text-align:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pw-card-cta { position:absolute; left:16%; right:16%; bottom:26px; padding:13px 12px; color:var(--primary); border:2px solid transparent; border-radius:80px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(131deg,#5ea9f9,#55f) border-box; opacity:0; transition:opacity .2s; font-weight:600; }
.pw-tool-card:hover .pw-card-cta,.pw-tool-card:focus-visible .pw-card-cta { opacity:1; }
.pw-tool-card:hover .pw-card-copy p,.pw-tool-card:focus-visible .pw-card-copy p { opacity:0; }
.pw-all-tools { display:flex; width:max-content; margin:40px auto 0; align-items:center; gap:16px; font-size:20px; }
.pw-all-tools span { display:grid; place-items:center; width:32px; height:32px; background:#fff; border-radius:50%; box-shadow:0 6px 20px #dcdcf3; }
.pw-scenes { padding:120px 24px 100px; }
.pw-scene { max-width:1200px; margin:80px auto 0; display:grid; grid-template-columns:1.08fr 1fr; gap:90px; align-items:center; }
.pw-scene-art { display:block; width:100%; height:auto; object-fit:contain; }
.pw-scene-copy h3 { font-size:32px; line-height:48px; font-weight:600; margin:0 0 32px; }
.pw-scene-copy h3 span { color:var(--primary); }
.pw-scene-copy p,.pw-feature-copy>p { font-size:16px; line-height:30px; color:#65656c; margin:0; }
.pw-text-link { display:inline-block; margin-top:24px; font-size:16px; }
.pw-scene--reverse { grid-template-columns:1fr 1.25fr; gap:60px; margin-top:100px; }
.pw-scene--reverse .pw-scene-copy { grid-column:1; grid-row:1; }
.pw-scene--reverse .pw-scene-art { grid-column:2; }
.pw-feature { padding:140px 24px; background:#f7f5ff url("/assets/pc/images/picwish/news-bg@2249w.10bc40df.avif") no-repeat center/cover; overflow:hidden; }
.pw-feature-inner { max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.pw-feature-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xl); width:100%; min-width:0; }
.pw-feature-example { margin:0; overflow:hidden; border-radius:var(--radius-xl); background:var(--white); box-shadow:var(--shadow); }
.pw-feature-example--wide { grid-column:1 / -1; }
.pw-feature-example>img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.pw-feature-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.pw-feature-pair>div { position:relative; min-width:0; }
.pw-feature-pair img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.pw-feature-pair span { position:absolute; bottom:var(--space-md); left:var(--space-md); padding:var(--space-xs) var(--space-md); border-radius:var(--radius-sm); background:var(--white); color:var(--text); font-size:var(--font-sm); }
.pw-feature-example figcaption { display:flex; flex-direction:column; gap:var(--space-xs); padding:var(--space-lg); }
.pw-feature-example strong { font-size:var(--font-md); color:var(--text); }
.pw-feature-example figcaption>span { font-size:var(--font-sm); color:var(--muted); }
.pw-feature-copy h2 { font-size:50px; line-height:76px; font-weight:600; margin:24px 0 32px; letter-spacing:2px!important; }
.pw-feature-copy .pw-eyebrow { color:var(--primary); font-size:16px; }
.pw-white-button { background:#fff; color:var(--primary); border:0; width:340px; min-height:60px; font-size:20px; margin-top:60px; box-shadow:0 25px 25px color-mix(in srgb,var(--primary) 18%,transparent); gap:20px; }
/* Source: https://www.shuiyinyun.com/image-to-text.html, 2026-09-21.
   Section visuals adapted to the homepage typography and spacing. */
.pw-benefits { --benefit-unit:clamp(64px,5vw,80px); font-family:"Microsoft Yahei",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif; line-height:normal; }
.pw-benefits .pw-benefits-inner { width:min(100%,calc(var(--benefit-unit)*18)); padding:0 calc(var(--benefit-unit)*.1875); margin:auto; }
.pw-benefits .title,.pw-benefits .desc { margin:0; line-height:normal; }
.pw-benefits {
  position: relative;
  background: linear-gradient(86deg, #FFFCF9 0%, #DCF1FE 100%);
  padding: 80px 0;
}
.pw-benefits::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--benefit-unit) * 3.125);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
.pw-benefits .pw-benefits-inner {
  position: relative;
  z-index: 1;
}
.pw-benefits .pw-benefits-heading {
  position: relative;
  text-align: center;
}
.pw-benefits .pw-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 28px;
  margin-top: 56px;
}
.pw-benefits .pw-benefit-grid .pw-benefit {
  min-height: 360px;
  background: #FFFFFF;
  border-radius: calc(var(--benefit-unit) * 0.5);
  padding: 48px 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  border: calc(var(--benefit-unit) * 0.025) solid #FFFFFF;
  transition: border-color 0.3s linear,transform 0.3s ease;
}
.pw-benefits .pw-benefit-grid .pw-benefit .image {
  display: block;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  object-fit: contain;
  margin: 0 auto;
}
.pw-benefits .pw-benefit-grid .pw-benefit .title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: #333333;
  margin-top: 32px;
}
.pw-benefits .pw-benefit-grid .pw-benefit .desc {
  max-width: 240px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #999999;
  margin-top: 16px;
}
.pw-benefits .pw-benefit-grid .pw-benefit:hover {
  border-color: #007DFF;
  transform: translateY(-4px);
}
.pw-platform { position:relative; max-width:1360px; margin:0 auto 140px; padding:90px 110px; min-height:500px; border-radius:64px; background:linear-gradient(110deg,#e5e6ff,#f7f5ff 85%); }
.pw-platform-copy { position:relative; z-index:1; }
.pw-platform h2 { font-size:50px; line-height:76px; font-weight:600; margin-bottom:24px; }
.pw-platform .pw-primary { min-width:240px; box-shadow:none; font-size:18px; }
.pw-platform p { font-size:18px; line-height:30px; color:var(--muted); margin:30px 0 36px; }
.pw-devices { position:absolute; width:45%; height:100%; right:0; top:0; display:flex; align-items:center; pointer-events:none; }
.pw-device-preview { display:block; width:100%; height:100%; object-fit:contain; }
.pw-back-top { position:fixed; right:0; bottom:100px; border-radius:24px 0 0 24px; background:#aaa; color:#fff; padding:8px 14px; font-size:12px; z-index:10; }
.pw-back-top:hover { background:var(--primary); }
@media (max-width:1100px) {
  .pw-hero h1 { font-size:50px; letter-spacing:4px!important; }
  .pw-section-intro h2,.pw-feature-copy h2,.pw-platform h2 { font-size:40px; line-height:1.5; }
  .pw-tool-grid { gap:24px; }
  .pw-card-copy { padding:20px 18px 32px; }
  .pw-scene { gap:40px; }
  .pw-scene-copy h3 { font-size:26px; line-height:40px; }
  .pw-platform { margin-left:24px; margin-right:24px; padding:72px 40px; }
  .pw-platform-copy { max-width:58%; }
}
@media (max-width:767px) {
  .home-hero.pw-hero { min-height:0; padding:80px 16px; background:#e5f1ff url("/assets/pc/images/picwish/mobile-banner-bg.CHtW0cFE.png") no-repeat top center/cover; }
  .pw-hero-light { display:none; }
  .pw-hero-light--top { display:block; z-index:0; width:264px; height:264px; left:50%; top:44px; transform:translateX(-50%); filter:blur(80px); }
  .pw-hero-light--orb { display:block; z-index:0; width:44px; height:44px; filter:blur(4px); right:6%; top:3%; }
  .pw-hero h1 { font-size:34px; line-height:50px; letter-spacing:0!important; white-space:nowrap; }
  .pw-underline::after { display:none; }
  .pw-hero-copy>p { font-size:16px; line-height:25px; margin:20px auto 0; }
  .pw-primary { min-width:260px; font-size:20px; }
  .pw-mobile-hero { display:block; width:87.2%; height:auto; margin:48px auto 0; filter:drop-shadow(0 30px 60px rgba(43,43,135,.25)); }
  .pw-section-intro h2 { font-size:26px; line-height:40px; letter-spacing:-1px!important; }
  .pw-section-intro>p { font-size:16px; line-height:25px; margin:20px auto 28px; }
  .pw-tools { padding:80px 0; scroll-margin-top:52px; overflow:hidden; }
  .pw-tabs { min-width:0; width:calc(100% - 48px); max-width:420px; padding:4px; gap:0; margin-bottom:28px; overflow-x:auto; }
  .pw-tab { font-size:14px; padding:4px 12px; line-height:24px; }
  .pw-tool-grid { display:flex; gap:16px; padding:4px 16px 42px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .pw-tool-grid::-webkit-scrollbar { display:none; }
  .pw-tool-card { flex:0 0 80%; scroll-snap-align:center; border-radius:28px; }
  .pw-card-copy { padding:20px 16px 28px; min-height:148px; }
  .pw-card-copy h3 { font-size:18px; margin-bottom:16px; }
  .pw-card-copy p { font-size:14px; line-height:23px; }
  .pw-benefits .pw-benefit-grid .pw-benefit .title { font-size:18px; }
  .pw-benefits .pw-benefit-grid .pw-benefit .desc { font-size:14px; line-height:23px; }
  .pw-tool-card:hover { transform:none; }
  .pw-tool-card:hover .pw-card-copy p { opacity:1; }
  .pw-card-cta { display:none; }
  .pw-slide-dots:not([hidden]) { display:flex; justify-content:center; gap:8px; }
  .pw-slide-dots button { background:none; border:0; padding:8px 2px; min-width:20px; }
  .pw-slide-dots button::after { content:""; display:block; height:6px; border-radius:6px; background:#d7d7e9; }
  .pw-slide-dots button[aria-current="true"]::after { background:var(--primary); }
  .pw-all-tools { font-size:16px; margin-top:26px; }
  .pw-scenes { padding:70px 16px 80px; background:#f8f9fc; }
  .pw-scenes .pw-section-intro { padding:0; }
  .pw-scene,.pw-scene--reverse { display:flex; flex-direction:column-reverse; gap:36px; margin:48px auto 0; }
  .pw-scene--reverse { margin-top:80px; }
  .pw-scene-copy h3 { font-size:20px; line-height:30px; margin-bottom:24px; }
  .pw-scene-copy p { font-size:16px; line-height:30px; }
  .pw-scene-art { width:100%; max-width:440px; }
  .pw-feature { padding:80px 16px; }
  .pw-feature-inner { display:flex; flex-direction:column-reverse; gap:50px; }
  .pw-feature-copy h2 { font-size:28px; line-height:44px; margin:20px 0; }
  .pw-feature-gallery { max-width:calc(var(--space-xxl) * 14); gap:var(--space-md); }
  .pw-white-button { width:260px; min-height:52px; font-size:18px; margin-top:32px; }

  .pw-platform { margin:0 16px 80px; border-radius:32px; padding:48px 24px 300px; min-height:0; }
  .pw-platform-copy { max-width:none; }
  .pw-platform h2 { font-size:28px; line-height:42px; }
  .pw-platform p { font-size:16px; line-height:26px; }
  .pw-platform .pw-primary { min-width:220px; }
  .pw-devices { top:auto; bottom:8px; height:250px; width:90%; right:5%; }
  .pw-back-top { bottom:50px; padding:6px 10px; font-size:10px; }
}
@media (max-width:359px) {
  .pw-hero h1 { font-size:26px; }
  .pw-section-intro h2 { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) {
  .pw-tool-card,.pw-card-art img,.pw-card-cta,.pw-primary { transition:none; }
}

.pw-scenes .pw-scene-art { border-radius:24px; overflow:hidden; }
.pw-scene-comparison { position:relative; aspect-ratio:5/3; background:#f3f3fb; }
.pw-scene-copy .pw-text-link + .pw-text-link { margin-left:24px; }

@media (max-width:900px) {
  .pw-benefits { padding:48px 16px; }
  .pw-benefits .pw-benefits-inner { width:100%; max-width:600px; padding:0; }
  .pw-benefits .pw-benefit-grid { margin-top:32px; gap:20px; }
  .pw-benefits .pw-benefit-grid .pw-benefit { min-height:0; padding:32px 24px; }
  .pw-benefits .pw-benefit-grid .pw-benefit .image { width:64px; height:64px; }
  .pw-benefits .pw-benefit-grid .pw-benefit .title { margin-top:20px; }
}
@media (max-width:1100px) {
  .pw-benefits .pw-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .pw-benefits .pw-benefit-grid { grid-template-columns:1fr; }
}