*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:root{
--font-sans:"PingFang SC","SF Pro Text","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--font-display:"PingFang SC","SF Pro Display","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--text-label:12px;
--text-body:17px;
--text-body-large:18px;
--text-title:clamp(2.4rem,4.4vw,4.4rem);
--text-hero:clamp(3rem,5.8vw,5.6rem);
--text-card:clamp(1.85rem,2.45vw,2.45rem);
}
body{
font-family:var(--font-sans);
background:#07110f;
color:#fff;
overflow-x:hidden;
cursor:default;
line-height:1.72;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
[id]{scroll-margin-top:120px}
a:focus-visible,button:focus-visible{
outline:1px solid rgba(198,168,106,.72);
outline-offset:4px;
}
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(198,168,106,.08),transparent 25%),
radial-gradient(circle at 80% 30%,rgba(111,168,154,.08),transparent 25%),
linear-gradient(to bottom,#081511,#0d221d,#07110f);
z-index:-3;
}






.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px;
position:relative;
overflow:hidden;
}
.hero-light{
position:absolute;
width:860px;
height:860px;
background:radial-gradient(circle,rgba(198,168,106,.15),transparent 60%);
filter:blur(20px);
animation:float 12s ease-in-out infinite;
}
.small{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
margin-bottom:18px;
text-transform:uppercase;
font-size:var(--text-label);
font-weight:500;
opacity:.88;
}
h1{
font-family:var(--font-display);
font-size:var(--text-hero);
font-weight:300;
line-height:1.1;
letter-spacing:-.02em;
background:linear-gradient(to right,#f9e6c3,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.desc{
margin-top:32px;
color:rgba(255,255,255,.6);
line-height:1.75;
font-size:var(--text-body-large);
max-width:35em;
}
.enter{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:0;
padding:18px 38px;
min-height:58px;
font-size:15px;
letter-spacing:.08em;
font-weight:500;
border-radius:999px;
position:relative;
overflow:hidden;
border:1px solid rgba(198,168,106,.25);
background:rgba(255,255,255,.04);
backdrop-filter:blur(24px) saturate(140%);
color:#C6A86A;
cursor:pointer;
text-decoration:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .5s cubic-bezier(.25,1.2,.5,1),box-shadow .5s ease,border-color .4s ease;
}
.enter::before{
content:"";
position:absolute;
top:0;left:-120%;
width:80%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
transition:left .8s ease;
z-index:2;
pointer-events:none;
}
.enter:hover{
transform:translateY(-3px);
border-color:rgba(198,168,106,.4);
box-shadow:0 20px 50px rgba(198,168,106,.12),inset 0 1px 0 rgba(255,255,255,.10);
}
.enter:hover::before{left:130%}
.enter:active{transform:scale(.97)}
.enter-secondary{
background:rgba(111,168,154,.08);
border-color:rgba(111,168,154,.25);
color:#d8ebe6;
}
.section{
padding:140px 8%;
position:relative;
}
.section-head{
display:grid;
gap:18px;
margin-bottom:56px;
}
.title{
font-family:var(--font-display);
font-size:var(--text-title);
font-weight:300;
margin-bottom:24px;
line-height:1.14;
letter-spacing:-.02em;
background:linear-gradient(to right,#f7e6c8,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.text{
max-width:940px;
line-height:1.75;
color:rgba(255,255,255,.6);
font-size:var(--text-body);
}
.fade{
opacity:0;
filter:blur(4px);
transform:translate3d(0,30px,0);
transition:opacity .8s cubic-bezier(.25,1.2,.5,1),transform .9s cubic-bezier(.25,1.2,.5,1),filter .7s ease;
will-change:auto;
}
.fade.animating{will-change:opacity,transform,filter}
.fade.show{
opacity:1;
filter:blur(0);
transform:translate3d(0,0,0);
}
.tangshu-hero{
padding:150px 7% 90px;
}
.hero-layout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);
gap:38px;
align-items:center;
width:min(1180px,100%);
}
.hero-curtain,
.hero-depth{
position:absolute;
pointer-events:none;
}
.hero-curtain{
width:280px;
top:8%;
bottom:0;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.01));
filter:blur(2px);
opacity:.3;
}
.hero-curtain-a{
left:6%;
clip-path:polygon(0 0,100% 0,74% 100%,0 100%);
}
.hero-curtain-b{
right:6%;
clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);
}
.hero-depth{
inset:14% 10%;
border:1px solid rgba(198,168,106,.08);
border-radius:42px;
background:
linear-gradient(rgba(198,168,106,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(198,168,106,.03) 1px,transparent 1px);
background-size:84px 84px;
mask-image:radial-gradient(circle at center,rgba(0,0,0,1),transparent 88%);
}
.hero-figure{
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:660px;
}
.figure-halo{
position:absolute;
width:100%;
aspect-ratio:1/1.2;
border-radius:50%;
background:
radial-gradient(circle at 50% 34%,rgba(198,168,106,.22),transparent 38%),
radial-gradient(circle at 50% 70%,rgba(111,168,154,.16),transparent 46%);
filter:blur(28px);
animation:float 14s ease-in-out infinite;
}
.hero-content{
position:relative;
text-align:left;
}
.scroll-input{
margin-top:34px;
padding:20px 26px;
border-radius:28px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
display:grid;
gap:14px;
}
.scroll-label{
color:rgba(255,255,255,.72);
letter-spacing:.18em;
font-size:14px;
}
.scroll-line{
display:block;
height:1px;
background:linear-gradient(to right,rgba(198,168,106,.1),rgba(198,168,106,.8),rgba(198,168,106,.08));
}
.hero-actions{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:46px;
}
.finale-content .enter{margin-top:34px}
/* .page-transition-overlay → common.css */
.image-placeholder{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.07);
background:
linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
radial-gradient(circle at top,rgba(198,168,106,.18),transparent 42%),
linear-gradient(180deg,rgba(7,17,15,.3),rgba(7,17,15,.74));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.2);
}
.image-placeholder::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 60%);


}
.image-placeholder span{
position:absolute;
left:22px;
right:22px;
bottom:18px;
color:rgba(255,255,255,.78);
font-size:12px;
letter-spacing:.22em;
line-height:1.8;
text-transform:uppercase;
}
.figure-placeholder{
width:min(100%,420px);
aspect-ratio:4/5.5;
border-radius:36px;
}
.memory-layout,
.dialogue-shell,
.scene-shell{
display:grid;
gap:28px;
}
.memory-layout{
grid-template-columns:260px minmax(0,1fr);
align-items:start;
}
.memory-cloud{
display:grid;
gap:16px;
}
/* 按钮选中状态 */
.memory-shard.active {
  background: linear-gradient(145deg, rgba(198,168,106,.12), rgba(111,168,154,.08));
  border-color: rgba(198,168,106,.28);
  color: #f1dfbb;
  transform: translateY(-3px);
}

