/* v31 — redesign the interaction explanation block in the core-tools section */
.instrument-v11-head{
  align-items:stretch!important;
}
.instrument-v14-note{
  align-self:stretch!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  gap:18px!important;
  min-height:228px!important;
  padding:22px!important;
  border:1px solid rgba(86,104,226,.12)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(102,119,246,.13),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(247,249,255,.96))!important;
  box-shadow:0 18px 44px rgba(46,59,111,.07)!important;
  font-size:initial!important;
  letter-spacing:normal!important;
}
.instrument-note-head{
  display:grid;
  gap:7px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(64,80,137,.08);
}
.instrument-note-head>span{
  color:#6877a7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}
.instrument-note-head>strong{
  color:#1c2745;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.025em;
  font-weight:760;
}
.instrument-note-head>p{
  max-width:520px;
  margin:0;
  color:#6e7b94;
  font-size:12px;
  line-height:1.7;
  letter-spacing:0;
}
.instrument-note-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.instrument-note-grid>span{
  position:relative;
  display:grid;
  grid-template-columns:30px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-content:center;
  min-height:72px;
  padding:12px 13px;
  border:1px solid rgba(77,94,169,.09);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 22px rgba(47,60,112,.035);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.instrument-note-grid>span:hover{
  transform:translateY(-2px);
  border-color:rgba(91,109,240,.25);
  background:#fff;
  box-shadow:0 12px 28px rgba(55,69,130,.08);
}
.instrument-note-grid>span>i{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  align-self:center;
  border-radius:10px;
  color:#5f70e8;
  background:#eef1ff;
  font-size:9px;
  font-style:normal;
  font-weight:800;
}
.instrument-note-grid>span>b{
  color:#202b48;
  font-size:13px!important;
  line-height:1.2;
  letter-spacing:.06em;
  font-weight:800;
}
.instrument-note-grid>span>small{
  margin-top:4px;
  color:#78849c;
  font-size:11px!important;
  line-height:1.45;
  letter-spacing:0!important;
}

html[data-theme="dark"] .instrument-v14-note{
  border-color:rgba(139,154,214,.13)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(111,125,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(17,26,50,.96),rgba(12,20,39,.98))!important;
  box-shadow:0 20px 48px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .instrument-note-head{border-color:rgba(139,154,214,.10)}
html[data-theme="dark"] .instrument-note-head>span{color:#8797f5}
html[data-theme="dark"] .instrument-note-head>strong{color:#edf2ff}
html[data-theme="dark"] .instrument-note-head>p{color:#9eabc7}
html[data-theme="dark"] .instrument-note-grid>span{
  border-color:rgba(139,154,214,.10);
  background:linear-gradient(180deg,rgba(23,32,59,.93),rgba(17,25,47,.95));
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
html[data-theme="dark"] .instrument-note-grid>span:hover{
  border-color:rgba(124,143,255,.28);
  background:linear-gradient(180deg,rgba(31,43,78,.97),rgba(22,32,61,.97));
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
html[data-theme="dark"] .instrument-note-grid>span>i{
  color:#a9b5ff;
  background:#1b2850;
}
html[data-theme="dark"] .instrument-note-grid>span>b{color:#eef3ff}
html[data-theme="dark"] .instrument-note-grid>span>small{color:#9aa7c3}

@media(max-width:1180px){
  .instrument-v14-note{min-height:0!important}
  .instrument-note-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .instrument-v14-note{padding:18px!important;border-radius:20px!important}
  .instrument-note-head>strong{font-size:17px}
  .instrument-note-head>p{font-size:11px}
  .instrument-note-grid{grid-template-columns:1fr 1fr}
  .instrument-note-grid>span{min-height:68px;padding:11px}
}