:root { --pink:#f45591; --rose:#d94681; --ink:#63334e; --line:#f2d8e5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:#6e5866; font:14px 'Noto Sans SC',sans-serif; background:radial-gradient(circle at 8% 10%,#ffe3f1 0,transparent 28%),radial-gradient(circle at 95% 30%,#f9d9ed 0,transparent 28%),linear-gradient(135deg,#fff 0%,#fff5fa 50%,#fbe8f4 100%); }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 max(4.5vw,34px); background:#fffbfdf2; box-shadow:0 2px 12px #bf71952b; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:8px; color:#b84378; font:700 24px 'Noto Serif SC',serif; white-space:nowrap; }
.brand>i { font-size:35px; }.brand small { display:block; color:#bd85a1; font:8px 'Noto Sans SC'; letter-spacing:3px; text-align:center; }
.site-header nav { display:flex; align-items:stretch; gap:34px; height:100%; }.site-header nav a { position:relative; display:flex; align-items:center; color:#443842; font-weight:600; }.site-header nav .active { color:var(--pink); }.site-header nav .active:after { content:''; position:absolute; right:0; bottom:11px; left:0; height:3px; border-radius:5px; background:var(--pink); }
.header-actions { display:flex; align-items:center; gap:10px; }.login,.button { display:inline-block; border-radius:12px; padding:10px 24px; }.login { border:1px solid var(--line); background:#fff; color:#70495d; }.button { color:#fff; background:linear-gradient(115deg,#fa6c9d,#ec3e87); box-shadow:0 7px 14px #ec6b9b55; font-size:16px; font-weight:700; transition:.2s; }.button:hover { transform:translateY(-2px); box-shadow:0 10px 20px #ec6b9b70; }.button-small { padding:10px 18px; font-size:14px; }.menu-toggle { display:none; border:0; background:transparent; color:#9b3a68; font-size:23px; }
.hero { position:relative; display:flex; align-items:center; min-height:367px; padding:39px max(6vw,55px) 18px; overflow:hidden; background:linear-gradient(100deg,#fff3f8e8 10%,#f8d7eaaa 100%); }.hero:before { content:''; position:absolute; top:-300px; left:-170px; width:650px; height:650px; border:35px solid #fff5fa80; border-radius:50%; }.hero-copy { position:relative; z-index:1; width:48%; min-width:480px; }.eyebrow { margin:0 0 3px; color:#d5769f; letter-spacing:2px; }.hero h1 { margin:0; color:#542a44; font:900 clamp(38px,4.5vw,64px)/1.24 'Noto Serif SC',serif; letter-spacing:2px; }.hero h1 em { color:#f24c8d; font-style:normal; }.hero-description { margin:11px 0; color:#916476; font:18px 'Noto Serif SC'; }.hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }.hero-tags span { padding:7px 10px; border:1px solid #f5d5e3; border-radius:5px; background:#fffcfecc; color:#a46583; font-size:12px; }.hero-button { padding:11px 38px; }
.hero-characters { display:flex; align-items:center; gap:12px; height:340px; margin-left:10px; transform:perspective(800px) rotateY(-6deg); }.hero-card { width:132px; height:277px; overflow:hidden; border:4px solid #fff9fd; border-radius:16px; background:#594957; box-shadow:0 8px 15px #8a456353; color:#fff; text-align:center; }.hero-card.lead-card { z-index:1; width:178px; height:337px; }.art-placeholder { display:flex; align-items:center; justify-content:center; height:82%; color:#ffffff99; background:linear-gradient(145deg,#74566f,#e5c2d3 48%,#594254); }.lead-card .art-placeholder { background:linear-gradient(145deg,#d5c2db,#8f9ebd 48%,#6d5d83); }.dark-card .art-placeholder { background:linear-gradient(145deg,#26232c,#61465a 50%,#b392a5); }.warm-card .art-placeholder { background:linear-gradient(145deg,#b38a72,#f3d4be 50%,#795b51); }.hero-card strong { display:block; font:700 19px 'Noto Serif SC'; }.hero-card small { font-size:11px; }
.section-title { margin:0; color:#79405d; font:700 27px 'Noto Serif SC'; text-align:center; }.section-title:before,.section-title:after { content:'♡'; margin:0 20px; color:#ed9dbd; font-size:22px; }.section-subtitle { margin:2px 0 17px; color:#b4819c; font-size:12px; text-align:center; }
.intro-features { max-width:1000px; margin:0 auto; padding:32px 25px 20px; }.intro-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:17px; }.intro-grid article { display:flex; align-items:center; gap:25px; min-height:190px; padding:27px 25px; border:1px solid #efd8e4; border-radius:28px; background:linear-gradient(135deg,#fffdfd,#fff4f9); box-shadow:0 8px 18px #dd9aba21; }.intro-grid article>i { display:grid; flex:none; place-items:center; width:112px; height:112px; border-radius:50%; background:linear-gradient(135deg,#86cf85,#1ebf85 70%); box-shadow:inset 0 0 0 6px #ffffff80,0 8px 16px #83cba959; color:#fff; font-size:55px; }.intro-grid article:nth-child(2)>i,.intro-grid article:nth-child(4)>i { background:linear-gradient(135deg,#ffb7d1,#ee6097); }.intro-grid article:nth-child(3)>i { background:linear-gradient(135deg,#c8afff,#9775e7); }.intro-grid h3 { margin:0 0 14px; color:var(--rose); font:700 25px 'Noto Serif SC'; }.intro-grid p { margin:0; color:#765e6d; font:16px/1.8 'Noto Serif SC'; }
.features { padding:24px max(2vw,20px); }.feature-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; max-width:1040px; margin:12px auto 0; padding:20px 25px; border:1px solid #f0d4e2; border-radius:22px; background:#fffafdcc; }.feature-grid article { position:relative; min-height:115px; padding:19px 12px; border:1px solid #f2dfe8; border-radius:16px; background:linear-gradient(135deg,#fff,#fff9fc); box-shadow:0 4px 10px #e2a9c621; }.feature-grid article>i { position:absolute; top:12px; right:13px; font-size:34px; }.violet { color:#a989e9; }.pink { color:#f78fb6; }.blue { color:#9e9bea; }.feature-grid h3 { margin:15px 0 7px; color:#754261; font:700 16px 'Noto Serif SC'; }.feature-grid p { margin:0; color:#9b8490; font-size:10px; line-height:1.7; }
.characters { max-width:1120px; margin:auto; padding:2px 20px 26px; }.character-swiper { display:flex; align-items:center; gap:12px; max-width:1100px; margin:0 auto; }.swiper-viewport { flex:1; overflow-x:auto; cursor:grab; scroll-snap-type:x mandatory; scrollbar-width:none; }.swiper-viewport::-webkit-scrollbar { display:none; }.swiper-track { display:flex; gap:14px; padding:2px; }.character-item { display:flex; flex:0 0 calc(25% - 11px); gap:10px; min-height:145px; padding:9px; border:1px solid #f0dce6; border-radius:15px; background:#fffafd; scroll-snap-align:start; }.portrait { display:flex; flex:none; align-items:center; justify-content:center; width:85px; border-radius:10px; background:linear-gradient(135deg,#2a2633,#7c536c,#ead4dd); color:#fff9; font-size:10px; text-align:center; }.p2 { background:linear-gradient(135deg,#a8a0c2,#d6d2e4,#605672); }.p3 { background:linear-gradient(135deg,#251f2b,#875b6e,#c99cb1); }.p4 { background:linear-gradient(135deg,#a67b68,#edd4bc,#624d48); }.character-item h3 { margin:2px 0; color:#814461; font:700 16px 'Noto Serif SC'; }.character-item small { color:#aa8c9a; font-size:10px; }.character-item p { margin:6px 0; }.character-item p span { display:block; width:max-content; margin:3px 0; padding:2px 6px; border-radius:4px; background:#f4e6ee; color:#9b7188; font-size:9px; }.character-item b { color:#f45a95; font-size:10px; }.round-arrow { display:block; flex:none; width:36px; height:36px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px #cb8aa443; color:#ed82ad; }.dots { margin-top:12px; text-align:center; }.dots i { display:inline-block; width:6px; height:6px; margin:0 3px; border-radius:50%; background:#f1cada; }.dots .active { background:#f35191; }
.moments { max-width:1040px; margin:0 auto 26px; padding:19px 23px 17px; border:1px solid #f0dbe5; border-radius:22px; background:#fffafdcc; box-shadow:0 7px 17px #df9dba1a; }.moments-heading { display:flex; align-items:baseline; gap:15px; }.moments-heading h2 { margin:0; color:#7d405e; font:700 26px 'Noto Serif SC'; }.moments-heading span { color:#ad8297; font-size:11px; }.moments-heading a { margin-left:auto; color:#bd7194; font-size:12px; }.moment-list { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:12px; }.moment-list article { position:relative; padding:12px; border:1px solid #f3e2ea; border-radius:14px; background:#fff8fb; }.moment-user { display:flex; align-items:center; gap:7px; color:#83536b; }.moment-user>i { color:#eeb6ca; font-size:25px; }.moment-user b { font-size:12px; }.moment-user small { margin-left:auto; color:#ac96a1; font-size:9px; }.moment-list p { margin:10px 0 8px; color:#725968; font-size:12px; line-height:1.8; }.mini-images { display:flex; gap:5px; }.mini-images i { width:44px; height:38px; border-radius:5px; background:linear-gradient(135deg,#baa2bd,#59475f,#eabfcf); }.mini-images i:nth-child(2) { background:linear-gradient(135deg,#9071a2,#d7b3c9,#55445b); }.mini-images i:nth-child(3) { background:linear-gradient(135deg,#e5c8d5,#7d6a89,#c08da4); }.like { position:absolute; right:12px; bottom:11px; color:#bd7796; font-size:10px; }.like i { color:#f1649a; }
footer { display:grid; grid-template-columns:2fr repeat(4,1fr); gap:25px; padding:30px max(5vw,45px); border-top:1px solid #f1dce5; background:#fffafa; color:#806c78; }footer>.brand { align-self:start; font-size:22px; }footer>.brand i { font-size:32px; }footer>p { grid-column:1; grid-row:2; margin:-30px 0 0; font-size:11px; }footer>p i { color:#f16b9c; }footer h4 { margin:0 0 10px; color:#5a4450; font-size:13px; }footer div a { display:block; margin:6px 0; font-size:11px; }.social span { display:flex; gap:9px; }.social span i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#9e7a8c; color:#fff; font-size:12px; }.social p { margin-top:15px; font-size:10px; line-height:1.8; }
@media(max-width:900px) { .site-header nav { gap:14px; }.hero-copy { min-width:420px; }.hero-characters { margin-left:-80px; transform:scale(.8); }.intro-grid { gap:12px; }.intro-grid article { gap:15px; padding:18px; }.intro-grid article>i { width:86px; height:86px; font-size:42px; }.intro-grid h3 { font-size:21px; }.intro-grid p { font-size:13px; }.character-item { flex-basis:calc(33.333% - 10px); }.moments { margin-right:20px; margin-left:20px; }footer { grid-template-columns:2fr repeat(3,1fr); } }
@media(max-width:640px) { .site-header { height:62px; padding:0 16px; }.brand { font-size:18px; }.brand>i { font-size:27px; }.site-header nav,.login { display:none; }.menu-toggle { display:block; }.header-actions .button-small { padding:9px 16px; border-radius:24px; font-size:14px; }.header-actions .button-small i { display:none; }.hero { min-height:390px; padding:33px 23px 20px; align-items:flex-start; }.hero-copy { width:100%; min-width:0; text-align:left; }.eyebrow { display:none; }.hero h1 { font-size:35px; }.hero-description { font-size:14px; }.hero-tags { justify-content:flex-start; gap:5px; }.hero-tags span { padding:5px; font-size:10px; }.hero-button { padding:11px 27px; font-size:14px; }.hero-characters { position:absolute; bottom:-47px; left:50%; height:250px; margin:0; transform:scale(.46); transform-origin:center bottom; }.section-title { font-size:22px; }.section-title:before,.section-title:after { margin:0 8px; }.intro-features { padding:37px 20px 16px; }.section-subtitle { margin-top:4px; }.intro-grid { grid-template-columns:1fr; gap:14px; }.intro-grid article { min-height:145px; gap:17px; padding:18px 20px; border-radius:23px; }.intro-grid article>i { width:90px; height:90px; font-size:43px; }.intro-grid h3 { margin-bottom:8px; font-size:23px; }.intro-grid p { font-size:13px; line-height:1.7; }.features { padding:20px 16px; }.feature-grid { grid-template-columns:repeat(5,160px); overflow-x:auto; padding:12px; scroll-snap-type:x mandatory; }.feature-grid article { min-height:155px; scroll-snap-align:start; }.characters { padding:2px 0 22px; }.character-swiper { gap:7px; }.swiper-viewport { padding-left:17px; }.character-item { flex-basis:176px; min-width:176px; min-height:137px; gap:8px; padding:7px; }.portrait { width:67px; }.character-item h3 { font-size:14px; }.character-swiper .round-arrow { position:absolute; z-index:2; width:30px; height:30px; font-size:12px; }.swiper-prev { left:3px; }.swiper-next { right:3px; }.dots { margin-top:9px; }.moments { margin:0 14px 19px; padding:16px 13px; }.moments-heading h2 { font-size:22px; }.moments-heading span { font-size:9px; }.moment-list { display:flex; overflow-x:auto; }.moment-list article { min-width:215px; }.moment-list article:nth-child(3) { display:none; }footer { grid-template-columns:1fr 1fr; padding:28px 24px; }footer>.brand { grid-column:1/-1; }footer>p { grid-column:1/-1; grid-row:auto; margin:-22px 0 10px; }.social { grid-column:1/-1; } }