css
ai.u{
  display:block;
  color:#d8e2ea;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.02em;
  background:
    radial-gradient(circle at top, rgba(114,17,24,.22), transparent 34%),
    linear-gradient(180deg, #090b10 0%, #0e1118 42%, #0a0c11 100%);
  border:1px solid rgba(173,189,204,.16);
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 14px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  isolation:isolate;
}

ai.u::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 22%, transparent 78%, rgba(255,255,255,.03)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px);
  opacity:.25;
  mix-blend-mode:screen;
}

ai.u > hd{
  display:block;
  padding:12px 14px 10px;
  font-size:15px;
  font-weight:700;
  color:#f1f6fb;
  background:
    linear-gradient(90deg, rgba(125,17,26,.42), rgba(17,20,28,.2)),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom:1px solid rgba(190,205,216,.12);
  text-shadow:0 0 10px rgba(255,96,96,.18);
}

ai.u details{
  margin:0;
  border-top:1px solid rgba(190,205,216,.08);
  background:rgba(8,10,14,.52);
  backdrop-filter:blur(6px);
}

ai.u details[open]{
  background:rgba(12,15,20,.78);
}

ai.u summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:12px 14px;
  font-size:15px;
  font-weight:700;
  color:#edf4fa;
  position:relative;
  transition:.2s ease;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

ai.u summary::-webkit-details-marker{
  display:none;
}

ai.u summary::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid #cfd9e2;
  border-bottom:2px solid #cfd9e2;
  transform:translateY(-60%) rotate(45deg);
  opacity:.8;
  transition:transform .2s ease, opacity .2s ease;
}

ai.u details[open] > summary::after{
  transform:translateY(-20%) rotate(225deg);
  opacity:1;
}

ai.u summary:hover{
  background:rgba(255,255,255,.03);
  color:#fff;
}

ai.u p{
  margin:0;
  padding:7px 14px;
  border-top:1px dashed rgba(190,205,216,.08);
}

ai.u p:first-of-type{
  border-top:none;
}

ai.u b{
  color:#f6fbff;
  font-weight:700;
}

ai.u details p:nth-of-type(odd){
  background:rgba(255,255,255,.01);
}

ai.u details p:hover{
  background:rgba(174,30,41,.08);
}

ai.u details p{
  word-break:break-word;
}

ai.u details p::selection,
ai.u summary::selection,
ai.u b::selection{
  background:#7f1520;
  color:#fff;
}

ai.u details p:not(:last-child){
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.015);
}

ai.u details p{
  color:#d4dee7;
}

ai.u details[open] summary{
  border-bottom:1px solid rgba(255,255,255,.04);
}

ai.u details > p:last-child{
  padding-bottom:12px;
}

ai.u details:nth-of-type(1) summary{color:#ffd9dd;}
ai.u details:nth-of-type(2) summary{color:#eef4ff;}
ai.u details:nth-of-type(3) summary{color:#f0edff;}
ai.u details:nth-of-type(4) summary{color:#fff0cf;}
ai.u details:nth-of-type(5) summary{color:#e7f5ff;}
ai.u details:nth-of-type(6) summary{color:#f5eaff;}
ai.u details:nth-of-type(7) summary{color:#e7fff2;}
ai.u details:nth-of-type(8) summary{color:#fff1f1;}

ai.u details::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}