:root{
--ink:#292534;
--muted:#6e6a79;
--line:#e2e1e8;
--bg:#faf9fc;
--paper:#fff;
--primary:#74518f;
--lime:#9bab57;
--deep:#30243d;
--shadow:0 16px 36px rgba(62,42,79,.14)}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif;
line-height:1.7}
a{
text-decoration:none;
color:inherit}
img{
display:block;
max-width:100%;
height:auto}
.rail-header{
background:#fff;
border-bottom:1px solid var(--line)}
.rail-header-inner{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
min-height:76px;
display:flex;
align-items:center;
gap:32px}
.rail-brand{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
white-space:nowrap}
.rail-brand img{
border-radius:12px}
.rail-nav{
display:flex;
gap:25px;
font-size:14px;
color:var(--muted)}
.rail-nav a{
padding:25px 0 20px;
border-bottom:2px solid transparent}
.rail-nav a.selected,.rail-nav a:hover{
color:var(--primary);
border-color:var(--primary)}
.rail-actions{
margin-left:auto;
display:flex;
gap:9px}
.rail-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 16px;
border-radius:8px;
font-size:13px;
font-weight:750}
.rail-button.fill{
background:var(--primary);
color:#fff;
box-shadow:0 8px 18px rgba(116,81,143,.2)}
.rail-button.ghost{
background:#fff;
color:var(--primary);
border:1px solid #cbbddd}
.rail-menu{
display:none;
border:1px solid var(--line);
border-radius:8px;
background:#fff;
color:var(--muted);
padding:8px 10px}
.rail-hero{
background:#f5f0f8;
border-bottom:1px solid var(--line)}
.rail-hero-inner{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:65px 0 45px;
display:grid;
grid-template-columns:minmax(0,1fr) 560px;
gap:70px;
align-items:center}
.rail-copy{
max-width:560px}
.overline{
display:block;
color:var(--primary);
font-size:11px;
letter-spacing:.15em;
font-weight:800}
.rail-copy h1{
font-size:clamp(37px,5vw,62px);
line-height:1.14;
margin:15px 0 18px;
letter-spacing:0}
.rail-copy>p{
color:var(--muted);
font-size:16px;
margin:0}
.rail-hero-actions{
display:flex;
gap:11px;
flex-wrap:wrap;
margin-top:27px}
.rail-spec{
display:flex;
gap:28px;
margin-top:33px}
.rail-spec div{
border-top:2px solid var(--lime);
padding-top:8px;
min-width:88px}
.rail-spec b,.rail-spec span{
display:block}
.rail-spec b{
font-size:17px}
.rail-spec span{
font-size:12px;
color:var(--muted)}
.film-area{
height:460px;
position:relative;
padding-top:17px}
.film-label{
position:absolute;
top:0;
right:4px;
color:var(--primary);
font-size:10px;
letter-spacing:.15em}
.film-main,.film-side{
position:absolute;
background:#fff;
border-radius:22px;
padding:8px;
box-shadow:var(--shadow);
border:1px solid rgba(116,81,143,.16)}
.film-main{
width:225px;
left:165px;
top:21px;
z-index:2}
.film-side{
width:172px;
top:74px}
.film-side img,.film-main img{
border-radius:16px}
.side-one{
left:0;
transform:rotate(-6deg)}
.side-two{
right:0;
transform:rotate(6deg)}
.film-caption{
position:absolute;
left:0;
right:0;
bottom:0;
display:flex;
justify-content:space-between;
padding:0 37px;
color:var(--muted);
font-size:11px}
.rail-section{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:82px 0}
.rail-section-head{
display:grid;
grid-template-columns:1fr 2fr;
gap:10px 28px;
align-items:end;
margin-bottom:32px}
.rail-section-head .overline{
grid-column:1 / -1}
.rail-section-head h2,.tool-copy h2,.tips-head h2,.rail-faq h2,.rail-download h2{
font-size:31px;
line-height:1.2;
margin:0}
.rail-section-head p{
color:var(--muted);
font-size:14px;
margin:0 0 3px}
.manage-layout{
display:grid;
grid-template-columns:210px 1fr;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.manage-rail{
display:flex;
flex-direction:column;
padding:24px 0;
border-right:1px solid var(--line)}
.manage-rail span{
padding:11px 20px;
color:var(--muted);
font-size:14px}
.manage-rail span.active{
background:#f0e8f5;
color:var(--primary);
font-weight:700;
border-right:3px solid var(--primary)}
.manage-content{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0}
.manage-content article{
padding:28px 25px;
border-right:1px solid var(--line)}
.manage-content article:last-child{
border:0}
.manage-content b{
font-size:12px;
color:var(--lime);
letter-spacing:.1em}
.manage-content h3{
font-size:19px;
margin:16px 0 7px}
.manage-content p{
color:var(--muted);
font-size:14px;
margin:0}
.tools-section{
display:grid;
grid-template-columns:400px 1fr;
gap:105px;
align-items:center;
background:#fff;
max-width:none;
width:100%;
padding-left:max(20px,calc((100% - 1180px)/2));
padding-right:max(20px,calc((100% - 1180px)/2));
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.tool-visual{
position:relative;
justify-self:center}
.tool-visual>img{
width:265px;
border-radius:24px;
box-shadow:var(--shadow)}
.visual-note{
position:absolute;
right:-38px;
bottom:25px;
background:var(--deep);
color:#fff;
padding:13px 18px;
border-radius:10px;
box-shadow:var(--shadow)}
.visual-note span,.visual-note strong{
display:block}
.visual-note span{
font-size:11px;
color:#d7c8e0}
.visual-note strong{
font-size:18px;
color:#b6cc76}
.tool-copy{
max-width:560px}
.tool-copy>p{
color:var(--muted);
font-size:15px;
margin:16px 0 24px}
.tool-list{
border-top:1px solid var(--line)}
.tool-list div{
display:grid;
grid-template-columns:55px 1fr;
gap:1px 15px;
border-bottom:1px solid var(--line);
padding:15px 0}
.tool-list span{
grid-row:1 / span 2;
color:var(--primary);
font-size:13px;
font-weight:700}
.tool-list strong{
font-size:15px}
.tool-list small{
color:var(--muted);
font-size:12px}
.tips-section{
padding-bottom:76px}
.tips-head{
display:flex;
align-items:end;
gap:22px;
margin-bottom:28px}
.tips-head .overline{
margin-bottom:4px}
.tips-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.tips-grid div{
background:#fff;
border:1px solid var(--line);
padding:24px;
border-radius:11px}
.tip-num{
display:block;
color:var(--lime);
font-weight:800;
font-size:13px}
.tips-grid strong{
display:block;
font-size:18px;
margin:13px 0 7px}
.tips-grid p{
color:var(--muted);
font-size:14px;
margin:0}
.rail-faq{
background:#f0e8f5;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:55px max(20px,calc((100% - 1180px)/2));
display:flex;
justify-content:space-between;
align-items:end;
gap:30px}
.rail-faq p,.rail-download p{
color:var(--muted);
font-size:14px;
margin:13px 0 0;
max-width:510px}
.rail-more{
color:var(--primary);
font-size:14px;
font-weight:700;
white-space:nowrap}
.rail-download{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:65px 0;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px}
.rail-download .rail-hero-actions{
margin:0}
.rail-footer{
background:var(--deep);
color:#d7c8e0}
.rail-footer-inner{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:25px 0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
justify-content:space-between;
gap:20px;
font-size:12px}
.section-copy{
color:var(--muted);
font-size:14px;
margin:10px 0 0}
.rail-inner-page{
width:min(930px,calc(100% - 40px));
margin:0 auto}
.rail-page-intro{
padding:78px 0 48px;
border-bottom:1px solid var(--line)}
.rail-page-intro h1{
font-size:42px;
line-height:1.2;
margin:14px 0 17px}
.rail-page-intro p{
color:var(--muted);
font-size:16px;
max-width:720px;
margin:0}
.manual-rail article{
display:grid;
grid-template-columns:70px 1fr;
gap:25px;
padding:32px 0;
border-bottom:1px solid var(--line)}
.manual-code{
font-size:23px;
color:var(--primary);
font-weight:800}
.manual-rail h2{
font-size:23px;
margin:0 0 10px}
.manual-rail p{
color:var(--muted);
font-size:15px;
margin:0}
.rail-callout{
margin:35px 0 85px;
background:#f0e8f5;
padding:30px 32px;
border-left:4px solid var(--primary)}
.rail-callout h2{
margin:0;
font-size:25px}
.rail-callout p{
margin:9px 0 0;
color:var(--muted)}
.rail-questions{
padding:14px 0 32px}
.rail-questions details{
border-bottom:1px solid var(--line);
padding:22px 0}
.rail-questions summary{
cursor:pointer;
list-style:none;
font-size:18px;
font-weight:750;
display:flex;
justify-content:space-between}
.rail-questions summary::-webkit-details-marker{
display:none}
.rail-questions summary:after{
content:"+";
font-size:23px;
color:var(--primary);
font-weight:400}
.rail-questions details[open] summary:after{
content:"−"}
.rail-questions details div{
padding:13px 38px 0 0;
color:var(--muted);
font-size:15px}
.final-callout{
margin-top:24px}
.final-callout .rail-hero-actions{
margin-top:20px}
@media(max-width:980px){
.rail-hero-inner{
grid-template-columns:1fr;
gap:35px}
.rail-copy{
max-width:none}
.film-area{
max-width:560px;
width:100%;
margin:0 auto}
.manage-layout{
grid-template-columns:1fr}
.manage-rail{
flex-direction:row;
overflow:auto;
border-right:0;
border-bottom:1px solid var(--line)}
.manage-rail span{
white-space:nowrap}
.manage-content{
grid-template-columns:1fr}
.manage-content article{
border-right:0;
border-bottom:1px solid var(--line)}
.tools-section{
grid-template-columns:1fr;
gap:40px}
.tool-visual{
margin:0 auto}
.tool-copy{
max-width:none}
.rail-actions{
display:none}
.rail-menu{
display:block;
margin-left:auto}
.rail-nav{
margin-left:auto}
}
@media(max-width:620px){
.rail-header-inner,.rail-hero-inner,.rail-section,.rail-inner-page,.rail-download,.rail-footer-inner{
width:calc(100% - 30px)}
.rail-nav{
display:none}
.rail-nav.open{
display:flex;
position:absolute;
top:76px;
left:15px;
right:15px;
background:#fff;
border:1px solid var(--line);
padding:9px 16px;
flex-direction:column;
gap:0;
box-shadow:var(--shadow)}
.rail-nav.open a{
padding:8px 0;
border:0}
.rail-hero-inner{
padding:28px 0 23px;
gap:14px}
.rail-copy h1{
font-size:36px;
margin:9px 0 13px}
.rail-copy h1 span{
display:block}
.rail-copy>p{
font-size:14px;
line-height:1.6}
.rail-hero-actions{
margin-top:18px}
.rail-spec{
display:none}
.film-area{
height:225px}
.film-main{
width:105px;
left:calc(50% - 52px);
top:12px}
.film-side{
width:82px;
top:42px}
.film-caption{
padding:0 4px}
.rail-section{
padding:56px 0}
.rail-section-head{
display:block}
.rail-section-head p{
margin-top:12px}
.tools-section{
padding-left:15px;
padding-right:15px}
.tool-visual>img{
width:230px}
.visual-note{
right:-26px}
.tips-head{
display:block}
.tips-head h2{
margin-top:9px}
.tips-grid{
grid-template-columns:1fr}
.rail-faq{
padding:45px 15px;
display:block}
.rail-more{
display:inline-block;
margin-top:22px}
.rail-download{
display:block;
padding:52px 0}
.rail-download .rail-hero-actions{
margin-top:22px}
.rail-footer-inner{
flex-direction:column;
gap:8px}
.rail-page-intro{
padding:53px 0 37px}
.rail-page-intro h1{
font-size:34px}
.manual-rail article{
grid-template-columns:44px 1fr;
gap:14px;
padding:25px 0}
.manual-rail h2{
font-size:20px}
.rail-questions summary{
font-size:16px}
}