.trace-lab{background:var(--white);border:1px solid var(--line);padding:30px 36px;margin:0 0 42px}.lab-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.lab-heading h2{font-size:32px;letter-spacing:-1px;margin:14px 0}.lab-heading>a{font-family:var(--mono);font-size:12px;text-decoration:underline;text-underline-offset:3px}.lab-intro{max-width:800px;line-height:1.7;color:var(--muted);font-size:15px}.mode-buttons{display:flex;gap:8px;margin:25px 0}.mode-buttons button{font:500 13px var(--mono);background:transparent;border:1px solid var(--line);color:var(--ink);padding:14px 19px;cursor:pointer;border-radius:2px}.mode-buttons button:hover{border-color:var(--ink)}.mode-buttons button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.mode-buttons button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.trace-summary{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);padding:25px 0 20px}.trace-explainer{font-size:18px;max-width:640px;line-height:1.5;margin:12px 0}.count{display:flex;align-items:center;gap:15px;flex-shrink:0}.count strong{font-size:64px;line-height:1;letter-spacing:-3px;font-weight:500}.count span{font:11px var(--mono);width:65px;line-height:1.5}.request-trace{padding:0;margin:0;list-style:none}.request-trace li{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:15px 18px;font:13px var(--mono)}.request-number{color:var(--muted);font-size:11px}.request-trace strong{font-weight:500;flex:1}.request-trace small{font-weight:400;margin-left:16px;color:#8d3a2a;font-size:11px}.response{padding:5px 10px;background:var(--green);color:#354235;border-radius:2px;font-size:12px}.response.failed{background:#f8e2d9;color:#8d3a2a}.request-trace li.replayed{background:#fcf1e9}.trace-footer{font-size:13px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:16px}.lab-caption{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:0}.lab-caption a{text-decoration:underline;text-underline-offset:2px}.prose section:first-child{margin-top:0}
@media(max-width:750px){.trace-lab{padding:20px 18px;margin-bottom:28px}.lab-heading{display:block}.lab-heading h2{font-size:27px}.lab-heading>a{font-size:11px}.mode-buttons{flex-direction:column;gap:6px;margin:20px 0}.mode-buttons button{text-align:left;font-size:12px;padding:12px}.trace-summary{align-items:start;gap:15px}.trace-explainer{font-size:15px}.count{display:block;text-align:right}.count strong{font-size:48px}.count span{display:block;font-size:10px;max-width:55px}.request-trace li{gap:10px;padding:13px 8px;font-size:11px}.request-trace small{display:block;margin:5px 0 0;font-size:10px}.response{font-size:10px;padding:5px 7px}.trace-summary .eyebrow{font-size:10px}}