:root{
--ink:#1f2b2b;
--muted:#657775;
--line:#dce7e2;
--bg:#f5f8f6;
--paper:#fff;
--primary:#2f826f;
--gold:#c79445;
--dark:#173a34;
--shadow:0 14px 36px rgba(29,82,70,.12)}
*{
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}
.topbar{
background:#fff;
border-bottom:1px solid var(--line)}
.topbar-inner{
width:min(1160px,calc(100% - 40px));
margin:0 auto;
min-height:78px;
display:flex;
align-items:center;
gap:28px}
.wordmark{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
white-space:nowrap}
.wordmark img{
border-radius:13px}
.nav-tabs{
display:flex;
gap:24px;
color:var(--muted);
font-size:14px}
.nav-tabs a{
padding:26px 0 21px;
border-bottom:3px solid transparent}
.nav-tabs a.current,.nav-tabs a:hover{
color:var(--primary);
border-color:var(--primary)}
.top-actions{
margin-left:auto;
display:flex;
gap:9px}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
padding:9px 16px;
font-size:13px;
font-weight:750}
.button.solid{
background:var(--primary);
color:#fff;
box-shadow:0 8px 18px rgba(47,130,111,.2)}
.button.light{
background:#f1f8f4;
color:var(--primary);
border:1px solid #b9d7cb}
.button.outline{
border:1px solid #a9c4bb;
color:var(--primary);
background:transparent}
.drawer-button{
display:none;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
padding:7px 9px;
color:var(--muted)}
.command-hero{
background:linear-gradient(125deg,#f7fbf8,#eaf4ef);
border-bottom:1px solid var(--line)}
.command-inner{
width:min(1160px,calc(100% - 40px));
margin:0 auto;
padding:69px 0 65px;
display:grid;
grid-template-columns:1fr 300px;
gap:80px;
align-items:center}
.command-copy{
max-width:600px}
.micro-label{
display:block;
color:var(--primary);
font-size:11px;
letter-spacing:.16em;
font-weight:800}
.command-copy h1{
font-size:clamp(38px,5vw,62px);
line-height:1.16;
margin:15px 0 18px;
letter-spacing:0}
.command-copy>p{
color:var(--muted);
font-size:16px;
max-width:560px;
margin:0}
.command-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:27px}
.command-stats{
display:flex;
gap:28px;
margin-top:32px}
.command-stats div{
border-left:2px solid #b9d7cb;
padding-left:11px}
.command-stats strong,.command-stats span{
display:block}
.command-stats strong{
font-size:14px}
.command-stats span{
color:var(--muted);
font-size:12px}
.command-screen{
background:#173a34;
border-radius:24px;
padding:13px 13px 8px;
box-shadow:var(--shadow);
width:292px;
justify-self:end;
transform:rotate(2deg)}
.screen-header,.screen-footer{
display:flex;
justify-content:space-between;
color:#dbeee5;
font-size:11px;
padding:0 8px 8px}
.screen-footer{
padding:8px 8px 0;
border-top:1px solid rgba(255,255,255,.2);
color:#b9d7cb}
.screen-dot{
color:#cae39d}
.command-screen img{
width:100%;
border-radius:15px}
.matrix-band{
background:#fff}
.matrix-inner{
width:min(1160px,calc(100% - 40px));
margin:0 auto;
padding:78px 0}
.matrix-title{
display:flex;
align-items:end;
gap:20px;
margin-bottom:28px}
.matrix-title h2,.scene-intro h2,.preview-inner h2,.download-panel h2,.answer-band h2{
font-size:31px;
line-height:1.2;
margin:0}
.matrix-title p{
margin:0 0 4px;
color:var(--muted);
font-size:14px}
.matrix-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.matrix-grid article{
border:1px solid var(--line);
padding:25px 24px;
background:#fbfdfc;
min-height:215px;
position:relative}
.matrix-icon{
color:var(--gold);
font-size:12px;
font-weight:800}
.matrix-grid h3{
font-size:20px;
margin:16px 0 7px}
.matrix-grid p{
color:var(--muted);
font-size:14px;
margin:0 0 18px}
.matrix-grid a{
color:var(--primary);
font-size:13px;
font-weight:700}
.matrix-grid b{
margin-left:6px}
.scene-section{
background:var(--bg)}
.scene-wrap{
width:min(1160px,calc(100% - 40px));
margin:0 auto;
padding:76px 0}
.scene-intro{
display:grid;
grid-template-columns:auto 1fr;
gap:12px 20px;
align-items:end;
margin-bottom:30px}
.scene-intro .micro-label{
grid-column:1 / -1}
.scene-intro p{
margin:0 0 3px;
color:var(--muted);
font-size:14px}
.scene-rule{
height:1px;
background:var(--line);
margin-bottom:8px}
.scene-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.scene-cards article{
background:#fff;
padding:26px;
border:1px solid var(--line);
border-radius:10px}
.scene-tag{
display:inline-block;
color:var(--gold);
border:1px solid #e2c89d;
padding:2px 8px;
border-radius:99px;
font-size:11px}
.scene-cards h3{
margin:16px 0 8px;
font-size:19px}
.scene-cards p{
color:var(--muted);
font-size:14px;
margin:0}
.preview-strip{
background:#edf5f0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.preview-inner{
width:min(1160px,calc(100% - 40px));
margin:0 auto;
padding:78px 0;
display:grid;
grid-template-columns:1fr 410px;
gap:80px;
align-items:center}
.preview-inner p{
color:var(--muted);
max-width:430px}
.preview-links{
display:flex;
gap:22px;
margin-top:25px;
color:var(--primary);
font-size:14px;
font-weight:700}
.preview-stack{
height:420px;
position:relative}
.preview-stack img{
position:absolute;
border-radius:19px;
box-shadow:var(--shadow);
border:8px solid #fff}
.preview-main{
width:230px;
left:28px;
top:3px}
.preview-small{
width:210px;
right:18px;
bottom:0;
transform:rotate(5deg)}
.download-panel{
width:min(1160px,calc(100% - 40px));
margin:0 auto;
padding:70px 0;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px}
.download-panel p{
color:var(--muted);
font-size:14px;
max-width:560px;
margin:12px 0 0}
.download-panel-actions{
display:flex;
gap:10px;
flex-shrink:0}
.answer-band{
background:var(--dark);
color:#fff;
padding:62px max(20px,calc((100% - 1160px)/2)) 70px}
.answer-band .micro-label{
color:#b9d7cb}
.answer-grid{
margin-top:27px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.answer-grid div{
border-top:1px solid rgba(220,240,231,.25);
padding-top:15px}
.answer-grid strong,.answer-grid span{
display:block}
.answer-grid strong{
font-size:14px}
.answer-grid span{
font-size:13px;
color:#b9d7cb;
margin-top:6px}
.answer-more{
align-self:end;
color:#e2c89d;
font-size:14px}
.bottom{
background:#12332d;
color:#bed8ce}
.bottom-inner{
width:min(1160px,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}
.manual{
width:min(930px,calc(100% - 40px));
margin:0 auto}
.manual-head{
padding:77px 0 49px;
border-bottom:1px solid var(--line)}
.manual-head h1{
font-size:42px;
line-height:1.2;
margin:14px 0 17px}
.manual-head p{
color:var(--muted);
font-size:16px;
max-width:720px;
margin:0}
.path-list article{
display:grid;
grid-template-columns:74px 1fr;
gap:24px;
border-bottom:1px solid var(--line);
padding:32px 0}
.path-index{
color:var(--primary);
font-size:26px;
font-weight:800}
.path-list h2{
font-size:23px;
margin:0 0 9px}
.path-list p{
color:var(--muted);
font-size:15px;
margin:0}
.checklist{
padding:38px 0 80px}
.checklist h2,.question-end h2{
font-size:28px;
margin:0}
.checklist-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-top:22px}
.checklist-grid div{
padding:18px;
background:#fff;
border:1px solid var(--line);
border-radius:9px}
.checklist-grid strong,.checklist-grid span{
display:block}
.checklist-grid strong{
font-size:14px}
.checklist-grid span{
color:var(--muted);
font-size:12px;
margin-top:6px}
.faq-manual{
max-width:930px}
.questions{
padding:15px 0 35px}
.questions details{
border-bottom:1px solid var(--line);
padding:22px 0}
.questions summary{
cursor:pointer;
list-style:none;
font-size:18px;
font-weight:750;
display:flex;
justify-content:space-between}
.questions summary::-webkit-details-marker{
display:none}
.questions summary:after{
content:"+";
font-size:22px;
color:var(--primary);
font-weight:400}
.questions details[open] summary:after{
content:"−"}
.questions details div{
padding:13px 38px 0 0;
color:var(--muted);
font-size:15px}
.question-end{
padding:25px 0 85px}
.question-end p{
color:var(--muted);
margin:11px 0 0}
@media(max-width:900px){
.command-inner{
grid-template-columns:1fr;
gap:38px}
.command-copy{
max-width:none}
.command-screen{
width:310px;
margin:0 auto}
.matrix-grid,.scene-cards{
grid-template-columns:1fr}
.preview-inner{
grid-template-columns:1fr;
gap:30px}
.preview-stack{
max-width:410px;
width:100%;
margin:0 auto}
.download-panel{
display:block}
.download-panel-actions{
margin-top:22px}
.answer-grid{
grid-template-columns:1fr 1fr}
.top-actions{
display:none}
.drawer-button{
display:block;
margin-left:auto}
.nav-tabs{
margin-left:auto}
}
@media(max-width:620px){
.topbar-inner,.command-inner,.matrix-inner,.scene-wrap,.preview-inner,.download-panel,.bottom-inner,.manual{
width:calc(100% - 30px)}
.nav-tabs{
display:none}
.nav-tabs.open{
display:flex;
position:absolute;
top:78px;
left:15px;
right:15px;
background:#fff;
border:1px solid var(--line);
padding:10px 16px;
flex-direction:column;
gap:0;
box-shadow:var(--shadow)}
.nav-tabs.open a{
padding:8px 0;
border:0}
.command-inner{
padding:28px 0 24px;
gap:14px}
.command-copy h1{
font-size:36px;
margin:9px 0 13px}
.command-copy h1 span{
display:block}
.command-copy>p{
font-size:14px;
line-height:1.6}
.command-actions{
margin-top:18px}
.command-stats{
display:none}
.command-screen{
width:170px;
border-radius:18px;
padding:8px 8px 5px;
justify-self:center}
.screen-header,.screen-footer{
font-size:8px;
padding:0 4px 5px}
.screen-footer{
padding:5px 4px 0}
.matrix-inner,.scene-wrap,.preview-inner{
padding:56px 0}
.matrix-title,.scene-intro{
display:block}
.matrix-title p,.scene-intro p{
margin-top:12px}
.preview-stack{
height:355px}
.preview-main{
width:190px;
left:10px}
.preview-small{
width:170px}
.answer-band{
padding-left:15px;
padding-right:15px}
.answer-grid{
grid-template-columns:1fr}
.bottom-inner{
flex-direction:column;
gap:7px}
.manual-head{
padding:53px 0 37px}
.manual-head h1{
font-size:34px}
.path-list article{
grid-template-columns:42px 1fr;
gap:14px;
padding:25px 0}
.path-list h2{
font-size:20px}
.checklist-grid{
grid-template-columns:1fr 1fr}
.questions summary{
font-size:16px}
}