:root { --header-height:81px;--page:#fffaf9;--surface:#fffefd;--surface-soft:#fff0f1;--ink:#382d34;--muted:#75636c;--brand:#ff6682;--brand-light:#ff918b;--brand-deep:#f6517c;--accent:#b6385c;--button-ink:#fff;--line:#eddee2;--radius:20px;--shadow:0 6px 20px #67414c08;--shadow-hover:0 10px 24px #67414c12;--section-space:72px }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:var(--header-height) }
body { margin:0;background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased }
a { color:inherit;text-decoration:none;touch-action:manipulation }
a:focus-visible { outline:3px solid var(--accent);outline-offset:4px }
.container { width:min(100% - 64px,1168px);margin-inline:auto }
.site-header { position:sticky;top:0;z-index:20;background:var(--page);border-bottom:1px solid var(--line) }
.header-inner { min-height:80px;display:flex;align-items:center;gap:24px }
.brand { display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:700;white-space:nowrap;color:var(--ink) }
.brand-mark { display:block;width:42px;height:42px;flex:none;object-fit:contain;mix-blend-mode:multiply }
.main-nav { display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;white-space:nowrap }
.main-nav a { display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:12px;color:var(--muted) }
.main-nav a:hover, .main-nav a:focus-visible { background:var(--surface-soft);color:var(--accent) }
.button { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border:1px solid transparent;border-radius:999px;font-size:16px;font-weight:600;text-align:center;line-height:1.5;transition:transform .2s ease,background .2s ease,box-shadow .2s ease }
.button-primary { position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(165deg,var(--brand-light) 0%,var(--brand) 52%,var(--brand-deep) 100%);color:var(--button-ink);border-color:#ee547a;font-weight:700;box-shadow:inset 0 2px 1px #ffffff80,inset 0 -3px 1px #be315a24,0 4px 0 #d94c71,0 10px 22px #ef64852e }
.button-primary:before { content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,#ffffff50 48%,transparent 72%);transform:translateX(-120%);transition:transform .55s ease;pointer-events:none }
.button-primary:active { transform:translateY(3px);box-shadow:inset 0 1px 3px #9b294a22,0 1px 0 #d94c71,0 4px 10px #ef64851f }
.header-download.button-primary { box-shadow:inset 0 1px 1px #ffffff80,0 2px 0 #d94c71,0 5px 12px #ef648522 }
.header-download { white-space:nowrap;font-size:14px;padding-inline:24px }
.section { padding-block:var(--section-space);scroll-margin-top:24px }
h1, h2, h3, p { margin-top:0 }
h1, h2, h3 { font-weight:700;letter-spacing:-.025em;text-wrap:balance }
h1 { font-size:clamp(48px,5.6vw,72px);line-height:1.2;margin-bottom:24px }
h2 { font-size:clamp(30px,3.1vw,40px);line-height:1.3;margin-bottom:0 }
h3 { line-height:1.4 }
.hero { position:relative;overflow:hidden;background:linear-gradient(180deg,#fff3f5 0%,var(--page) 100%);padding-block:56px 64px }
.hero-grid { display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center }
.hero-copy { position:relative;z-index:1;padding-block:24px }
.hero h1 span { color:#db436c;font-size:clamp(30px,4.2vw,54px);line-height:1.4 }
.lead { font-size:18px;max-width:29em;color:var(--muted);margin-bottom:0;line-height:1.8 }
.hero-actions { display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:32px }
.hero-actions .button-primary { min-width:208px;min-height:64px;color:#fff;font-size:20px;line-height:1.4;text-align:center;justify-content:center;align-items:center }
.hero-media { justify-self:end;width:min(100%,464px);position:relative;isolation:isolate }
.hero-art { display:grid;place-items:end center;min-height:520px;position:relative;isolation:isolate }
.hero-art:before { content:"";position:absolute;z-index:-1;inset:14% 2% 5%;background:linear-gradient(150deg,#ffe9e9 0%,#ffcfda 65%,#ffdcd0 100%);border:6px solid #fff5f5;border-radius:48% 52% 34% 36% / 40% 44% 32% 35%;box-shadow:0 16px 32px #ed789416,inset 0 2px 4px #fff8 }
.hero-art img { display:block;width:auto;max-width:100%;height:508px;object-fit:contain;transform:translateY(-12px) scale(1.04);transform-origin:bottom center;filter:drop-shadow(0 12px 9px #89425518);transition:transform .45s cubic-bezier(.2,.7,.3,1) }
.hero-doodle { position:absolute;z-index:2;display:grid;place-items:center;color:#c86c87;line-height:1;font-family:Arial,sans-serif;pointer-events:none }
.doodle-star { top:10%;left:-6%;width:56px;height:56px;transform:rotate(-15deg);font-size:36px;color:#c69b69 }
.doodle-heart { top:4%;right:-2%;width:52px;height:52px;transform:rotate(14deg);font-size:38px }
.doodle-flower { bottom:14%;left:-6%;width:48px;height:48px;transform:rotate(12deg);font-size:29px }
.doodle-spark { bottom:7%;right:-2%;width:56px;height:56px;transform:rotate(13deg);font-size:39px;color:#c69b69 }
.section-heading { display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:32px }
.section-heading>p { margin:0;max-width:400px;color:var(--muted);font-size:15px;line-height:1.8 }
.genre-filter { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px }
.genre-filter span { display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:8px 20px;font-size:14px;font-weight:500;color:var(--muted) }
.shelf-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px }
.book-card { min-width:0;min-height:248px;padding:28px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow) }
.book-card { transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease }
.book-card h3 { transition:color .2s ease }
.book-feature { background:var(--surface-soft);border-color:#e8cbd4 }
.tag { display:inline-block;font-size:13px;font-weight:500;color:var(--accent) }
.book-card h3 { font-size:26px;margin:12px 0 8px }
.book-card p { font-size:15px;color:var(--muted);margin-bottom:24px;max-width:29ch }
.book-foot { margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;line-height:1.6 }
.book-foot span { color:var(--muted) }
.book-foot a { display:inline-flex;align-items:center;min-height:32px;font-weight:600;white-space:nowrap;color:var(--accent) }
.book-foot a:hover { text-decoration:underline;text-underline-offset:4px }
.updates-section { padding-top:0 }
.updates-section>.container { border-top:1px solid var(--line);padding-top:var(--section-space) }
.updates-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px }
.update-card { min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease }
.update-card a { display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center;padding:16px;min-height:0;border-radius:var(--radius) }
.update-card:hover, .update-card:focus-within { border-color:#d8a2b5;box-shadow:var(--shadow-hover) }
.update-card img { display:block;width:168px;height:112px;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:var(--surface-soft) }
.update-info { display:flex;flex-direction:column;min-width:0 }
.update-info strong { font-size:22px;font-weight:600;line-height:1.4;margin:4px 0 }
.update-info .chapter { font-size:13px;font-weight:500;color:var(--muted) }
.update-teaser { font-size:13px;color:var(--muted);margin-top:8px }
.download-section { padding-top:8px;padding-bottom:80px }
.download-top { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:48px;border:1px solid #edced8;border-radius:28px;background:linear-gradient(135deg,#ffe9e9,#ffdee5) }
.download-copy h2 { font-size:clamp(32px,3.1vw,40px);margin-bottom:24px }
.download-copy p { color:var(--muted);font-size:16px;max-width:28em;margin:0 }
.download-details { padding:24px;border:1px solid #ffffffb3;border-radius:var(--radius);background:rgba(255,255,255,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff80,0 8px 24px #b94a6810 }
.download-button { width:100%;min-height:60px;margin-top:24px;font-size:20px }
.site-footer { border-top:1px solid var(--line);padding:32px 0 }
.footer-inner { display:flex;align-items:center;gap:32px }
.footer-inner p { margin:0;color:var(--muted);font-size:14px }
.text-link { display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:5px }
.footer-inner>.text-link { margin-left:auto }
@media(max-width:1000px) {
  :root { --header-height:73px;--section-space:64px }
  .main-nav { display:none }
  .header-inner { min-height:72px }
  .header-download { margin-left:auto }
  .hero-grid { gap:32px }
  .hero-art { min-height:440px }
  .hero-art img { height:428px }
  .shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .update-card a { grid-template-columns:120px minmax(0,1fr);gap:16px }
  .update-card img { width:120px;height:80px }
  .update-info strong { font-size:20px }
  .update-teaser { display:none }
  .section-heading { gap:32px }
  .section-heading>p { max-width:320px }
  .download-top { padding:32px;gap:32px }
  .download-details { padding:20px }
}
@media(max-width:700px) {
  :root { --header-height:69px;--section-space:48px;--radius:16px }
  .container { width:calc(100% - 40px) }
  .header-inner { min-height:68px;gap:16px }
  .brand { font-size:17px;gap:10px }
  .brand-mark { width:36px;height:36px }
  .header-download { font-size:12px;padding:10px 16px;min-height:44px }
  .hero { padding-block:40px 48px }
  .hero-grid { grid-template-columns:1fr;gap:32px }
  .hero-copy { padding:0 }
  .hero h1 { font-size:clamp(42px,10.5vw,60px);margin-bottom:20px }
  .lead { font-size:16px }
  .hero-actions { flex-direction:column;margin-top:24px;gap:8px }
  .hero-actions .button { width:100%;min-width:0;min-height:60px }
  .hero-media { justify-self:center;max-width:340px }
  .hero-art { min-height:400px }
  .hero-art img { height:388px }
  .doodle-star { left:-2%;width:44px;height:44px;font-size:28px }
  .doodle-heart { right:-2%;width:44px;height:44px;font-size:30px }
  .doodle-flower { left:-2%;width:40px;height:40px;font-size:24px }
  .doodle-spark { right:-2%;width:44px;height:44px;font-size:30px }
  h2 { font-size:30px }
  .section-heading { display:block;margin-bottom:24px }
  .section-heading>p { margin-top:16px;max-width:none;font-size:15px }
  .genre-filter span { padding-inline:22px }
  .shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px }
  .updates-list { grid-template-columns:1fr;gap:16px }
  .book-card { min-height:0;padding:20px 16px }
  .book-card h3 { font-size:20px }
  .book-card p { font-size:14px;margin-bottom:20px }
  .book-foot { flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px }
  .book-foot a { white-space:normal }
  .update-info strong { font-size:20px }
  .download-section { padding-top:0;padding-bottom:48px }
  .download-top { grid-template-columns:1fr;gap:24px;padding:24px;border-radius:24px }
  .download-copy { text-align:center }
  .download-copy h2 { font-size:32px;margin-bottom:16px }
  .download-copy p { font-size:16px;margin-inline:auto }
  .download-details { padding:16px }
  .download-button { min-height:60px;margin-top:16px;font-size:18px;padding-inline:12px }
  .site-footer { padding:24px 0 }
  .footer-inner { flex-wrap:wrap;gap:12px 20px }
  .footer-inner p { order:3;width:100%;font-size:13px }
}
@media(max-width:390px) {
  .brand { font-size:16px }
  .header-download { padding-inline:12px }
  .hero-media { max-width:308px }
  .hero-art { min-height:368px }
  .hero-art img { height:356px }
  .download-top { padding:20px }
}
@media(max-width:340px) {
  .container { width:calc(100% - 32px) }
  .update-card a { grid-template-columns:100px minmax(0,1fr) }
  .update-card img { width:100px;height:auto }
  .book-foot { flex-wrap:wrap }
  .hero h1 { font-size:40px }
}
@media(hover:hover) and (pointer:fine) {
  .button-primary:hover { transform:translateY(-2px);box-shadow:inset 0 2px 1px #ffffff90,inset 0 -3px 1px #be315a24,0 6px 0 #d94c71,0 14px 26px #ef64853b }
  .button-primary:hover:before { transform:translateX(120%) }
  .button-primary:active { transform:translateY(3px);box-shadow:inset 0 1px 3px #9b294a22,0 1px 0 #d94c71,0 4px 10px #ef64851f }
  .book-card:hover, .update-card:hover { transform:translateY(-4px);border-color:#f0b4c3;box-shadow:0 12px 26px #ba506d12 }
  .book-card:hover h3 { color:var(--accent) }
  .hero-media:hover .hero-art img { transform:translateY(-18px) scale(1.04) }
}
.book-card:focus-within, .update-card:focus-within { border-color:var(--accent);box-shadow:0 0 0 3px #ff66821a }
.button-primary:focus-visible:before { transform:translateX(120%) }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *, *:before, *:after { transition:none!important }
  .button-primary:hover, .button-primary:active, .book-card:hover, .update-card:hover { transform:none }
  .hero-media:hover .hero-art img { transform:translateY(-12px) scale(1.04) }
  .button-primary:before { display:none }
}

.header-download { min-height:40px;padding:8px 22px;font-size:14px; }
.hero-actions .button-primary { min-width:300px;min-height:58px;font-size:18px; }
.book-card, .update-card { scroll-margin-top:calc(var(--header-height) + 24px); }
.faq-section { padding-top:0; }
.faq-section>.container { border-top:1px solid var(--line);padding-top:var(--section-space); }
.faq-list { display:grid;gap:14px; }
.faq-list details { border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); }
.faq-list details[open] { border-color:#e8b6c5; }
.faq-list summary { position:relative;cursor:pointer;list-style:none;padding:22px 62px 22px 24px;font-size:17px;font-weight:600;line-height:1.7; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"";position:absolute;right:24px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent)) center/10px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 10px no-repeat,var(--surface-soft); }
.faq-list details[open] summary::after { background:linear-gradient(var(--accent),var(--accent)) center/10px 2px no-repeat,var(--surface-soft); }
.faq-list summary:focus-visible { outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--radius); }
.faq-list p { margin:0;padding:0 24px 24px;color:var(--muted);font-size:15px;line-height:1.85; }
.download-details { padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
.download-button { margin-top:0;min-height:58px;font-size:18px; }
@media(max-width:700px) {
  .header-download { min-height:36px;padding:7px 18px;font-size:12px; }
  .hero-actions .button-primary { min-width:0; }
  .faq-list summary { padding:19px 48px 19px 18px;font-size:15px; }
  .faq-list summary::after { right:16px; }
  .faq-list p { padding:0 18px 20px;font-size:14px; }
}