/* 面板淡入动画 */
.memory-panel {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.memory-panel.active {
  opacity: 1;
}

.memory-shard,
.dialogue-tab,
.scene-tab{
padding:18px 22px;
border:none;
border-radius:24px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
cursor:pointer;
transition:.4s;
text-align:left;
}
.memory-shard:hover,
.memory-shard.active,
.dialogue-tab:hover,
.dialogue-tab.active,
.scene-tab:hover,
.scene-tab.active{
transform:translateY(-3px);
border-color:rgba(198,168,106,.28);
background:linear-gradient(145deg,rgba(198,168,106,.12),rgba(111,168,154,.08));
color:#f1dfbb;
}
.memory-stage,
.dialogue-stage,
.scene-stage,
.growth-tree,
.finale-content{
position:relative;
overflow:hidden;
border-radius:34px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
}
.memory-stage::before,
.dialogue-stage::before,
.scene-stage::before,
.growth-tree::before,
.finale-content::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,rgba(198,168,106,.14),transparent 42%);
pointer-events:none;
}
.memory-stage{
padding:30px;
}
.memory-panel{
display:none;
grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
gap:24px;
align-items:center;
}
.memory-panel.active{display:grid}
.memory-placeholder{
min-height:360px;
border-radius:28px;
}
.memory-copy{
display:grid;
gap:14px;
}
.memory-meta,
.bubble-label{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
font-size:11px;
text-transform:uppercase;
}
.memory-copy h3,
.scene-copy h3,
.growth-branch h3{
font-family:var(--font-display);
font-size:var(--text-card);
font-weight:300;
line-height:1.28;
letter-spacing:-.015em;
color:#f2dfbc;
}
.memory-copy p,
.dialogue-card p,
.scene-copy p,
.growth-branch p,
.finale-text{
color:rgba(255,255,255,.6);
line-height:1.9;
font-size:16px;
}
.dialogue-shell{
grid-template-columns:320px minmax(0,1fr);
align-items:start;
}
.dialogue-portrait{
min-height:460px;
border-radius:30px;
}
.dialogue-stage {
  background: linear-gradient(180deg, #0f2a24, #1b3a33);
  color: #fff;
  font-family: "Noto Sans SC", sans-serif;
  padding: 20px;
  border-radius: 12px;
}
.dialogue-tab {
  background: none;
  border: none;
  color: #d9c48c;
  font-size: 16px;
  margin-right: 12px;
  cursor: pointer;
}

.dialogue-tab.active {
  border-bottom: 2px solid #d9c48c;
}

.dialogue-card {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
}

.message.from-tangshu {
  background: rgba(217, 196, 140, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  color: #f5e9c8;
}


.dialogue-input-area {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

#dialogueInput {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 10px;
  font-size: 14px;
}

#sendBtn {
  background-color: #f5d76e;
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: bold;
}
.dialogue-tabs,
.scene-tabs{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-bottom:24px;
}

.dialogue-card{
display:grid;
gap:18px;
padding:24px;
border-radius:28px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
}
.dialogue-user,
.dialogue-ai{
display:grid;
gap:10px;
}
.dialogue-user p,
.dialogue-ai{
padding:18px 20px;
border-radius:22px;
}
.dialogue-user p{
background:rgba(255,255,255,.05);
}
.dialogue-ai{
background:linear-gradient(145deg,rgba(198,168,106,.1),rgba(111,168,154,.05));
border:1px solid rgba(255,255,255,.07);
}
.dialogue-ai div{
display:grid;
gap:10px;
}
.scene-stage{
padding:30px;
}
.scene-panel{
display:none;
grid-template-columns:minmax(0,1fr) minmax(280px,.88fr);
gap:24px;
align-items:center;
}
.scene-panel.active{display:grid}
.scene-placeholder{
min-height:340px;
border-radius:28px;
}
.scene-copy{
display:grid;
gap:14px;
}
.growth-tree{
padding:42px 32px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
.growth-core{
grid-column:1/-1;
display:flex;
align-items:center;
justify-content:center;
min-height:180px;
border-radius:999px;
border:1px solid rgba(255,255,255,.07);
background:radial-gradient(circle,rgba(198,168,106,.14),rgba(255,255,255,.03));
font-family:var(--font-display);
font-size:clamp(2.2rem,3vw,3rem);
font-weight:300;
letter-spacing:.18em;
color:#f2dfbc;
}
.growth-branch{
padding:26px;
border-radius:28px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
display:grid;
gap:12px;
}
.quote{
min-height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
}
.quote h2{
font-family:var(--font-display);
font-size:clamp(2.6rem,4.9vw,4.9rem);
line-height:1.52;
font-weight:300;
letter-spacing:-.018em;
background:linear-gradient(to right,#f9e9cb,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.finale-section{
position:relative;
min-height:84vh;
padding:120px 7% 110px;
overflow:hidden;
}
.finale-glow{
position:absolute;
inset:18% 18% auto;
height:420px;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 62%);
filter:blur(30px);
pointer-events:none;
}
.finale-content{
max-width:980px;
margin:0 auto;
padding:72px 48px;
}
/* @keyframes float → common.css */
@media(max-width:1100px){
.hero-layout,
.memory-layout,
.dialogue-shell,
.memory-panel,
.scene-panel{
grid-template-columns:1fr;
}
.hero-content{text-align:center}
.hero-content .desc{margin-left:auto;margin-right:auto}
.hero-actions{justify-content:center}
.growth-tree{
grid-template-columns:1fr;
}
}
@media(max-width:768px){
.nav{width:92%;overflow:auto}
.nav ul{gap:16px}
.section{padding:100px 24px}
.tangshu-hero{padding:130px 24px 90px}
.desc{font-size:16px}
.memory-stage,
.dialogue-stage,
.scene-stage,
.growth-tree,
.finale-content{padding:24px}
.hero-figure{min-height:520px}
.figure-placeholder{max-width:360px}
.memory-placeholder,
.dialogue-portrait,
.scene-placeholder{min-height:280px}
.finale-section{
padding:100px 24px;
min-height:auto;
}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation:none !important;
transition:none !important;
}
.fade,.fade.show{
opacity:1;
filter:none;
transform:none;
}
}
.figure-placeholder img {
  width: 100%;
  height: 640px;        /* 控制图片高度 */
  object-fit: contain;  /* 保持完整比例显示 */
  border-radius: 24px;  /* 保持圆角一致 */
}
.memory-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 让图片填满容器 */
  object-position: center;  /* 居中显示 */
  border-radius: 24px;      /* 保持圆角一致 */
  display: block;
}

