/* 基础重置与变量 */
:root {
	--primary-color: #031c6b; /* 深蓝色主调 */
	--accent-color: #031c6b; /* 点缀 */
	--on-color: #d79c4a; /* 当前 */
	--text-main: #3c4049;
	--text-white: #fff;
	--text-light: #3c4049;
	--bg-light: #f8f9fa;
	--bg-blue-gradient: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
	--max-width: 1200px;
}
*{
	box-sizing:border-box;
}
html,body{
	width:100%;
	min-height:100%;
	margin:0;
	font-family: "MiSans", "思源黑体 CN","Noto Sans SC", arial, sans-serif !important;
}
body{
	color:var(--ink)
}
button{
	font:inherit;
}
.scene{
	position:relative;
	width:100%;
	height:960px;
	min-height:960px;
	overflow:hidden;
	isolation:isolate;
}
.mist{
	position:absolute;
	z-index:-1;
	top:30%;
	left:-12%;
	width:58%;
	height:28%;
	border-radius:50%;
	background:rgba(255,255,255,.31);
	filter:blur(50px);
	pointer-events:none;
}
.medallion{
	position:absolute;
	z-index:2;
	left:3.8vw;
	top:50%;
	width:clamp(190px,23vw,440px);
	aspect-ratio:1;
	transform:translateY(-50%);
	display:grid;
	place-items:center;
	border-radius:50%;
	
}
.medallion__rim{
	position:relative;
	z-index:1;
	width:64%;
	aspect-ratio:1;
	display:grid;
	place-items:center;
	overflow:hidden;
	border-radius:50%;
	border:7px solid #d1a66b;
	background:#fff;
	box-shadow:0 0 0 4px rgba(255,250,235,.9),inset 0 0 16px rgba(44,62,84,.18);
}
.medallion__rim img{
	width:100%;
	height:100%;
	display:block;
	border-radius:50%;
	object-fit:cover;
	object-position:52% 50%;
}
.medallion__shine{
	position:absolute;
	z-index:2;
	inset:12%;
	border-radius:50%;
	background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 35% 74%,rgba(255,255,255,.12));
	pointer-events:none;
}
.timeline-stage{
	position:absolute;
	z-index:3;
	top:0;
	bottom:0;
	left:29vw;
	width:clamp(180px,18vw,340px);
	touch-action:pan-y;
}
.timeline-rail{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:visible;
	pointer-events:none;
}
.milestone-highlight {
  color: var(--primary-color);
  font-size: clamp(15px,1.34vw,20px);
}
.timeline-rail path{
	fill: none;
	stroke: rgba(255, 255, 255, 0.98);
	stroke-width: 2.5px;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1));
}
.year-layer{
	position:absolute;
	inset:0;
}
.year-node{
	position:absolute;
	z-index:1;
	width:174px;
	height:62px;
	padding:0;
	border:0;
	color:#424852;
	background:transparent;
	cursor:pointer;
	text-align:right;
	transition:top .34s cubic-bezier(.2,.7,.25,1),left .34s cubic-bezier(.2,.7,.25,1),color .2s ease;
	-webkit-tap-highlight-color:transparent;
}
.year-node:focus-visible{
	outline:2px solid rgba(49,95,212,.8);
	outline-offset:5px;
	border-radius:8px;
}
.year-label{
	position:absolute;
	top:50%;
	right:34px;
	width:132px;
	transform:translateY(-50%);
	font-size:clamp(18px,1.62vw,30px);
	line-height:1;
	font-weight:500;
	letter-spacing:-.035em;
	color: #3c4049;
	transition:font-size .24s ease,color .2s ease;
}
.year-dot{
	position:absolute;
	top:50%;
	right:-7px;
	width:14px;
	height:14px;
	transform:translateY(-50%);
	border:1px solid rgba(255,255,255,.9);
	border-radius:50%;
	background:#4d78dc;
	box-shadow:0 0 0 1px rgba(75,111,202,.18);
	transition:width .24s ease,height .24s ease,right .24s ease,box-shadow .24s ease,background .24s ease;
}
.year-node.is-active{
	color:var(--primary-color);
}
.year-node.is-active .year-label{
	font-size:clamp(34px,3.15vw,60px);
	font-weight:750;
	letter-spacing:-.055em;
	color:var(--primary-color);
	
}
.year-node.is-active .year-dot{
	right:-13px;
	width:28px;
	height:28px;
	background:linear-gradient(145deg,#97c0ff,#1f4ac1 70%);
	box-shadow:0 0 0 5px rgba(255,255,255,.88),0 0 0 7px rgba(64,107,207,.12),0 4px 12px rgba(31,82,183,.28);
}
.year-node:hover:not(.is-active) .year-dot{
	width:19px;
	height:19px;
	right:-10px;
	background:#244fbd;
}
.story{
	position:absolute;
	z-index:2;
	top:50%;
	left:49%;
	width:min(47%,900px);
	transform:translateY(-50%);
}
.story-heading{
	margin:0 0 clamp(28px,4vh,52px);
	padding-left:10px;
	color:var(--primary-color);
	text-align:center;
}
.story-heading h1{
	margin:0;
	font-size:66px;
	line-height:1.2;
	font-weight:750;
	letter-spacing:2px;
	text-shadow:0 1px 1px rgba(255,255,255,.7);
	text-align: left;
}
.story-card{
	position:relative;
	min-height:280px;
	max-height:61vh;
	padding:clamp(22px,2.2vw,42px) clamp(22px,2.5vw,48px) clamp(18px,1.8vw,34px);
	overflow:auto;
	border:1.5px solid rgba(43,91,221,.95);
	border-radius:30px;
	background:rgba(255,255,255,.60);
	box-shadow:0 12px 25px rgba(37,86,146,.10),inset 0 0 28px rgba(255,255,255,.45);
	backdrop-filter:blur(7px);transition:opacity .18s ease,border-color .2s ease;
	scrollbar-color:rgba(58,100,203,.35) transparent;
	scrollbar-width:thin;
}
.story-card.is-changing{
	opacity:.54;
}
.story-card__top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	margin-bottom:22px;
	display: none;
}

