:root{
--night:#101f38;
--panel:#1a2e4b;
--line:#506581;
--text:#eff2f7;
--muted:#bdccdf;
--gold:#f5d67c;
--cream:#faf5e6;
--ink:#192e48;
--sans:"Microsoft YaHei","PingFang SC",sans-serif;
--display:"Noto Serif SC","Songti SC","SimSun",serif}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:30px}
body{
margin:0;
background:var(--night);
color:var(--text);
font:16px/1.75 var(--sans)}
[hidden]{
display:none!important}
a{
color:inherit;
text-decoration:none}
a:hover{
text-decoration:underline;
text-underline-offset:5px}
img{
display:block;
max-width:100%;
height:auto}
.asset-frame{
display:block;
position:relative;
overflow:hidden;
background:#e9eef6;
border-radius:8px}
.asset-frame .cover-image{
display:block;
width:100%;
aspect-ratio:2.4;
object-fit:contain;
margin:0}
.asset-frame .cover-badge{
position:absolute;
right:10px;
bottom:10px;
width:min(36%,180px);
height:auto;
max-height:64px;
aspect-ratio:auto;
object-fit:contain;
background:var(--cream);
padding:4px;
border-radius:5px;
margin:0}
.asset-frame[data-cover-id="27"] .cover-badge{
width:68px;
max-width:30%}
button,input,select,textarea{
font:inherit;
touch-action:manipulation}
button{
cursor:pointer}
h1,h2,h3,p{
margin:0}
h1,h2,h3{
text-wrap:balance;
line-height:1.4}
h1{
font:600 clamp(35px,3.6vw,48px)/1.3 var(--display)}
h2{
font-size:30px}
h3{
font-size:22px}
p+p{
margin-top:14px}
::selection{
color:var(--night);
background:var(--gold)}
:focus-visible{
outline:3px solid var(--gold);
outline-offset:4px}
input,textarea{
caret-color:var(--gold)}
.shell{
width:min(1136px,calc(100% - 64px));
margin:auto}
.skip{
position:absolute;
top:-100px;
left:20px;
padding:12px;
background:var(--gold);
color:var(--night);
z-index:10}
.skip:focus{
top:10px}
.site-header{
border-bottom:1px solid var(--line)}
.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
min-height:86px}
.brand{
display:flex;
gap:13px;
align-items:center}
.brand img{
width:50px;
height:50px;
object-fit:contain;
background:white;
border-radius:12px;
padding:4px}
.brand strong{
display:block;
font-size:26px;
line-height:1.4}
.brand small{
font-size:12px;
color:var(--muted)}
.site-header nav{
display:flex;
gap:28px;
align-items:center;
font-size:14px}
.site-header nav a{
min-height:44px;
display:flex;
align-items:center}
.site-header nav a[aria-current]{
color:var(--gold)}
.nav-consult{
color:var(--gold);
border:1px solid #b29b62;
border-radius:8px;
padding:9px 16px}
.selector-hero{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:clamp(260px,23vw,360px);
background:var(--night)}
.hero-background{
position:absolute;
inset:0;
z-index:-1}
.hero-background img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 58%}
.chooser-title{
padding:54px 0;
text-align:left}
.chooser-title h1{
max-width:540px}
.chooser-title p{
color:var(--muted);
margin-top:15px;
font-size:17px;
max-width:420px}
.journey{
display:flex;
justify-content:center;
gap:0;
list-style:none;
padding:0;
margin:24px auto;
max-width:650px}
.journey li{
width:33.33%;
text-align:center;
color:var(--muted);
border-bottom:3px solid var(--line);
padding:10px 12px 15px;
font-size:14px}
.journey li[aria-current]{
color:var(--gold);
border-bottom-color:var(--gold)}
.journey strong{
margin-right:7px;
font-size:19px}
.chooser{
max-width:920px;
margin:auto;
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:32px 42px}
.chooser h2{
font-size:27px}
.chooser .help{
color:var(--muted);
font-size:14px;
margin:10px 0 23px}
.profile-fields{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px}
.choice-label{
font-size:18px;
margin:26px 0 14px}
.chooser .help+.choice-label{
margin-top:0}
.choice[aria-pressed=true]:active{
background:#ffe59d}
.choice-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px}
.choice{
min-height:74px;
border:1px solid #73859d;
background:transparent;
color:var(--text);
border-radius:10px;
padding:15px 12px;
font-weight:600;
transition:background .16s ease,border-color .16s ease}
.choice:hover{
background:#294664;
border-color:var(--gold)}
.choice[aria-pressed=true]{
color:var(--night);
background:var(--gold);
border-color:var(--gold)}
.choice small{
display:block;
margin-top:7px;
font-size:12px;
font-weight:400}
.interests{
grid-template-columns:repeat(3,minmax(0,1fr))}
.readiness{
grid-template-columns:repeat(3,minmax(0,1fr))}
.chooser-actions{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding-top:26px;
margin-top:26px;
border-top:1px solid var(--line)}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:48px;
padding:11px 22px;
border:1px solid var(--gold);
border-radius:8px;
background:var(--gold);
color:var(--night);
font-weight:700}
.btn:hover{
background:#ffdf85;
text-decoration:none}
.btn:active{
transform:translateY(1px)}
.btn.secondary{
background:transparent;
color:var(--text);
border-color:#8292a8}
.btn.secondary:hover{
background:#294664}
.btn[disabled]{
opacity:.55;
cursor:not-allowed}
.btn svg{
width:20px;
height:20px}
.text-btn{
background:none;
color:var(--muted);
border:0;
text-decoration:underline;
text-underline-offset:5px;
padding:8px;
font-size:14px;
min-height:44px}
.error{
color:#ffbfad;
font-size:14px;
margin-top:15px}
.chooser-foot{
max-width:920px;
margin:18px auto 40px;
color:var(--muted);
font-size:13px;
text-align:center}
.chooser-foot a{
color:var(--gold);
text-decoration:underline}
.selection-method{
padding:38px 0 48px;
border-top:1px solid var(--line);
display:grid;
grid-template-columns:1fr 1.5fr;
gap:60px}
.selection-method h2{
font-family:var(--display);
font-size:31px}
.selection-method p{
color:var(--muted);
font-size:15px}
.method-lines{
margin:0;
padding:0;
list-style:none}
.method-lines li{
padding:16px 0;
border-top:1px solid var(--line)}
.method-lines li:first-child{
padding-top:0;
border-top:0}
.method-lines strong{
display:block;
color:var(--gold);
margin-bottom:5px}
.results{
padding:20px 0 45px}
.result-heading{
display:flex;
justify-content:space-between;
gap:24px;
align-items:end;
margin:22px 0}
.result-heading p{
color:var(--muted);
font-size:14px;
margin-top:10px}
.condition-summary{
color:var(--gold);
font-size:15px;
padding:16px 0;
border-bottom:1px solid var(--line)}
.result-item{
display:grid;
grid-template-columns:140px minmax(0,1fr) 155px;
gap:25px;
padding:28px 0;
border-bottom:1px solid var(--line);
align-items:start}
.result-item>.asset-frame{
width:140px;
background:transparent;
border-radius:8px}
.result-item>.asset-frame .cover-image{
aspect-ratio:auto;
height:auto}
.result-item h3{
font-size:23px;
margin-bottom:10px}
.result-item .reason{
color:var(--text);
font-size:15px}
.result-item .small{
font-size:13px;
color:var(--muted);
margin-top:9px}
.result-item .next-note{
font-size:14px;
color:var(--gold);
margin-top:10px}
.event-kind{
color:var(--gold);
font-size:13px;
margin-bottom:8px}
.recommendation-reasons{
margin:16px 0 0}
.recommendation-reasons dt{
color:var(--gold);
font-size:14px;
font-weight:700;
margin-top:14px}
.recommendation-reasons dd{
margin:4px 0 0;
font-size:15px}
.result-notes{
background:var(--panel);
border-radius:10px;
color:var(--muted);
font-size:14px}
.result-notes summary{
padding:14px 20px;
min-height:48px;
cursor:pointer;
color:var(--gold)}
.result-notes>div{
padding:0 20px 20px}
.result-actions{
display:flex;
flex-direction:column;
gap:10px}
.compare-add,.replace-recommendation{
background:transparent;
border:1px solid #8da0b7;
border-radius:8px;
color:var(--text);
padding:10px;
min-height:44px;
font-size:14px}
.compare-add:hover,.replace-recommendation:hover{
background:#294664}
.replace-recommendation:disabled{
opacity:.55;
cursor:not-allowed}
.compare-add[aria-pressed=true]{
color:var(--gold);
border-color:var(--gold)}
.result-actions a{
font-size:14px;
padding:9px 0;
text-align:center;
color:var(--gold)}
.light-area{
background:var(--cream);
color:var(--ink);
padding:38px 0}
.light-area h2{
font-family:var(--display)}
.light-area p{
color:#4e5e67;
font-size:15px;
margin-top:12px}
.light-area .btn{
margin-top:20px}
p.catalogue-update{
font-size:13px;
margin-top:10px}
.page-top{
padding:32px 0 26px}
.crumb{
display:flex;
gap:10px;
flex-wrap:wrap;
color:var(--muted);
font-size:13px;
margin-bottom:22px}
.page-top p{
color:var(--muted);
max-width:50em;
margin-top:16px}
.filter-line{
display:grid;
grid-template-columns:minmax(0,1fr) 170px 150px;
gap:14px;
margin:20px 0 28px}
.directory-filters{
grid-template-columns:minmax(0,1fr) 140px 170px 150px}
.directory-filters~.help{
font-size:14px;
color:var(--muted);
margin:12px 0 20px}
.field-label{
display:block;
font-size:14px;
color:var(--muted);
margin-bottom:8px}
input[type=search],select,textarea{
border:1px solid #8295ae;
border-radius:8px;
color:var(--text);
background:var(--panel);
padding:12px 14px;
min-height:48px;
width:100%}
input::placeholder,textarea::placeholder{
color:#bdccdf}
.fact-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px 32px;
list-style:none;
padding:0;
margin:28px 0}
.fact-list li{
padding:17px 0;
border-bottom:1px solid var(--line)}
.fact-list span{
display:block;
color:var(--muted);
font-size:13px;
margin-bottom:7px}
.detail-grid{
display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);
gap:54px;
padding-bottom:50px}
.detail-content{
min-width:0}
.detail-content h2{
margin:32px 0 16px;
font-size:25px}
.detail-content p{
color:var(--muted);
line-height:1.9}
.detail-content>.asset-frame{
width:100%;
aspect-ratio:2.4;
object-fit:contain;
background:#e9eef6;
border-radius:12px;
margin-bottom:28px}
.detail-questions{
padding:24px;
background:var(--panel);
border:1px solid var(--line);
border-radius:12px;
align-self:start}
.detail-questions h2{
font-size:23px;
margin-bottom:18px}
.detail-questions ul{
padding-left:22px;
color:var(--muted);
font-size:15px}
.detail-questions li{
margin-bottom:14px}
.detail-questions .btn{
width:100%;
margin-top:10px}
.source-note{
font-size:13px!important;
color:var(--muted);
border-top:1px solid var(--line);
padding-top:20px;
margin-top:28px;
overflow-wrap:anywhere}
.source-note a{
text-decoration:underline}
.comparison-wrap{
overflow-x:auto;
margin:24px 0 35px}
.comparison{
width:100%;
border-collapse:collapse;
min-width:720px;
table-layout:fixed}
.comparison caption{
text-align:left;
color:var(--muted);
font-size:14px;
padding-bottom:18px}
.comparison th,.comparison td{
border:1px solid var(--line);
padding:20px;
text-align:left;
vertical-align:top;
overflow-wrap:anywhere}
.comparison thead th{
background:var(--panel)}
.comparison th:first-child{
width:140px}
.comparison td{
font-size:14px;
color:var(--muted)}
.comparison a{
color:var(--gold)}
.compare-tray{
position:fixed;
left:0;
width:100%;
bottom:0;
background:var(--cream);
color:var(--ink);
border-top:2px solid #e3bb58;
z-index:4}
body.has-candidates{
padding-bottom:140px}
.compare-tray .status{
color:var(--ink)}
.tray-inner{
display:flex;
justify-content:space-between;
gap:22px;
align-items:center;
padding:15px 0}
.tray-inner p{
font-size:13px;
margin-top:5px;
max-width:650px}
.tray-inner .text-btn{
color:var(--ink)}
.tray-inner .btn{
white-space:nowrap}
.tray-actions{
display:flex;
gap:12px;
align-items:center}
.status{
font-size:14px;
color:var(--gold);
margin-top:14px}
.consult-panel{
padding:30px;
background:var(--panel);
border:1px solid var(--line);
border-radius:12px;
margin:28px 0}
.consult-panel h2{
font-size:26px}
.consult-panel p{
color:var(--muted);
font-size:15px;
margin-top:15px}
.consult-panel textarea{
min-height:200px;
margin:20px 0 16px}
.action-row{
display:flex;
flex-wrap:wrap;
gap:12px}
.empty{
padding:32px;
border:1px solid var(--line);
border-radius:12px;
background:var(--panel)}
.empty p{
color:var(--muted);
margin-top:12px}
.empty .btn{
margin-top:22px}
.service-copy{
max-width:760px;
margin:0 auto 45px}
.service-copy h2{
font-size:26px;
margin:32px 0 16px}
.service-copy p{
color:var(--muted)}
.site-footer{
padding:30px 0;
border-top:1px solid var(--line);
color:var(--muted);
font-size:13px}
.footer-inner{
display:flex;
justify-content:space-between;
gap:24px}
.footer-inner strong{
color:var(--text);
font-size:23px}
.footer-inner nav{
display:flex;
gap:24px;
flex-wrap:wrap}
.footer-inner .footer-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
min-width:340px;
align-items:center}
.footer-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
height:44px;
min-height:44px;
padding:10px 14px;
border:1px solid #8292a8;
border-radius:8px;
background:transparent;
color:var(--text);
font:600 14px/1.4 var(--sans);
white-space:nowrap;
text-decoration:none}
.footer-actions a:hover{
background:var(--panel);
border-color:var(--gold);
text-decoration:none}
.footer-actions a:active{
transform:translateY(1px)}
.site-footer .local-note{
font-size:12px;
margin-top:20px}
.sr-only{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0)}

