/* Shared light palette for the home page and all five topic pages. */
:root {
  color-scheme: light;
  --bg: #fff;
  --surface: #fff;
  --fg: #22232a;
  --muted: #60616b;
  --pink: #d91855;
  --line: #e4e4eb;
}
html, body { background: var(--bg); color: var(--fg); }
::selection { background: #ffd4e1; color: #651331; }
body a { color: inherit; }
.content-box, .text-content { color: var(--fg); }
.second-box, .third-box, .fourth-box, .start-page, #mainContent { background-color: var(--bg); }
.site-header, .lp-header {
  position: fixed;
  inset: 18px auto auto 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1180px;
  height: 68px;
  padding: 12px 18px;
  border: 1px solid #ffffffb3;
  border-radius: 24px;
  background: #ffffffd6;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 8px 30px #25283512, inset 0 1px 0 #ffffffb3;
}
.site-header .site-logo img, .lp-header .lp-logo img { width: 38px; height: 38px; border-radius: 10px; }
.site-header { left: calc((100% - var(--scrollbar-gap, 0px)) / 2); width: calc(100% - 48px - var(--scrollbar-gap, 0px)); }
.site-header .header-try, .lp-header .header-try { min-height: 40px; padding: 10px 27px; }
.header-icon-overlay { background: none; }
.first-box { background-color: #fff; isolation: isolate; }
.first-box:before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 20%, #0000000a 45%, #00000026 70%, #ffffff00 78%, #fff 94%, #fff 100%); }
.text-content-box, .bottom-text-box { z-index: 1; }
.hero-title { color: #fff; text-shadow: 0 2px 20px #0005; }
.hero-brand { color: #ffafc8; text-shadow: 0 2px 16px #0005; }
.inShot-introduce { color: #30313b; }
.try-button, a.try-button, .tag-more-btn, a.tag-more-btn, .ma-download-btn, .go {
  background: linear-gradient(105deg, #e73965, #da1958 58%, #c9094b);
  color: #fff;
  box-shadow: 0 8px 26px #d918551a;
}
.try-button:hover { box-shadow: 0 10px 30px #d918552b; filter: brightness(1.04); }
.tag-btn { color: #4b4c56; background: #f1f1f5; }
.tag-btn.active, .tag-btn-hover, .tag-btn:hover { color: #ad1042; background: #ffe8ef; }
.made-with-text, .smooth-padding, .stickers-card h2, .comment-title,
.activity-text h3, .activity-text h4, .closing-cta h2, .faq-section,
.seo-copy h2, .seo-copy h3 { color: var(--fg); }
.made-text-box [style*="color"], #smoothBox h6, .activity-text h5:not(.go), .activity-box h5:not(.go),
.comment-title [style*="color"] { color: var(--muted) !important; }
.made-text-box h2[style*="color"] { color: var(--fg) !important; }
.dot { background-color: #c5c5d0; }
.dot.active, .dot.active:after, .dot.active .pc-icon { background-color: var(--pink); }
.pc-icon { background-color: #777783; }
@media (min-width:768px) { .carousel-dots .dot, .carousel-dots .dot.active { background-color: transparent; } }
#smooth-arrow-prev, #smooth-arrow-next, .effects-content .swiper-button-prev img,
.effects-content .swiper-button-next img { filter: brightness(0) opacity(.65); }
.music-card, .comments-carousel__card { background-color: #f5f5f8; border: 1px solid #e9e9ef; }
.music-card-hover, .music-card:hover { background-color: #ffeef3; }
.card-desc p:nth-child(2), .user-name { color: var(--muted); }
.activity-box { background: #fff1f5; border: 1px solid #f9dce5; }
.go h3, .go h4, .go h5 { color: #fff !important; }
.activity-box .go { width: max-content; min-width: 150px; height: 44px; padding: 0 24px; border-radius: 999px; }
.activity-box .go, .activity-box .go a { color: #fff !important; font: 700 15px/1.3 Arial,sans-serif; }
.comments-carousel__card img[src$="icon_comment_appstore.webp"] { filter: brightness(0) opacity(.65); }
.card-youcut { --card-color-primary: #fff0e8; --card-color-secondary: #fff0e800; }
.card-peachy { --card-color-primary: #ffedf1; --card-color-secondary: #ffedf100; }
.card-lumii { --card-color-primary: #e7f9fc; --card-color-secondary: #e7f9fc00; }
.card-maker { --card-color-primary: #ffe9f0; --card-color-secondary: #ffe9f000; }
.app-name, .app-description { color: var(--fg); }
.ma-download-btn:hover { border-color: #b91347; }
.ma-qr-code, .ma-qr-code-inner, .app-download { background: #fff; }
.top-overlay, .bottom-overlay { color: #22232a; background: #ffffffde; backdrop-filter: blur(12px); border: 1px solid #ffffff80; }
.top-overlay { padding: 7px 10px; border-radius: 9px; }
.top-overlay .effect-title-text { text-shadow: none; }
.top-overlay img { filter: brightness(0) opacity(.75); }
.seo-copy, .seo-copy .seo-lead, .seo-copy .seo-note { color: var(--muted); }
.seo-copy .seo-eyebrow, .seo-copy h2 span, .seo-step-number,
.closing-cta h2 span { color: var(--pink); }
.seo-steps li, .faq-item { border-color: var(--line); }
.faq-answer p { color: var(--muted); }
.faq-question:hover { color: var(--pink); }
.seo-visual, .hero-photo { background: #f2f2f6; }
.seo-visual:after, .hero-photo:after { background: linear-gradient(transparent, #ffffffed); }
.seo-visual figcaption, .hero-photo figcaption { color: #272831; text-shadow: none; font-weight: 700; }
.cta-glow { background: radial-gradient(ellipse at 50% 60%, #ffdee980, transparent 68%); }
.download-dialog { background: #fff; color: var(--fg); border-color: var(--line); }
.download-dialog p, .dialog-close, .store-links small { color: var(--muted); }
.store-links a { color: var(--fg); border-color: var(--line); }
.store-links a:hover { background: #fff1f5; border-color: #ed93b0; }
/* Topic pages. */
.eyebrow, .lp-hero h1 .brand-word, .lp-hero h1 .accent-word,
.option-number, .step:before, .checklist li:before { color: var(--pink); }
.breadcrumb, .breadcrumb a, .hero-tags { color: var(--muted); }
.breadcrumb a:hover, .option a, .related a:hover { color: #bd1248; }
.hero-tags li, .option, .step, .checklist li { border-color: var(--line); }
.option a { border-color: #efadc2; }
.option a:hover { color: #901138; }
.prompt-panel { background: #fff5f8; border-color: #f2d8e2; }
.prompt-body blockquote { color: #363741; }
.checklist { background: #f6f6f9; }
.checklist li, .related, .related a { color: var(--muted); }
.related a { border-color: #c5c5cf; }
.site-footer { background: #fafafd; border-color: var(--line); }
.footer-pages a { color: #5c5d68; }
.footer-pages a:hover, .footer-pages a[aria-current=page] { color: #bd1248; }
@media(max-width:767px) {
  .site-header, .lp-header { top: 12px; width: calc(100% - 28px); height: 62px; padding: 10px 12px; border-radius: 22px; }
  .site-header { width: calc(100% - 28px - var(--scrollbar-gap, 0px)); }
  .site-header .site-logo img, .lp-header .lp-logo img { width: 36px; height: 36px; border-radius: 9px; }
  .site-header .header-try, .lp-header .header-try { min-height: 38px; padding: 9px 21px; font-size: 14px; }
}