.http-reader { margin-block: 32px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--fdn-border); border-block-start: 4px solid var(--fdn-blue); border-radius: 14px; background: #fff; color: var(--fdn-text); }
.http-reader h2 { margin-block: 0 16px; }
.http-reader-control { margin-block: 24px; max-width: 640px; }
.http-reader-control label { display: block; margin-block-end: 8px; font-weight: 700; }
.http-reader-control select { min-height: 48px; width: 100%; font: inherit; }
.http-reader-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.http-reader .http-reader-case { min-width: 0; margin: 0; padding: 0; border: 1px solid #c9d7e3; border-radius: 10px; background: #f5f8fb; }
.http-reader-case > summary { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 72px; list-style: none; cursor: pointer; font-weight: 700; line-height: 1.45; color: #002355; overflow-wrap: anywhere; }
.http-reader-case > summary::after { content: '+'; margin-inline-start: auto; flex: 0 0 20px; text-align: center; font-size: 1.4rem; }
.http-reader-case[open] > summary::after { content: '−'; }
.http-reader-code { padding: 4px 8px; flex-shrink: 0; font-size: .95rem; color: #fff; background: #173b61; border-radius: 6px; white-space: nowrap; }
.http-reader-case dl { margin: 0; padding: 0 20px 20px; }
.http-reader-case dt { margin-block: 16px 4px; font-weight: 700; color: #002355; }
.http-reader-case dd { margin: 0; line-height: 1.65; }
.http-reader-case[open]:only-of-type, .http-reader-cases:has(> [hidden]) > :not([hidden]) { grid-column: 1 / -1; }
.http-reader [hidden] { display: none; }
.http-reader-source { margin-block: 20px 0; font-size: .95rem; overflow-wrap: anywhere; }
.http-reader-diagram { margin: 24px auto; max-width: 700px; }
.http-reader-diagram img { display: block; width: 100%; height: auto; }
.http-reader-diagram figcaption { margin-block-start: 12px; color: #465567; font-size: .95rem; }
@media (min-width: 1100px) {
  .http-reader:has(.http-reader-diagram) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .http-reader:has(.http-reader-diagram) > :is(h2, p) { grid-column: 1 / -1; }
  .http-reader:has(.http-reader-diagram) > .http-reader-diagram { grid-column: 1; grid-row: 3 / span 2; margin: 12px 0 0; }
  .http-reader:has(.http-reader-diagram) > .http-reader-control { grid-column: 2; margin: 12px 0 20px; }
  .http-reader:has(.http-reader-diagram) > .http-reader-cases { grid-column: 2; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) { .http-reader-cases { grid-template-columns: minmax(0, 1fr); } .http-reader-case > summary { flex-wrap: wrap; } .http-reader-case > summary > span { flex: 1 1 140px; } }
.http-reader-note{font-size:.95rem;line-height:1.7;color:#465567}.http-reader-demo{padding:0 20px 20px;min-width:0}.http-reader-demo figure{margin-block:0 20px}.http-reader-demo figcaption{font-weight:700;margin-block-end:10px}.http-reader-demo pre{padding:16px;background:#fff;border:1px solid #c9d7e3;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;line-height:1.7;text-align:left}.http-reader-demo pre code{font:inherit;color:#173b61;background:none;padding:0;white-space:inherit}.http-reader-demo button{white-space:normal;min-height:48px}.http-reader-demo .http-reader-readout{padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:20px 0}.http-reader-readout>div{padding:14px;border:1px solid #c9d7e3;border-radius:8px;background:#fff;min-width:0}.http-reader-readout>div:last-child{grid-column:1/-1}.http-reader-readout dt{margin:0 0 8px}.http-reader-readout code{color:#173b61}.http-reader :is(button,select,summary):focus-visible{outline:3px solid #28689f;outline-offset:4px}
@media(max-width:767px){.http-reader-demo .http-reader-readout{grid-template-columns:minmax(0,1fr)}.http-reader-demo{padding:0 16px 16px}}