html:has(.chd),body:has(.chd){overflow-x:hidden;overflow-x:clip;max-width:100%;}
body:has(.chd){padding-top:0 !important;background:linear-gradient(180deg,#e8f0fc 0%,#f3f8fe 55%,#fff 100%) no-repeat #fff !important;background-size:100% 460px !important;}
body:has(.chd) #featureWrap{padding-top:0 !important;}
body:has(.chd) #featureWrap>div[align="center"]{display:none !important;}
.container:has(.chd){max-width:none !important;width:100% !important;padding:0 !important;}
.row:has(.chd)>.col-lg-4{display:none !important;}
.row:has(.chd)>.col-lg-8{width:100% !important;float:none;padding:0 !important;}
.row:has(.chd){margin-left:0 !important;margin-right:0 !important;}
body:has(.chd) footer:not(.fp-foot){display:none !important;}
body:has(.chd) .fp-foot{width:100% !important;left:auto !important;margin-left:0 !important;}
.chd{font-family:'Inter',sans-serif;color:#1c2733;padding-top:64px;}
.chd h1,.chd h2,.chd h3{font-family:'Manrope',sans-serif;}
.chd-wrap{max-width:1500px;margin:0 auto;padding:0 clamp(16px,3vw,32px);}
.chd-bc{font-size:13px;color:#8794a2;padding:6px 0 0;}
.chd-bc a{color:#5b6b7a;text-decoration:none;}.chd-bc a:hover{color:#0058be;}
.chd-bc .sep{margin:0 7px;color:#c2cbd4;}
.chd-hd{margin:12px 0 22px;}
.chd-hd h1{font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:-1px;color:#15233a;margin:0 0 8px;}
.chd-hd h1 span{color:#0058be;}
.chd-hd p{color:#5b6b7a;font-size:16px;margin:0;max-width:820px;}
.chd-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;}
@media(max-width:980px){.chd-grid{grid-template-columns:1fr;}}
.chd-panel{background:#fff;border:1px solid #e6ecf3;border-radius:18px;box-shadow:0 18px 44px -30px rgba(20,40,80,.45);padding:22px clamp(16px,2.4vw,28px);}
.chd-controls{display:flex;flex-direction:column;gap:16px;}
.chd-seg{display:inline-flex;background:#eef3f9;border-radius:12px;padding:4px;gap:2px;}
.chd-seg button{border:none;background:none;padding:9px 18px;border-radius:9px;font-weight:700;font-size:14px;color:#5b6b7a;cursor:pointer;font-family:'Inter';transition:.12s;}
.chd-seg button.on{background:#0058be;color:#fff;box-shadow:0 6px 14px -6px rgba(0,88,190,.6);}
.chd-lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#0058be;margin:0 0 8px;}
.chd-roots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
@media(max-width:520px){.chd-roots{grid-template-columns:repeat(4,1fr);}}
.chd-root{border:1.5px solid #e0e7f0;background:#fff;border-radius:11px;padding:9px 4px;cursor:pointer;text-align:center;transition:.12s;font-family:'Inter';}
.chd-root b{display:block;font-family:'Manrope';font-weight:800;font-size:17px;color:#22303f;line-height:1;}
.chd-root small{font-size:11px;color:#93a1b0;}
.chd-root:hover{border-color:#0058be;}
.chd-root.on{background:#0058be;border-color:#0058be;}
.chd-root.on b{color:#fff;}.chd-root.on small{color:#cfe0f6;}
.chd-types{display:flex;flex-wrap:wrap;gap:7px;padding:2px;}
.chd-type{border:1.5px solid #e0e7f0;background:#fff;border-radius:9px;padding:7px 13px;cursor:pointer;font-weight:700;font-size:13.5px;color:#3a4a5a;transition:.12s;font-family:'Inter';white-space:nowrap;}
.chd-type:hover{border-color:#0058be;color:#0058be;}
.chd-type.on{background:#0a2540;border-color:#0a2540;color:#fff;}
.chd-more{border-color:#0058be !important;color:#0058be !important;background:#eef4fd !important;}
.chd-result{margin-top:22px;}
.chd-name{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.chd-name h2{font-size:30px;font-weight:800;color:#0a2540;margin:0;letter-spacing:-.5px;}
.chd-name .es{font-size:16px;color:#7a8794;font-weight:600;}
.chd-playbig{background:linear-gradient(135deg,#0058be,#2170e4);color:#fff;border:none;border-radius:12px;height:44px;padding:0 20px;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 22px -10px rgba(0,88,190,.6);}
.chd-notes{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 20px;}
.chd-note{background:#eef4fd;color:#0058be;border-radius:8px;padding:6px 12px;font-weight:700;font-size:14px;}
.chd-note .iv{font-size:11px;color:#7fa3d0;margin-left:4px;}
.chd-diagrams{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.chd-card{border:1px solid #eef2f6;border-radius:14px;padding:12px 10px 8px;text-align:center;background:#fcfdff;}
.chd-card .pos{font-size:11px;color:#93a1b0;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.chd-card svg{width:100%;height:auto;max-width:130px;}
.chd-card .mini-play{margin-top:4px;background:#eef4fd;color:#0058be;border:none;border-radius:8px;width:34px;height:30px;cursor:pointer;font-size:13px;}
.chd-card .mini-play:hover{background:#dbe9fb;}
.chd-piano{display:flex;justify-content:center;padding:8px 0 6px;}
.chd-kbd{position:relative;height:150px;display:inline-flex;}
.chd-wk{width:40px;height:150px;border:1px solid #c9d3de;border-top:none;border-radius:0 0 6px 6px;background:#fff;position:relative;z-index:1;}
.chd-wk.act{background:linear-gradient(180deg,#4d90f0,#0058be);border-color:#0058be;}
.chd-wk span{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:11px;color:#9aa7b4;font-weight:700;}
.chd-wk.act span{color:#fff;}
.chd-bk{width:26px;height:95px;background:#22303f;position:absolute;top:0;z-index:2;border-radius:0 0 4px 4px;margin-left:-13px;}
.chd-bk.act{background:linear-gradient(180deg,#2170e4,#003a80);}
.chd-side .box{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:16px 18px;margin-bottom:18px;box-shadow:0 14px 34px -30px rgba(20,40,80,.4);}
.chd-side h4{font-family:'Manrope';font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#0058be;margin:0 0 12px;}
.chd-pop{display:flex;flex-wrap:wrap;gap:7px;}
.chd-pop button{border:1.5px solid #e0e7f0;background:#fff;border-radius:9px;padding:7px 12px;font-weight:700;font-size:14px;color:#22303f;cursor:pointer;font-family:'Manrope';transition:.12s;}
.chd-pop button:hover{border-color:#0058be;color:#0058be;}
.chd-tool{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid #f0f3f7;text-decoration:none;color:#3a4a5a;font-weight:600;font-size:14.5px;}
.chd-tool:last-child{border-bottom:0;}
.chd-tool:hover{color:#0058be;}
.chd-tool .ti{width:34px;height:34px;border-radius:9px;background:#eef4fd;color:#0058be;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.chd-seo{max-width:920px;margin:34px 0 0;color:#3f4b59;line-height:1.7;font-size:15.5px;}
.chd-seo h2{font-size:22px;color:#15233a;margin:26px 0 10px;}
.chd-faq{max-width:920px;margin:6px 0 0;}
.chd-faqh{font-family:'Manrope';margin:30px 0 4px;color:#15233a;}
.chd-faq details{border-bottom:1px solid #e8edf3;padding:14px 0;}
.chd-faq summary{font-weight:700;color:#22303f;cursor:pointer;font-size:16px;list-style:none;}
.chd-faq summary::-webkit-details-marker{display:none;}
.chd-faq summary::before{content:'+';color:#0058be;font-weight:800;margin-right:10px;}
.chd-faq details[open] summary::before{content:'–';}
.chd-faq p{color:#5b6b7a;margin:10px 0 0;line-height:1.65;}