input.hl:checked ~ label.hl::before{display:block;font-size:1.75rem;content:"x"}
#sm{background-color:#fcf19d;margin-top:0.4rem}
#sm.x{z-index:1;display:grid}
.sc,#sm input{display:none}
#sm a{text-decoration:none}
#sm a:active{font-weight:bold}
#sm a:hover{background-color:#ece18d}
#sm .active{font-weight:bold}
#sm>ul{display:grid;margin-top:0.4rem;padding-inline-start:0;grid-auto-rows:min-content}
#sm li{list-style-type:none;border-bottom:1px solid #6c6a2f20;padding:0.1rem}
.si.x+.sc{display:grid}
.si{display:grid;grid-template-columns:1fr 1rem;align-content:center}
.si>div,.si>label{grid-row:1/1}
.arrow{font-size:1.125rem;grid-column:2/2;width:1rem;place-self:center}
.si>input+.arrow{transform:rotate(0deg)}
.si.x>.arrow{transform:rotate(90deg)}
.sc{margin-left:2rem}