@media(max-width:900px){
.shell{
width:calc(100% - 40px)}
.site-header nav{
gap:18px}
.brand strong{
font-size:24px}
.chooser{
padding:28px}
.selection-method{
gap:35px}
.detail-grid{
gap:30px}
.result-item{
grid-template-columns:110px minmax(0,1fr) 130px;
gap:18px}
.result-item>.asset-frame{
width:110px}
.result-item h3{
font-size:21px}
}

@media(max-width:620px){
.shell{
width:calc(100% - 36px)}
body{
font-size:15px}
.nav-inner{
display:block;
position:relative;
padding:16px 0;
min-height:0}
.brand img{
width:40px;
height:40px}
.brand strong{
font-size:24px}
.brand small{
font-size:12px}
.site-header nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:4px;
margin-top:12px;
white-space:nowrap;
font-size:13px}
.nav-consult{
position:absolute;
top:18px;
right:0;
padding:6px 10px}
.chooser-title{
padding:24px 0 50px;
text-align:left}
.selector-hero{
min-height:220px}
.selector-hero::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(180deg,rgba(16,31,56,.97),rgba(16,31,56,.82) 36%,rgba(16,31,56,.08) 72%)}
.hero-background img{
object-position:78% center}
.chooser-title h1{
font-size:32px}
.chooser-title p{
font-size:14px;
margin-top:12px;
max-width:300px}
.journey{
margin:20px 0 22px}
.journey li{
font-size:12px;
padding:10px 4px}
.journey strong{
font-size:16px;
margin-right:4px}
.chooser{
padding:24px 18px;
border-radius:12px}
.chooser h2{
font-size:24px}
.chooser .help{
font-size:13px}
.profile-fields{
grid-template-columns:1fr;
gap:16px}
.choice-label{
font-size:17px;
margin-top:22px}
.choice-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px}
.choice{
min-height:68px;
padding:13px 8px;
font-size:15px}
.interests{
grid-template-columns:repeat(2,minmax(0,1fr))}
.readiness{
grid-template-columns:1fr}
.readiness .choice{
min-height:58px;
text-align:left;
padding:12px 15px}
.readiness small{
display:inline;
margin-left:10px}
.chooser-actions{
padding-top:20px;
margin-top:22px}
.chooser-actions .btn{
padding:11px 16px}
.chooser-foot{
font-size:12px;
text-align:left}
.selection-method{
display:block;
padding:28px 0}
.selection-method h2{
font-size:28px;
margin-bottom:24px}
.method-lines li{
font-size:14px}
.result-heading{
display:block}
.result-heading h2{
font-size:27px}
.result-heading .btn{
margin-top:18px}
.condition-summary{
font-size:14px}
.result-item{
grid-template-columns:minmax(0,1fr) 92px;
gap:16px;
padding:24px 0}
.result-item>.asset-frame{
grid-column:2;
grid-row:1;
width:92px;
align-self:start}
.result-item>div:first-of-type{
grid-column:1;
grid-row:1}
.result-item h3{
font-size:21px}
.result-item .reason{
font-size:14px}
.result-item .small{
font-size:12px}
.recommended-item{
grid-template-columns:1fr}
.recommended-item>.asset-frame{
grid-column:1;
grid-row:1;
width:min(100%,340px)}
.recommended-item>div:first-of-type{
grid-column:1;
grid-row:2}
.recommended-item .result-actions{
flex-wrap:wrap;
gap:10px 16px}
.recommendation-reasons dd{
font-size:14px}
.result-notes{
font-size:13px}
.result-actions{
grid-column:1/-1;
flex-direction:row;
align-items:center;
gap:20px}
.result-actions .compare-add{
padding:10px 18px}
.result-actions a{
padding:9px 12px}
.filter-line{
grid-template-columns:1fr 1fr;
gap:12px}
.filter-line>div:first-child{
grid-column:1/-1}
.detail-grid{
display:block}
.detail-questions{
margin-top:28px;
padding:22px}
.page-top h1{
font-size:33px}
.fact-list{
gap:12px 20px}
.fact-list li{
font-size:14px}
.detail-content h2{
font-size:24px}
.tray-inner{
display:block;
padding:12px 0}
.tray-inner p{
max-height:46px;
overflow:auto;
font-size:12px}
.tray-actions{
margin-top:10px;
justify-content:space-between}
.tray-actions .btn{
min-height:44px;
padding:9px 18px}
.comparison th,.comparison td{
padding:14px}
.consult-panel{
padding:22px 18px}
.consult-panel h2{
font-size:23px}
.footer-inner{
display:block}
.footer-inner nav{
margin-top:20px;
font-size:13px}
.footer-inner .footer-actions{
min-width:0;
width:100%}
.light-area{
padding:28px 0}
.light-area h2{
font-size:26px}
.source-note{
font-size:12px!important}
.result-heading p{
font-size:13px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*{
transition:none!important;
animation:none!important}
}