
:root{
  --bg:#fff9fb;
  --paper:#ffffff;
  --ink:#231d22;
  --muted:#8d7c85;
  --pink:#e8759a;
  --pink2:#ffbfd1;
  --pink-soft:#fdeaf0;
  --blue:#2879ec;
  --blue2:#8fc5ff;
  --blue-soft:#eaf4ff;
  --line:rgba(35,29,34,.09);
  --shadow:0 28px 80px rgba(66,31,49,.12);
  --radius:32px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:
    radial-gradient(circle at 9% 11%,rgba(255,203,220,.38),transparent 22%),
    radial-gradient(circle at 91% 14%,rgba(157,207,255,.25),transparent 24%),
    var(--bg);
  font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  overflow-x:hidden
}
body.locked{overflow:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E")
}
.topbar{
  position:absolute;z-index:30;top:0;left:0;right:0;height:92px;padding:0 5vw;
  display:flex;align-items:center;justify-content:space-between
}
.brand{display:flex;align-items:center;gap:13px}
.brand-orbit{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(232,117,154,.32);
  display:grid;place-items:center;position:relative
}
.brand-orbit:after{content:"";position:absolute;width:48px;height:16px;border:1px solid rgba(40,121,236,.25);border-radius:50%;transform:rotate(-28deg)}
.brand-orbit i{width:7px;height:7px;background:linear-gradient(135deg,var(--pink),var(--blue));border-radius:50%}
.brand strong{display:block;font-size:11px;letter-spacing:.22em}
.brand small{display:block;margin-top:5px;font-size:8px;letter-spacing:.13em;color:#a18c96}
.desktop-nav{display:flex;gap:34px}
.desktop-nav a{font-size:9px;font-weight:800;letter-spacing:.18em;color:#765f6a;position:relative;padding:8px 0}
.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:linear-gradient(90deg,var(--pink),var(--blue));transition:.25s}
.desktop-nav a:hover:after{right:0}
.menu-btn{display:none;border:0;background:none;width:40px;height:40px;padding:10px}
.menu-btn span{display:block;height:1px;background:var(--ink);margin:7px 0;transition:.2s}
.mobile-nav{display:none}

.hero{
  min-height:100vh;position:relative;display:grid;grid-template-columns:42% 58%;
  padding:130px 5vw 70px;align-items:center;overflow:hidden
}
.hero:before{
  content:"";position:absolute;left:-10vw;top:17%;width:36vw;height:36vw;border-radius:50%;
  border:1px solid rgba(232,117,154,.1)
}
.hero:after{
  content:"";position:absolute;right:-8vw;bottom:-8vw;width:38vw;height:38vw;border-radius:50%;
  border:1px solid rgba(40,121,236,.1)
}
.hero-bg-text{
  position:absolute;left:2vw;bottom:-1.8vw;font-size:clamp(110px,18vw,320px);line-height:.8;
  letter-spacing:-.08em;font-weight:900;color:rgba(61,36,48,.025);pointer-events:none
}
.hero-copy{position:relative;z-index:3;padding-left:4vw}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:9px;font-weight:900;letter-spacing:.23em;color:#9f7686}
.eyebrow span{width:34px;height:1px;background:linear-gradient(90deg,var(--pink),var(--blue))}
.hero h1{font-family:"Songti SC","STSong",serif;font-size:clamp(74px,8.2vw,142px);font-weight:500;line-height:.82;letter-spacing:-.08em;margin:26px 0 0}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--pink) 0%,#b36aa9 45%,var(--blue) 100%);-webkit-background-clip:text;color:transparent}
.hero-en{margin:26px 0 0;font-size:13px;letter-spacing:.3em;font-weight:300;color:#9a7182}
.hero-desc{margin:28px 0 0;line-height:2;color:var(--muted);font-size:14px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.pill{border-radius:999px;padding:14px 20px;font-size:10px;font-weight:900;letter-spacing:.12em;display:inline-flex;align-items:center;gap:22px;transition:.22s}
.pill.primary{background:var(--ink);color:#fff}
.pill.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(35,29,34,.2)}
.pill.ghost{border:1px solid var(--line);background:rgba(255,255,255,.55);backdrop-filter:blur(12px)}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:44px}
.hero-chips span{font-size:8px;letter-spacing:.15em;border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:#9a7e8a;background:rgba(255,255,255,.45)}

.hero-art{height:min(76vh,850px);position:relative;display:flex;align-items:center;justify-content:center}
.portrait{margin:0;position:absolute;overflow:hidden;background:#fff;box-shadow:var(--shadow);z-index:3}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait figcaption{
  position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.72);backdrop-filter:blur(16px)
}
.portrait figcaption b{font-size:10px;letter-spacing:.15em}
.portrait figcaption span{font-size:8px;letter-spacing:.12em;color:#957481}
.portrait-pink{width:min(49%,420px);height:84%;left:9%;top:9%;border-radius:170px 170px 30px 30px;transform:rotate(-2.2deg)}
.portrait-pink img{object-position:center 25%}
.portrait-blue{width:min(46%,390px);height:70%;right:7%;bottom:4%;border-radius:26px 150px 28px 150px;transform:rotate(2.5deg)}
.portrait-blue img{object-position:center 40%}
.hero-ring{position:absolute;border-radius:50%;z-index:1}
.ring-a{width:38vw;height:38vw;max-width:600px;max-height:600px;border:1px solid rgba(232,117,154,.16);left:3%;top:1%}
.ring-b{width:32vw;height:32vw;max-width:520px;max-height:520px;border:1px solid rgba(40,121,236,.15);right:1%;bottom:0}
.scroll-cue{position:absolute;left:5vw;bottom:28px;font-size:8px;font-weight:900;letter-spacing:.18em;color:#ad919c;display:flex;gap:12px}

.section{padding:110px 9vw}
.section-head{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin-bottom:54px}
.section-head>div{display:flex;align-items:center;gap:14px}
.index{font:italic 500 12px Georgia,serif;color:#b2939e}
.label,.micro{font-size:9px;font-weight:900;letter-spacing:.22em;color:var(--pink)}
.section-head h2{grid-column:1;margin:0;font:500 clamp(42px,5.6vw,82px)/1 "Songti SC","STSong",serif;letter-spacing:-.04em}
.section-head>p{grid-column:2;grid-row:2;margin:0 0 8px;max-width:280px;color:var(--muted);font-size:12px;line-height:1.7;text-align:right}

.characters{padding-top:70px}
.character-card{
  display:grid;grid-template-columns:44% 56%;min-height:650px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:36px;overflow:hidden;margin-bottom:34px
}
.char-photo{position:relative;min-height:650px;background:linear-gradient(180deg,#fff,#fff0f5);overflow:hidden}
.char-photo img{width:100%;height:100%;object-fit:cover}
.char-photo>img[alt*="蕾蕾"]{object-position:center}
.char-code{position:absolute;top:22px;left:22px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border-radius:999px;padding:9px 12px;font-size:9px;font-weight:900;letter-spacing:.14em}
.char-copy{padding:64px 60px;display:flex;flex-direction:column}
.char-top{display:flex;justify-content:space-between;gap:20px;align-items:start}
.char-top h3{font:500 44px/1.1 "Songti SC","STSong",serif;margin:15px 0 0}
.char-top h3 em{display:block;font:300 13px/1.6 system-ui;letter-spacing:.25em;color:#a27b8b;margin-top:9px}
.role{border-radius:999px;padding:9px 12px;font-size:9px;font-weight:900;letter-spacing:.12em}
.role.pink{color:#c55279;background:#fff0f5;border:1px solid #f7c9d7}
.role.blue{color:#1c69ce;background:#edf6ff;border:1px solid #c6e1ff}
.char-lead{font:500 24px/1.65 "Songti SC","STSong",serif;margin:44px 0 0;max-width:520px}
.char-body{color:var(--muted);font-size:13px;line-height:2;margin:20px 0 30px;max-width:560px}
.specs{margin:0;border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:16px 0}
.specs dt{font-size:10px;color:#a28792}
.specs dd{margin:0;font-size:11px;font-weight:800}
.inline-link{margin-top:auto;padding-top:32px;font-size:9px;font-weight:900;letter-spacing:.17em;color:var(--pink);display:flex;justify-content:space-between}
.zero-card{grid-template-columns:48% 52%}
.zero-card .char-photo{order:2;background:linear-gradient(180deg,#f5faff,#eaf4ff)}
.zero-card .char-copy{order:1}
.zero-photo img{object-fit:contain;padding:20px;background:white}
.blue-text{color:var(--blue)!important}

.design{padding-top:54px}
.design-tabs{display:flex;gap:8px;margin-bottom:24px}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 16px;font-size:9px;font-weight:900;letter-spacing:.13em;cursor:pointer}
.tab.active{background:var(--ink);color:white}
.design-panel{display:none;grid-template-columns:repeat(3,1fr);gap:18px}
.design-panel.active{display:grid}
.design-shot{position:relative;border:0;padding:0;background:#fff;border-radius:26px;overflow:hidden;cursor:zoom-in;box-shadow:0 18px 50px rgba(55,38,47,.08);min-height:520px}
.design-shot img{width:100%;height:100%;object-fit:contain;background:#fff}
.design-shot span{position:absolute;left:16px;bottom:16px;padding:9px 11px;border-radius:999px;background:rgba(255,255,255,.84);backdrop-filter:blur(10px);font-size:8px;font-weight:900;letter-spacing:.16em}
.zero-design-panel{grid-template-columns:1fr!important}
.design-shot.wide{min-height:auto;max-height:900px}
.design-shot.wide img{max-height:900px}

.gallery{padding-top:60px}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:16px}
.gallery-item{border:0;padding:0;position:relative;border-radius:28px;overflow:hidden;cursor:zoom-in;background:#eee;box-shadow:0 16px 45px rgba(54,33,44,.08)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery-item:hover img{transform:scale(1.025)}
.gallery-item span{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.76);backdrop-filter:blur(14px)}
.gallery-item b{font-size:9px;letter-spacing:.14em}
.gallery-item small{font-size:7px;letter-spacing:.12em;color:#967783}
.gallery-item:nth-child(1){grid-column:span 4;grid-row:span 4}
.gallery-item:nth-child(2){grid-column:span 4;grid-row:span 3}
.gallery-item:nth-child(3){grid-column:span 8;grid-row:span 2}
.gallery-item:nth-child(4){grid-column:span 4;grid-row:span 4}
.gallery-item:nth-child(5){grid-column:span 4;grid-row:span 4}
.pink-glow{box-shadow:0 18px 50px rgba(232,117,154,.16)}
.blue-glow{box-shadow:0 18px 50px rgba(40,121,236,.14)}
.dark-card span{background:rgba(25,20,23,.70);color:#fff}
.dark-card small{color:#e3cbd4}

.world-wrap{padding:80px 5vw 50px}
.world{
  border-radius:42px;padding:90px 5vw 86px;color:white;overflow:hidden;position:relative;
  background:
    radial-gradient(circle at 13% 12%,rgba(237,112,154,.28),transparent 27%),
    radial-gradient(circle at 87% 20%,rgba(59,133,236,.32),transparent 27%),
    linear-gradient(135deg,#201820,#0f1824 72%)
}
.world:before{
  content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-180px;top:-120px
}
.world:after{
  content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.06);border-radius:50%;right:-70px;top:-10px
}
.world-head{position:relative;z-index:2}
.world-head>div{display:flex;align-items:center;gap:14px}
.world-head .index,.world-head .label{color:#eeb9cc}
.world-head h2{font:500 clamp(48px,6vw,88px)/1 "Songti SC","STSong",serif;margin:24px 0 12px}
.world-head>p{margin:0;color:#bcb0b7;font-size:12px}
.world-intro{position:relative;z-index:2;display:grid;grid-template-columns:180px 1fr;gap:40px;border-top:1px solid rgba(255,255,255,.12);padding-top:42px;margin-top:58px}
.world-intro span{font-size:9px;font-weight:900;letter-spacing:.2em;color:#f1bbcd}
.world-intro p{font:500 clamp(24px,3vw,42px)/1.65 "Songti SC","STSong",serif;margin:0;max-width:930px}
.world-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:58px}
.world-card{padding:28px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px)}
.world-card b{font-size:8px;letter-spacing:.2em;color:#b9cae9}
.world-card h3{font:500 24px "Songti SC","STSong",serif;margin:18px 0 12px}
.world-card p{margin:0;color:#bcb2b9;font-size:12px;line-height:1.9}
.storyline{position:relative;z-index:2;display:grid;grid-template-columns:30% 70%;gap:40px;margin-top:80px;padding-top:50px;border-top:1px solid rgba(255,255,255,.12)}
.story-title span{font-size:8px;font-weight:900;letter-spacing:.22em;color:#a9bfdf}
.story-title h3{font:500 32px/1.5 "Songti SC","STSong",serif;margin:15px 0 0;max-width:260px}
.storyline ol{list-style:none;margin:0;padding:0}
.storyline li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08)}
.storyline li:first-child{border-top:0}
.storyline li>b{font:italic 500 12px Georgia,serif;color:#8294ab}
.storyline strong{font:500 20px "Songti SC","STSong",serif}
.storyline p{margin:8px 0 0;color:#aaa0a6;font-size:12px;line-height:1.8}

.links{padding-top:70px;padding-bottom:110px}
.link-card{border-radius:34px;background:linear-gradient(135deg,#fff,#fff0f5 54%,#edf6ff);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;border:1px solid white;box-shadow:var(--shadow)}
.link-card h2{font:500 48px "Songti SC","STSong",serif;margin:13px 0 8px}
.link-card p{color:var(--muted);margin:0}
.link-card>a{display:grid;grid-template-columns:50px 1fr auto;gap:18px;align-items:center;border-radius:22px;padding:20px;background:rgba(255,255,255,.75);border:1px solid var(--line);transition:.22s}
.link-card>a:hover{transform:translateY(-2px)}
.xmark{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#171317;color:#fff;font-size:20px}
.link-card>a small{display:block;font-size:8px;letter-spacing:.17em;color:#a38491;margin-bottom:5px}
.link-card>a strong{font-size:16px}

footer{margin:0 5vw 30px;padding:28px 2vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:#9a808b;font-size:9px}
.footer-brand strong{display:block;color:#6d5861;letter-spacing:.16em}
.footer-brand span{display:block;margin-top:5px;letter-spacing:.14em}
footer p{text-align:center;margin:0}
footer>a{text-align:right;font-weight:800;letter-spacing:.13em}

.lightbox{width:min(94vw,1500px);height:min(92vh,1100px);padding:0;border:0;border-radius:24px;background:#131014;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.45)}
.lightbox::backdrop{background:rgba(15,11,14,.82);backdrop-filter:blur(12px)}
.lightbox img{width:100%;height:100%;object-fit:contain}
.lightbox-close{position:absolute;right:15px;top:15px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,15,18,.6);color:#fff;font-size:26px;cursor:pointer;z-index:3}
.lightbox-note{position:absolute;left:18px;bottom:18px;color:rgba(255,255,255,.56);font-size:8px;letter-spacing:.15em}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:1050px){
  .desktop-nav{display:none}
  .menu-btn{display:block}
  .mobile-nav{
    display:flex;position:absolute;z-index:29;right:5vw;top:76px;min-width:210px;flex-direction:column;padding:8px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s
  }
  .mobile-nav.open{opacity:1;transform:none;pointer-events:auto}
  .mobile-nav a{font-size:9px;font-weight:900;letter-spacing:.15em;padding:13px 14px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:135px}
  .hero-copy{padding:0 5vw 48px}
  .hero-art{height:76vh}
  .hero-bg-text{font-size:27vw}
  .character-card,.zero-card{grid-template-columns:1fr 1fr}
  .char-copy{padding:46px 38px}
  .world-cards{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-auto-rows:150px}
}
@media (max-width:760px){
  .topbar{height:76px}
  .brand small{display:none}
  .hero{padding-left:0;padding-right:0}
  .hero-copy{padding-left:7vw;padding-right:7vw}
  .hero h1{font-size:74px}
  .hero-art{height:66vh}
  .portrait-pink{left:5%;width:58%;height:84%}
  .portrait-blue{right:2%;width:52%;height:64%}
  .section{padding:76px 6vw}
  .section-head{display:block}
  .section-head h2{font-size:48px;margin-top:16px}
  .section-head>p{text-align:left;margin-top:12px;max-width:none}
  .character-card,.zero-card{grid-template-columns:1fr}
  .zero-card .char-photo,.zero-card .char-copy{order:initial}
  .char-photo{min-height:540px}
  .char-copy{padding:36px 28px}
  .char-top h3{font-size:38px}
  .char-lead{font-size:21px;margin-top:34px}
  .design-panel{grid-template-columns:1fr}
  .design-shot{min-height:auto}
  .gallery-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:260px}
  .gallery-item:nth-child(n){grid-column:span 1;grid-row:span 1}
  .gallery-item:nth-child(1),.gallery-item:nth-child(4),.gallery-item:nth-child(5){grid-row:span 2}
  .gallery-item:nth-child(3){grid-column:span 2}
  .world-wrap{padding:30px 3vw}
  .world{padding:66px 6vw;border-radius:30px}
  .world-intro{grid-template-columns:1fr;gap:16px}
  .world-cards{grid-template-columns:1fr}
  .storyline{grid-template-columns:1fr}
  .link-card{grid-template-columns:1fr;padding:30px}
  footer{grid-template-columns:1fr;text-align:center;gap:12px}
  footer>a{text-align:center}
}
@media (max-width:480px){
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-art{height:58vh}
  .portrait-pink{width:62%;left:1%}
  .portrait-blue{width:58%;right:-4%}
  .hero-chips{display:none}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:330px}
  .gallery-item:nth-child(n){grid-column:1;grid-row:span 1}
  .gallery-item:nth-child(3){grid-column:1}
  .gallery-item:nth-child(1),.gallery-item:nth-child(4),.gallery-item:nth-child(5){grid-row:span 2}
}


/* --- V3 / Updates --- */
.updates{padding-top:70px}
.updates-shell{
  display:grid;grid-template-columns:34% 66%;gap:0;border-radius:34px;overflow:hidden;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)
}
.updates-intro{padding:46px;background:linear-gradient(155deg,#fff1f6,#f1f7ff);border-right:1px solid var(--line)}
.updates-intro h3{font:500 34px/1.2 "Songti SC","STSong",serif;margin:17px 0 14px}
.updates-intro p{color:var(--muted);font-size:12px;line-height:1.9;margin:0 0 28px}
.admin-entry{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;padding:11px 14px;font-size:8px;font-weight:900;letter-spacing:.14em}
.updates-list{padding:8px 34px}
.update-item{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}
.update-item:last-child{border-bottom:0}
.update-item time{font-size:10px;font-weight:800;letter-spacing:.12em;color:#aa8291;padding-top:3px}
.update-item strong{font-size:13px;letter-spacing:.08em}
.update-item p{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.8}
.footer-actions{display:flex;justify-content:flex-end;gap:20px;font-weight:800;letter-spacing:.13em}
.footer-actions a:first-child{color:var(--pink)}
@media(max-width:760px){
  .updates-shell{grid-template-columns:1fr}
  .updates-intro{border-right:0;border-bottom:1px solid var(--line);padding:30px}
  .updates-list{padding:4px 24px}
  .update-item{grid-template-columns:88px 1fr;gap:16px}
  .footer-actions{justify-content:center}
}
