body {
  height: 1000px;

  /* NOTE: These @font-face rules are nested as they were in your original file.
     If you want proper CSS validity, move @font-face to the top level (outside body). */
  @font-face {
    font-family: "SegoeUI_online_security";
    src: url(chrome-extension://llbcnfanfmjhpedaedhbcnpgeepdnnok/segoe-ui.woff);
  }

  @font-face {
    font-family: "SegoeUI_bold_online_security";
    src: url(chrome-extension://llbcnfanfmjhpedaedhbcnpgeepdnnok/segoe-ui-bold.woff);
  }
}

/* Base details/summary styling (desktop) */
details {
  border: 0px dotted #ccc;
  font-size: 1rem;
}

summary {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 2rem;     /* desktop left offset */
  text-indent: -2rem;    /* desktop hanging indent */
  cursor: pointer;       /* better tap/click UX */
  -webkit-tap-highlight-color: transparent;
}

/* Fallback: show/hide details content even if native <details> isn't supported */
details > :not(summary) {
  display: none;
}
details[open] > :not(summary) {
  display: block;
}

/* Nested details spacing (desktop) */
details details {
  margin-bottom: 0.2rem;
  margin-left: 1rem;
  background: #eee;
  padding: 0 5px;
}
details details summary {
  margin-left: 2.6rem;
  text-indent: -2.2rem;
}

/* Misc styles preserved */
a {
  text-decoration: none;
}
.violet { color: #785cc4; }
p.flag { margin-bottom: 10px; }
.purple {
  color: purple;
  border: solid 1px purple;
  padding: 1px 5px;
}
.navy {
  background-color: navy;
  border: solid 1px navy;
  color: #fff;
  font-weight: normal;
  padding: 0px 5px;
  border-radius: 10px;
}
.bluestacks { width: 18px; }
.color_red { color: red; }

/* Mobile: larger custom triangle, hide native marker, and reduce left indent */
@media (pointer: coarse), (max-width: 576px) {
  /* Reset desktop spacing and reserve space for a larger marker */
  details summary {
    position: relative;
    margin-left: 0;      /* remove desktop offset on mobile */
    text-indent: 0;      /* remove hanging indent on mobile */
    padding-left: 1.0em; /* space for custom triangle */
    list-style: none;    /* hide native marker in Firefox */
  }

  /* Hide native marker across engines to prevent double triangles */
  details summary::-webkit-details-marker { display: none !important; }
  details summary::marker { content: ""; font-size: 0; }

  /* Custom larger triangle on mobile */
  details > summary::before {
    content: "\25B8";    /* ▸ */
    position: absolute;
    left: 0;             /* flush with summary start */
    top: 0.1em;
    font-size: 1.3em;    /* larger on mobile */
    line-height: 1;
    color: #444;
    transition: transform 0.2s ease;
  }
  details[open] > summary::before {
    transform: rotate(90deg); /* point down when open */
  }

  /* Nested summaries on mobile */
  details details summary {
    margin-left: 0;
    padding-left: 1.2em;
  }
}