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