.story-year{
	flex:0 0 auto;
	color: var(--primary-color);
	font-size:16px;
	font-weight:700;
	letter-spacing:.06em;
}
.milestone-list{
	display:grid;
	gap:clamp(18px,2.2vh,28px);
	margin:0;
	padding:0;
	list-style:none;
}
.milestone-list li{
	position:relative;
	padding-left:34px;
	font-size:clamp(15px,1.34vw,20px);
	line-height:1.72;
	letter-spacing:.045em;
	color: #3c4049;
}
.milestone-list li:before{
	content:"";
	position:absolute;
	top:.72em;
	left:0;
	width:12px;
	height:12px;
	border-radius:50%;
	background:#3863ce;
	box-shadow:0 0 0 3px rgba(49,95,212,.08);
}
.story-controls{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin-top:18px;
	color:rgba(20,54,128,.77);
	font-size:13px;
}
.control-group{
	display:flex;
	gap:8px;
}
.control-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:36px;
	padding:0 13px;
	border:1px solid rgba(54,99,207,.36);
	border-radius:999px;
	color:var(--primary-color);
	background:rgba(255,255,255,.58);
	cursor:pointer;
	transition:background .16s ease,transform .16s ease,border-color .16s ease;
}
.control-button:hover:not(:disabled){
	transform:translateY(-1px);
	border-color:rgba(54,99,207,.76);
	background:rgba(255,255,255,.9);
}
.control-button:disabled{
	opacity:.42;
	cursor:default;
}
.progress{
	width:92px;
	height:3px;
	overflow:hidden;
	border-radius:99px;
	background:rgba(50,90,182,.18);
}
.progress>span{
	display:block;
	width:0;
	height:100%;
	border-radius:inherit;
	background:var(--primary-color);
	transition:width .25s ease;
}
.visually-hidden{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
@media(max-width:1000px){
	.medallion{
		left:2.5vw;
		width:clamp(170px,22vw,260px);
	}
	.timeline-stage{
		left:27vw;
		width:clamp(170px,19vw,220px);
	}
	.story{
		left:49%;
		width:48%;
	}
	.story-heading{
		margin-bottom:26px;
	}
	.story-heading h1{
		font-size:clamp(28px,4vw,42px);
	}
	.story-card{
		min-height:230px;
		padding:23px 24px;
		border-radius:23px;
	}
	.milestone-list li{
		padding-left:25px;
		font-size:25px;
	}
	.milestone-list li:before{
		width:9px;
		height:9px;
	}
	.year-node{
		width:148px;
	}
	.year-label{
		width:112px;
		right:31px;
	}
	.year-node.is-active .year-label{
		font-size:clamp(32px,4vw,44px);
		}
}
@media(max-width:680px){
	.scene:before{
		height:45%;
		opacity:.56;
	}
	.medallion{
		top:13px;
		left:12px;
		width:72px;
		transform:none;
	}.medallion__rim{
		border-width:3px;
	}
	.timeline-stage{
		left:7vw;
		width:34vw;
	}
	.year-node{
		width:132px;
		height:56px;
	}
	.year-label{
		right:27px;
		width:102px;
		font-size:16px;
	}
	.year-node.is-active .year-label{
		font-size:clamp(30px,9vw,38px);
	}
	.year-dot{
		width:11px;
		height:11px;
		right:-5px;
	}
	.year-node.is-active .year-dot{
		width:23px;
		height:23px;
		right:-11px;
	}
	.story{
		left:45%;
		width:52%;
		top:53%;
	}
	.story-heading{
		margin:0 0 15px;
		padding:0;
		text-align:right;
	}
	.story-heading h1{
		font-size:clamp(20px,6.4vw,29px);
		letter-spacing:.08em;
	}
	.story-card{
		min-height:215px;
		max-height:61vh;
		padding:16px 14px;
		border-radius:18px;
	}
	.story-card__top{
		gap:5px;
		margin-bottom:14px;
	}
	.sample-note{
		max-width:125px;
		font-size:10px;
		line-height:1.45;
	}
	.story-year{
		font-size:12px;
	}
	.milestone-list{
		gap:14px;
	}
	.milestone-list li{
		padding-left:18px;
		font-size:13px;
		line-height:1.65;
		letter-spacing:.01em;
	}
	.milestone-list li:before{
		top:.68em;
		width:7px;
		height:7px;
	}
	.story-controls{
		margin-top:12px;
		font-size:11px;
	}
	.control-button{
		min-height:31px;
		padding:0 10px;
		font-size:11px;
	}
	.control-button .long-label{
		display:none;
	}
	.progress{
		width:50px;
	}
}
@media(prefers-reduced-motion:reduce){
	*,*:before,*:after{
		scroll-behavior:auto!important;
		transition-duration:.01ms!important;
		animation-duration:.01ms!important;
	}
}