.benchmark-flow-figure { margin: 1.5rem 0; border: 1px solid var(--docs-line); border-radius: .45rem; background: #031226; }
.benchmark-flow-scroll { overflow-x: auto; border-radius: .45rem .45rem 0 0; }
.benchmark-flow-scroll:focus-visible { outline: 2px solid var(--atrekes-cyan-accent); outline-offset: 2px; }
.benchmark-flow-scroll img { display: block; width: 100%; min-width: 640px; max-width: none; height: auto; }
.benchmark-flow-figure figcaption { padding: .9rem 1rem; border-top: 1px solid var(--docs-line); color: #9fb8cf; font-size: .78rem; line-height: 1.6; }
.benchmark-flow-figure figcaption a { display: inline-block; margin-left: .4rem; font-weight: 750; }
.benchmark-flow-section { scroll-margin-top: 6rem; }
.docs-masthead h1, .benchmark-flow-section h2 { overflow-wrap: anywhere; }
.benchmark-flow-section h3 { overflow-wrap: anywhere; }
.benchmark-flow-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin: 1rem 0; color: #b8cee1; font-size: .75rem; }
.benchmark-flow-legend span::before { display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; border: 1px solid #24d1f5; border-radius: .15rem; background: rgb(36 209 245 / 8%); content: ""; }
.benchmark-flow-legend span:last-child::before { border-color: #7893a9; background: transparent; }
.benchmark-flow-mobile-hint { display: none; }
.benchmark-chart-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; padding: 1rem; color: #dceeff; font-size: .78rem; }
.benchmark-chart-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.benchmark-chart-legend i { display: inline-block; flex: 0 0 .65rem; width: .65rem; height: .65rem; border-radius: 50%; }
.session-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.session-selectors label { display: grid; gap: .5rem; min-width: 0; color: #b8cee1; font-size: .8rem; font-weight: 700; }
.session-selectors select { width: 100%; min-width: 0; min-height: 2.8rem; padding: .6rem; border: 1px solid var(--docs-line); border-radius: .35rem; background: #031226; color: #dceeff; font: inherit; }
.session-selectors select:focus-visible { outline: 2px solid var(--atrekes-cyan-accent); outline-offset: 2px; }
.benchmark-workflow { margin: 1rem 0; border: 1px solid var(--docs-line); border-radius: .45rem; background: #031226; scroll-margin-top: 6rem; }
.benchmark-workflow > summary { padding: 1rem; color: #eaf6ff; font-size: .95rem; font-weight: 750; line-height: 1.5; cursor: pointer; }
.benchmark-workflow > summary::marker, .benchmark-clock-variant > summary::marker { color: var(--atrekes-cyan-accent); }
.benchmark-workflow > summary:focus-visible, .benchmark-clock-variant > summary:focus-visible { outline: 2px solid var(--atrekes-cyan-accent); outline-offset: 3px; }
.benchmark-workflow-subtitle { display: block; margin-top: .4rem; margin-left: 1.1rem; color: #9fb8cf; font-size: .78rem; font-weight: 500; }
.benchmark-workflow-body, .benchmark-workflow > .benchmark-wire-samples { padding: 0 1rem 1rem; }
.benchmark-measurement-points { display: grid; gap: .9rem; margin: 1.3rem 0; }
.benchmark-measurement-points > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .7rem; }
.benchmark-measurement-points dt { color: #62e8bf; font-size: .85rem; font-weight: 750; }
.benchmark-measurement-points dd { margin: 0; color: #b8cee1; font-size: .87rem; line-height: 1.6; }
.benchmark-clock-variant { margin: 1.4rem 0; }
.benchmark-clock-variant > summary { color: var(--atrekes-cyan-accent); font-size: .85rem; font-weight: 700; cursor: pointer; }
.benchmark-wire-message { margin: 1.5rem 0; }
.benchmark-wire-message h4 { color: #eaf6ff; font-size: .87rem; line-height: 1.6; }
.benchmark-fix-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.benchmark-fix-message code { padding: 0; background: none; color: inherit; font: inherit; }
.benchmark-workflow .docs-source-note { overflow-wrap: anywhere; }
@media (max-width: 560px) { .benchmark-measurement-points > div { grid-template-columns: 1fr; gap: .3rem; } }
@media (max-width: 560px) { .session-selectors { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .benchmark-flow-mobile-hint { display: block; color: #9fb8cf; font-size: .75rem; } }
