:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #fff;
  background: #0b0206;
  --pink: #fc388e;
  --muted: #d6bec8;
  --border: #de1b73;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background-color: #0b0206; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; background: #fff; color: #19020c; padding: 12px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.faq-page { background-image: linear-gradient(90deg, #09000538, transparent 65%), url("./assets/faq-pc-bg.webp"); background-size: max(100%, 1280px) auto; background-position: top center; background-repeat: no-repeat; }
.site-header { min-height: 86px; padding: 12px max(24px, calc((100vw - 1840px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(100deg, #14020bbf, #35051760, #15040aaa); border-bottom: 1px solid #fa3d8910; }
.brand { display: flex; align-items: center; gap: 6px; }
.brand img { width: 64px; height: 48px; object-fit: contain; }
.brand strong { display: block; font-size: 25px; font-weight: 700; text-shadow: 0 2px 7px #f82893; }
.brand small { display: block; font-size: 15px; margin-top: 4px; color: #fffa; }
.site-header nav { display: flex; gap: 10px; font-size: 14px; }
.site-header nav a { padding: 9px 16px; border: 1px solid #da347775; border-radius: 30px; background: #18070bad; }
.site-header nav a:hover { color: #ff80b6; border-color: var(--pink); }
.page-shell { max-width: 1920px; margin-inline: auto; padding: 0 clamp(20px, 2.65vw, 51px); }
.faq-hero { position: relative; min-height: 385px; padding: clamp(38px, 4vw, 76px) clamp(15px, 4vw, 78px) 32px; }
.hero-copy { position: relative; z-index: 1; }
.faq-hero h1, .display-title { font-size: clamp(40px, 4.15vw, 80px); line-height: 1.15; font-weight: 900; letter-spacing: -2px; text-shadow: -2px -2px 0 #651731, 2px 3px 0 #651731, 0 0 12px #ff278b90; }
.faq-hero h1 span, .display-title span { color: #ff1683; text-shadow: 2px 3px 0 #360019, 0 0 12px #ff278b75; }
.faq-hero h2 { font-size: clamp(23px, 1.83vw, 35px); margin-top: 20px; }
.faq-hero .hero-copy > p { margin-top: 8px; font-size: clamp(14px, 1.05vw, 20px); color: #eee1e8; line-height: 1.65; }
.mobile-person { display: none; }
.search-form { width: min(560px, 68%); height: 43px; display: flex; align-items: center; gap: 8px; padding: 5px 7px 5px 14px; border: 1px solid #ff8bb7; border-radius: 40px; margin-top: 22px; background: #0b0408dc; }
.search-form img { flex: 0 0 22px; width: 22px; height: 22px; object-fit: contain; }
.search-form input { width: 100%; min-width: 0; border: 0; outline: none; color: #fff; background: transparent; font-size: 14px; }
.search-form input::placeholder { color: #baa6af; }
.search-form button { flex: 0 0 auto; padding: 5px 18px; border: 0; border-radius: 24px; background: #ed2d7e; font-size: 14px; }
.hot-searches { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; font-size: 13px; }
.hot-searches button { padding: 5px 15px; border: 1px solid #db246c; border-radius: 24px; background: #0b0108db; font-size: 12px; }
.hot-searches button:hover, .hot-searches button[aria-pressed="true"] { background: #b7195c; border-color: #ff95c4; }
.faq-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, .9vw, 20px); align-items: start; }
.faq-card { border: 2px solid #ef147e; border-radius: 22px; background: linear-gradient(135deg, #38131e 0%, #090808 45%); overflow: hidden; min-height: 375px; box-shadow: 0 0 15px #ec086023; }
.category-heading { display: flex; align-items: center; gap: 10px; min-height: 176px; padding: 46px 14px 18px; position: relative; }
.category-number { position: absolute; top: 10px; left: 15px; font-size: 42px; font-style: italic; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px #fb0483; }
.category-icon { width: clamp(50px, 4.2vw, 80px); height: clamp(50px, 4.2vw, 80px); object-fit: contain; flex: 0 0 auto; }
.category-copy { min-width: 0; }
.category-copy h2 { font-size: clamp(17px, 1.35vw, 26px); line-height: 1.4; }
.category-subtitle { font-size: clamp(12px, .84vw, 16px); line-height: 1.5; margin-top: 3px; color: #f7eaf0; }
.category-description { font-size: clamp(11px, .66vw, 13px); line-height: 1.55; color: #ccbfc5; margin-top: 8px; }
.questions { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b42360 #16070d; }
.question { border-top: 1px solid #70505b55; }
.question summary { list-style: none; position: relative; padding: 14px 28px 14px 12px; color: #ff4f9c; font-size: clamp(13px, .94vw, 18px); line-height: 1.5; overflow-wrap: anywhere; }
.question summary::-webkit-details-marker { display: none; }
.question summary::before { content: "Q："; }
.question summary::after { content: "⌄"; position: absolute; right: 10px; top: 13px; font-size: 18px; line-height: 1.3; }
.question[open] summary::after { content: "⌃"; }
.question[open] summary { color: #ff95c6; }
.answer { padding: 0 14px 16px; color: #eadfe4; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.answer-link { display: inline-block; margin-top: 9px; color: #ff69a9; text-decoration: underline; text-underline-offset: 3px; }
.search-result { margin: 0 0 16px; color: #ffe1ed; font-size: 14px; }
.empty-search { background: #10080cef; border: 1px solid #c3366f; border-radius: 18px; padding: 40px 20px; text-align: center; }
.empty-search p { margin-top: 15px; color: #d6bec8; line-height: 1.7; }
.empty-search button { background: #d92771; border: 0; padding: 10px 22px; border-radius: 24px; margin-top: 20px; }
.support-card { display: flex; align-items: center; gap: clamp(16px, 2vw, 38px); margin: 28px 15px 0; padding: 22px clamp(18px, 3vw, 60px); border: 1px solid #970535; border-radius: 25px; background: #160208f5; }
.support-icon { width: clamp(70px, 6vw, 115px); height: auto; flex-shrink: 0; }
.support-copy { flex: 1; }
.support-copy h2 { font-weight: 600; font-size: clamp(21px, 1.8vw, 35px); line-height: 1.5; }
.support-copy h2 span { color: var(--pink); margin-left: 10px; }
.support-copy > p { font-size: clamp(13px, 1.2vw, 20px); line-height: 1.6; margin-top: 5px; color: #d4c5cc; }
.support-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; color: #ff72af; font-size: 15px; }
.support-links:empty { display: none; }
.support-links a:hover { text-decoration: underline; }
.support-heart { width: 85px; height: 70px; object-fit: contain; margin-right: 6%; }
.support-copy .support-unavailable { font-size: 13px; color: #dca8be; }
.page-footer { text-align: center; padding: 24px 16px 32px; font-size: 12px; line-height: 1.8; color: #d1aebd; }
.page-footer span { margin-left: 15px; }
.notice { padding: 20px; border: 1px solid var(--border); background: #18070d; }
.install-page { background-image: url("./assets/install-pc-bg.webp"); background-size: 100% 100%; background-repeat: no-repeat; }
.install-hero { padding: 38px 0 20px; position: relative; }
.install-decoration { position: absolute; right: 4%; top: 5px; width: clamp(140px, 13vw, 247px); height: 95%; object-fit: contain; pointer-events: none; }
.install-hero .hero-copy { max-width: 78%; }
.install-hero .display-title { font-size: clamp(42px, 4.3vw, 82px); }
.install-hero h2 { font-size: clamp(26px, 2.6vw, 50px); margin-top: 12px; }
.install-hero .hero-copy > p:last-child { font-size: clamp(16px, 1.5vw, 28px); margin-top: 8px; line-height: 1.5; }
.install-toolbar { display: flex; align-items: center; gap: 20px; padding: 0 0 18px; }
.download-button { flex: 0 0 auto; background: linear-gradient(#ff449a, #b60c58); border: 1px solid #ff7cb9; border-radius: 25px; padding: 10px 20px; font-size: 15px; box-shadow: 0 0 14px #f71c6d5e; }
.install-note { font-size: 13px; line-height: 1.7; max-width: 980px; color: #e5becf; }
.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 32px) 16px; }
.step-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; gap: 8px 10px; padding: 14px 14px 0; border: 2px solid #f61980; border-radius: 23px; overflow: hidden; background: linear-gradient(145deg, #550b2aee, #16030b 65%); }
.step-number { display: grid; place-items: center; background: linear-gradient(135deg, #ff4795, #bd004b); border: 1px solid #ff8bb7; border-radius: 50%; width: 42px; height: 42px; font-size: 22px; font-weight: 600; box-shadow: 0 0 10px #ff1b8877; }
.step-copy { min-width: 0; }
.step-copy h3 { font-size: clamp(15px, 1.05vw, 20px); line-height: 1.5; }
.step-copy p { font-size: clamp(12px, .76vw, 14px); color: #d8bbc8; line-height: 1.65; margin-top: 6px; }
.step-preview { grid-column: 1 / -1; position: relative; overflow: hidden; aspect-ratio: 5 / 3; width: 100%; align-self: end; margin-top: 4px; border-radius: 18px 18px 0 0; background: #09090b; }
.step-preview img { width: 100%; height: 100%; object-fit: contain; }
.step-preview .cropped-image { position: absolute; max-width: none; object-fit: fill; }
.install-section:not([hidden]) + .install-section:not([hidden]) { margin-top: 26px; }
.install-page .support-card { margin: 45px 0 0; }
@media (min-width: 1921px) { .faq-page { background-size: 1920px auto; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-card { min-height: 300px; }
  .category-heading { min-height: 150px; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-heart { margin-right: 0; }
  .faq-hero { padding-left: 8px; }
}
@media (max-width: 767px) {
  .faq-page { background-image: linear-gradient(#09010765, #090107c7), url("./assets/faq-mobile-bg.webp"); background-size: cover; background-position: top center; }
  .site-header { min-height: 59px; padding: 10px 12px; gap: 8px; }
  .brand { gap: 1px; }
  .brand img { width: 32px; height: 32px; }
  .brand strong { font-size: 13px; white-space: nowrap; }
  .brand small { font-size: 9px; margin-top: 2px; }
  .site-header nav { gap: 5px; font-size: 11px; flex-shrink: 0; }
  .site-header nav a { padding: 7px 8px; }
  .page-shell { padding: 0 12px; }
  .faq-hero { min-height: 250px; padding: 25px 0 20px; }
  .mobile-person { display: block; position: absolute; z-index: 0; right: -12px; top: -30px; width: 47%; height: 310px; object-fit: cover; object-position: top; pointer-events: none; mask-image: linear-gradient(#000 75%, transparent); }
  .faq-hero h1 { font-size: clamp(25px, 6.3vw, 43px); letter-spacing: -1px; white-space: nowrap; text-shadow: -1px -1px 0 #651731, 1px 2px 0 #651731, 0 0 10px #ff278b90; }
  .faq-hero h2 { font-size: 16px; margin-top: 17px; }
  .faq-hero .hero-copy > p { max-width: 67%; font-size: 12px; line-height: 1.7; margin-top: 7px; text-shadow: 0 1px 4px #000; }
  .search-form { margin-top: 18px; width: 85%; height: 39px; gap: 3px; padding-left: 10px; }
  .search-form input { font-size: 12px; }
  .search-form button { font-size: 12px; padding: 5px 12px; }
  .hot-searches { gap: 5px; margin-top: 10px; font-size: 10px; }
  .hot-searches button { font-size: 10px; padding: 4px 7px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .faq-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 0; border: 1px solid #d73870; border-radius: 14px; background: #080707f5; }
  .category-heading { flex-direction: column; justify-content: center; gap: 5px; padding: 17px 8px; min-height: 110px; align-self: start; position: sticky; top: 0; }
  .category-number { display: none; }
  .category-icon { width: 52px; height: 52px; }
  .category-copy { text-align: center; }
  .category-copy h2 { font-size: 15px; }
  .category-subtitle { font-size: 10px; margin-top: 5px; }
  .category-description { display: none; }
  .questions { border-left: 1px solid #75434e60; max-height: 440px; }
  .question:first-child { border-top: 0; }
  .question summary { font-size: 13px; padding: 12px 23px 8px 10px; }
  .question summary::after { right: 7px; top: 11px; }
  .answer { font-size: 12px; line-height: 1.8; padding: 0 10px 12px; }
  .support-card { gap: 10px; padding: 15px 10px; margin: 17px 0 0; border-radius: 14px; }
  .support-icon { width: 58px; }
  .support-copy h2 { font-size: 15px; }
  .support-copy h2 span { margin-left: 0; display: block; }
  .support-copy > p { font-size: 11px; }
  .support-links { font-size: 12px; gap: 10px 12px; }
  .support-heart { display: none; }
  .page-footer { font-size: 10px; padding: 24px 5px; }
  .page-footer span { display: block; margin: 5px 0 0; }
  .install-page { background-image: url("./assets/install-mobile-bg.webp"); background-size: cover; }
  .install-hero { padding: 22px 0 15px; }
  .install-decoration { right: 0; top: 4px; width: 28%; opacity: .85; }
  .install-hero .hero-copy { max-width: 80%; }
  .install-hero .display-title { font-size: clamp(32px, 8.3vw, 54px); letter-spacing: -1px; }
  .install-hero h2 { font-size: 23px; margin-top: 12px; }
  .install-hero .hero-copy > p:last-child { font-size: 12px; line-height: 1.6; }
  .install-toolbar { gap: 10px; flex-wrap: wrap; padding-bottom: 17px; }
  .download-button { font-size: 13px; padding: 8px 15px; }
  .install-note { font-size: 11px; }
  .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .step-card { grid-template-columns: 32px minmax(0, 1fr) 46%; grid-template-rows: 1fr; align-items: center; gap: 7px; padding: 10px 9px; border-width: 1px; border-radius: 15px; min-height: 117px; }
  .step-number { align-self: start; width: 31px; height: 31px; font-size: 17px; }
  .step-copy h3 { font-size: 13px; line-height: 1.5; }
  .step-copy p { font-size: 11px; line-height: 1.6; margin-top: 6px; }
  .step-preview { grid-column: auto; align-self: center; margin: 0; border-radius: 13px; }
  .install-page .support-card { margin-top: 20px; }
}
@media (max-width: 359px) {
  .site-header nav a { padding: 6px; font-size: 10px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 8px; }
  .faq-card { grid-template-columns: 92px minmax(0, 1fr); }
  .category-copy h2 { font-size: 13px; }
  .step-card { grid-template-columns: 27px minmax(0, 1fr) 42%; gap: 5px; }
  .step-number { width: 27px; height: 27px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: background-color .15s, border-color .15s, color .15s; }
}