html{background:#3c485e}
html,body{color:#464637}
p{margin:0;text-indent:2rem}
h1{color:#e9e8d4}
h4,h3{color:#7887a2}
a{color:#5F9EDF}
h3 a{color:#b9b8a5;text-decoration:none}
input{width:1.7rem;font-size:1rem;border:0;border-bottom:1px solid #999;border-radius:0;padding:0 .5rem;color:#759271;font-weight:bold}
em{color:#aaa}
em,#DNAout em,#DNAout i{font-style:inherit}
iframe{border:0;background-repeat:no-repeat;border-radius:.5em;background-color:hsl(219 38% 56%)}
#warning{background:#ffc239;text-align:center;padding:.5rem 0;border-radius:.5rem}
.MaT1{margin-top:1rem}
.container{min-width:600px;max-width:600px;margin:0 auto;padding:0 1rem}
.block__list,.block__list_words li{background-color:#fff}
.title{background-color:#a38a72}
.title,#DNAout u,.BGtype1:before,.BGtype2:before,.Bnt,.kaiguan:checked + label{color:#fff}
.cardbox,.card{padding:1rem}
.cardbox{background:#fff;border-radius:.5rem}
.Cname{position:absolute;background:#fff;min-width:3rem;border-radius:0 .3rem .3rem 0;top:2rem;left:0;padding:.2rem 1rem .2rem 1.5rem;z-index:9}
.card{background-color:#85b1ad;color:#e2f9f7;line-height:1.6rem}
.cardbox,.card{position:relative;overflow:hidden}
.P-T4{padding-top:4rem}
#DNAout span{background:#fff9c4;margin-right:.3rem}
#DNAout u,#DNAout em,#DNAout i{margin:0 .2rem}
#DNAout u{text-decoration:none;border-bottom:1px solid #5e807c;font-weight:bold}
#DNAout em,#DNAout i{color:inherit}
#DNAout em{background:#6ba29d}
#DNAout i{background:#91c1bd}
.Cname:first-letter,.kaiguan + label::before,.kaiguan:checked + label::before{font-size:1.5rem}
.BGtype1:before,.BGtype2:before{content:'\2747';position:absolute;opacity:0.3}
.BGtype1:before{font-size:5rem;left:-11px;top:13px;transform:rotate( 65deg )}
.BGtype2:before{font-size:7rem;right:-21px;top:7px;transform:rotate( 31deg )}
.Bnt{display:block;background:#6d83ad;padding:1rem 2rem}
.Bnt:hover{background:#7d93bd}
.T2.Bnt{display:inline-block;padding:0 1rem;margin-left:1rem}
input.kaiguan,#warning{display:none}
.kaiguan:checked + label{background:#84a980}
.kaiguan + label,input:disabled{background:#e2e2e2;color:#929292}
.kaiguan + label,.kaiguan:checked + label{padding:0.1rem .5rem;border-radius:1rem;cursor:pointer}
.kaiguan + label::before,.kaiguan:checked + label::before{content:"\25CF";margin-right:.2rem;position:relative;top:.1rem}
/* 复制按钮样式 */
.action-buttons{margin-top:1rem;text-align:center}
.action-btn{background:#6d83ad;color:#fff;border:none;padding:0.6rem 1.5rem;border-radius:0.5rem;cursor:pointer;font-size:1rem;transition:all 0.3s}
.action-btn:hover{background:#7d93bd;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
.action-btn:active{transform:translateY(0)}
.copy-btn{background:#5a9}

/* 参数设置改进样式 */
.param-settings{background:#fff;border-radius:0.5rem;overflow:hidden}
.param-section{margin-bottom:1.2rem;border-bottom:1px solid #e5e5e5}
.param-section:last-child{border-bottom:none;margin-bottom:0}
.param-section-header{background:linear-gradient(135deg,#a38a72 0%,#8a7359 100%);color:#fff;padding:0.8rem 1rem;display:flex;align-items:center;gap:0.5rem;font-weight:bold}
.section-icon{font-size:1.2rem}
.section-title{font-size:1rem}
.param-section-content{padding:1rem}
.param-item{margin-bottom:0.8rem}
.param-item:last-child{margin-bottom:0}
.param-label{display:block;margin-bottom:0.6rem;font-weight:600;color:#464637;font-size:0.95rem}
.param-label-small{display:inline-block;margin-right:0.8rem;font-size:0.9rem;color:#464637;font-weight:500}
.param-input-name{width:100%;max-width:12rem;font-size:1rem;border:2px solid #ddd;border-radius:0.4rem;padding:0.5rem 0.8rem;color:#759271;font-weight:bold;transition:all 0.3s;background:#fafafa}
.param-input-name:focus{outline:none;border-color:#6d83ad;background:#fff;box-shadow:0 0 0 3px rgba(109,131,173,0.1)}
.param-input-number{width:4.5rem;min-width:4.5rem;font-size:0.95rem;border:2px solid #ddd;border-radius:0.4rem;padding:0.4rem 0.5rem;color:#759271;font-weight:bold;text-align:center;transition:all 0.3s;background:#fafafa}
.param-input-number:focus{outline:none;border-color:#6d83ad;background:#fff;box-shadow:0 0 0 3px rgba(109,131,173,0.1)}
.param-input-small{width:4rem;min-width:4rem;font-size:0.9rem;border:2px solid #ddd;border-radius:0.4rem;padding:0.35rem 0.4rem;color:#759271;font-weight:bold;text-align:center;transition:all 0.3s;background:#fafafa}
.param-input-small:focus{outline:none;border-color:#6d83ad;background:#fff;box-shadow:0 0 0 3px rgba(109,131,173,0.1)}
.unit{font-size:0.85rem;color:#666;margin-left:0.3rem;font-weight:500}

/* 滑块样式 */
.range-input{flex:1;min-width:120px;height:8px;border-radius:4px;background:linear-gradient(to right,#ddd 0%,#ddd 100%);outline:none;margin:0 0.8rem;vertical-align:middle;transition:all 0.3s}
.range-input:hover{background:linear-gradient(to right,#c5c5c5 0%,#c5c5c5 100%)}
.range-input::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#6d83ad 0%,#5a6f95 100%);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:all 0.3s}
.range-input::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 6px rgba(0,0,0,0.3)}
.range-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#6d83ad 0%,#5a6f95 100%);cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:all 0.3s}
.range-input::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 3px 6px rgba(0,0,0,0.3)}

/* 身高控制 */
.height-controls{display:flex;flex-direction:column;gap:1rem}
.height-control-item{display:flex;flex-direction:column;gap:0.5rem}
.height-label{font-size:0.9rem;color:#666;font-weight:500;margin-bottom:0.3rem}
.control-wrapper{display:flex;align-items:center;gap:0.8rem}

/* 概率网格 */
.probability-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:0.5rem}
.prob-item{display:flex;flex-direction:column;gap:0.6rem;padding:0.8rem;background:#f8f8f8;border-radius:0.4rem;border:1px solid #e5e5e5;transition:all 0.3s}
.prob-item:hover{background:#f0f0f0;border-color:#ddd;box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.prob-label{font-size:0.95rem;color:#464637;font-weight:600;margin-bottom:0.2rem}
.prob-control{display:flex;align-items:center;gap:0.8rem}
.prob-value{display:flex;align-items:center;gap:0.2rem}
.percent{font-size:0.9rem;color:#666;font-weight:500}

/* 种族控制 */
.race-control{display:flex;align-items:center;gap:0.8rem;margin-bottom:1rem;padding:0.8rem;background:#f8f8f8;border-radius:0.4rem}
.hybrid-group{display:flex;align-items:center;flex-wrap:wrap;gap:0.8rem;padding:0.8rem;background:#f8f8f8;border-radius:0.4rem}
.hybrid-control{display:flex;align-items:center;gap:0.8rem;flex:1}
.checkbox-label{font-size:0.95rem;color:#464637;font-weight:600;cursor:pointer;user-select:none}

/* 地图容器响应式 */
.map-container{text-align:center;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem}
.map-container iframe{margin:0!important}

/* 响应式设计 */
@media (max-width:768px){
	.container{min-width:100%;max-width:100%;padding:0 0.5rem}
	.map-container{flex-direction:column}
	.map-container iframe{width:100%!important;max-width:300px;margin:0.5rem 0!important}
	.probability-grid{grid-template-columns:1fr;gap:0.8rem}
	.prob-item{padding:0.6rem}
	.param-section-content{padding:0.8rem}
	.param-section-header{padding:0.6rem 0.8rem}
	.section-icon{font-size:1rem}
	.section-title{font-size:0.9rem}
	.height-controls{gap:0.8rem}
	.control-wrapper{flex-wrap:wrap}
	.range-input{min-width:100px;margin:0 0.5rem}
	.param-input-name{width:100%;max-width:100%}
	.param-input-number{width:4rem;min-width:4rem}
	.param-input-small{width:3.5rem;min-width:3.5rem}
	.hybrid-group{flex-direction:column;align-items:flex-start}
	.hybrid-control{width:100%}
	.card{line-height:1.8rem;padding:0.8rem}
	#DNAout u,#DNAout em,#DNAout i{margin:0 .2rem}
	.action-btn{width:100%;max-width:300px}
}
@media (min-width:750px) and (max-width:970px){
	.container{max-width:90%;min-width:inherit}
	.card{line-height:2.6rem}
	#DNAout u,#DNAout em,#DNAout i{margin:0 .3rem}
	#DNAout span{margin-right:.4rem}
	.probability-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
	.container{max-width:800px}
}