.cp-reading-drawer {
 box-sizing:border-box;
 margin:20px 16px;
 padding:20px 16px;
 background:#f0f3f4;
 border:1px solid #aacacd;
 border-radius:8px;
 color:#1b1c1a;
 font-size:14px;
 line-height:1.7
}
.cp-reading-drawer * {
 box-sizing:border-box
}
.cp-reading-drawer h2 {
 margin:0 0 10px;
 font-size:19px;
 line-height:1.6;
 font-weight:700
}
.cp-reading-drawer p {
 margin:0 0 12px
}
.cp-reading-drawer details {
 margin:8px 0 0;
 border:1px solid #96bbbe;
 border-radius:6px;
 background:#fff;
 overflow:hidden
}
.cp-reading-drawer summary {
 min-height:48px;
 padding:12px;
 cursor:pointer;
 font-weight:700
}
.cp-reading-drawer summary::marker {
 color:#217073
}
.cp-reading-drawer details[open] summary {
 background:#e2f6f8;
 border-bottom:1px solid #aacacd
}
.cp-reading-drawer details>div {
 padding:14px 12px
}
.cp-reading-drawer button {
 display:block;
 min-height:44px;
 max-width:100%;
 padding:10px 14px;
 border:1px solid #408589;
 border-radius:6px;
 background:#f2fbfc;
 color:#1a4b4d;
 font:inherit;
 font-weight:700;
 cursor:pointer
}
.cp-reading-drawer :is(button,summary):focus-visible {
 outline:3px solid #1a4b4d;
 outline-offset:-3px
}
.cp-matrix,.cp-phase,.cp-rankrow-list {
 scroll-margin-top:20px
}
@media(max-width:390px) {
 .cp-reading-drawer {
  margin:16px 12px;
  padding:16px 12px
 }
}