.sample-screen{border:1px solid #dce1d6;border-radius:12px;background:#fff;overflow:hidden;transition:border-color .35s,box-shadow .35s}.sample-nav{padding:15px 18px;display:flex;gap:8px;background:#f5f6f2;border-bottom:1px solid #e7eae2}.sample-nav span{font-size:12px;padding:6px 13px;border-radius:6px;color:#626861}.sample-nav .selected{background:#171817;color:#fff}output{display:flex;align-items:center;min-height:126px;padding:26px;font-size:25px;font-weight:500;letter-spacing:-.035em;line-height:1.3}.request-track{height:4px;background:#e9ece6;overflow:hidden}.request-track span{display:block;background:#9eb195;width:0;height:100%;transition:width .3s ease}article[data-state="loading"] .request-track span{width:45%;animation:request-pending 1s ease-in-out infinite alternate}article[data-state="success"] .request-track span,article[data-state="stale"] .request-track span{width:100%}article[data-state="stale"] .sample-screen{border-color:#b28c72;box-shadow:0 0 0 3px #b28c721a}article[data-state="stale"] .request-track span{background:#a27456}article[data-state="error"] output{font-size:19px;color:#884826}article[data-state="error"] .sample-screen{border-color:#b28c72}pre{font:12px/1.8 "DM Sans",sans-serif;white-space:pre-wrap;min-height:87px;margin:20px 0 0;color:#626861}article[data-state="success"] .sample-screen{border-color:#8ba27f}@keyframes request-pending{from{transform:translateX(0)}to{transform:translateX(130%)}}