@import "https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css";
@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
:root {
  font-size: 10px;
}
body {
  background-image: linear-gradient(90deg, rgb(230 245 255 / 0.5) 0.1rem, transparent 0.1rem), linear-gradient(180deg, rgb(230 245 255 / 0.5) 0.1rem, transparent 0.1rem);
  background-size: 0.8rem 0.8rem;
  font:
    1.6rem / 1.5 Inter,
    sans-serif;
  font-feature-settings: "palt";
  padding: 3.2rem;
}
details {
  background-color: rgb(0 0 0 / 0.1);
  border-radius: 0.4rem;
  overflow: hidden;
  & & {
    margin-top: 3.2rem;
  }
  & + & {
    margin-top: 1.6rem;
  }
}
summary {
  align-items: center;
  background-color: rgb(0 0 0 / 0.1);
  cursor: pointer;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
  outline-offset: -2px;
  padding: 1.6rem;
  position: relative;
  user-select: none;
  &::-webkit-details-marker {
    display: none;
  }
  &::after {
    aspect-ratio: 1;
    background-color: currentColor;
    clip-path: polygon(0 25%, 15% 25%, 50% 60%, 85% 25%, 100% 25%, 50% 75%);
    content: "";
    transition: 0.3s rotate;
    width: 1.6rem;
  }
  details[data-disclosure-open] > & {
    background-color: #000;
    color: #fff;
    &::after {
      rotate: 180deg;
    }
  }
  details[aria-disabled="true"] > & {
    background-color: none;
    color: rgb(0, 0, 0, 0.35);
  }
  details:not(:is([data-disclosure-open], [open])) > &:hover {
    background-color: rgb(0 0 0 / 0.2);
  }
  & + * > * {
    padding: 3.2rem;
  }
}