.memory-placeholder {
  width: 450px;             /* 控制图片框宽度 */
  height: 320px;            /* 控制图片框高度 */
  overflow: hidden;         /* 隐藏超出部分 */
  margin: 0 auto;           /* 居中对齐 */
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 80%);
}

.image-placeholder {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6vw;
  padding: 8vh 10vw;
}

.figure-placeholder {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 20px;
}

.figure-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) contrast(1.1);
}
.dialogue-portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  
}

.dialogue-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) contrast(1.1);
}
.dialogue-content {
  margin-top: 16px;
}

/* 图片基础样式 */
.image-placeholder img {

  border-radius: 24px;
  object-fit: cover;
  transition: transform 0.8s ease, filter 0.8s ease, box-shadow 0.8s ease;
}

/* 鼠标悬停时柔光与轻微放大 */
.image-placeholder:hover img {
  transform: scale(1.05);
  filter: brightness(1.15);
  box-shadow: 0 0 40px rgba(198,168,106,0.25), 0 0 80px rgba(111,168,154,0.15);
}

/* 切换时淡入柔光动画 */
.memory-panel.active .image-placeholder img {
  animation: glowFade 1.2s ease forwards;
}

/* 柔光淡入关键帧 */
@keyframes glowFade {
  0% {
    opacity: 0.6;
    filter: brightness(0.9);
    box-shadow: 0 0 0 rgba(198,168,106,0);
  }
  50% {
    opacity: 1;
    filter: brightness(1.2);
    box-shadow: 0 0 40px rgba(198,168,106,0.25);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(198,168,106,0.15);
  }
}