:root{--sx-accent: #22d3ee;--sx-accent-2: #a855f7;--sx-line: rgba(127, 127, 127, .2);--sx-soft: rgba(127, 127, 127, .07);--sx-muted: rgba(127, 127, 127, .9);--sx-ok: #22c55e;--sx-warn: #f59e0b;--sx-error: #ef4444;--sx-gradient: linear-gradient(120deg, var(--sx-accent), var(--sx-accent-2))}.sx{margin:0 auto;max-width:48rem}.sx-toggle{display:flex;margin:1.5rem auto;border:1px solid var(--sx-line);border-radius:999px;background:var(--sx-soft);padding:.25rem;width:fit-content;& a{border-radius:999px;padding:.4rem 1.25rem;color:inherit;font-weight:600;text-decoration:none;&[aria-current=page]{background:var(--sx-gradient);color:#fff}}}.sx-button{display:inline-block;border-radius:.5rem;background:var(--sx-gradient);padding:.5rem 1.25rem;color:#fff;font-weight:600;text-decoration:none;&:hover{filter:brightness(1.1)}}.sx-card{margin:1.5rem 0;border:1px solid var(--sx-line);border-radius:.75rem;background:var(--sx-soft);padding:1.25rem 1.5rem;>header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:1rem;& h2{margin:0;font-size:1.15rem;text-align:left}}}.sx-result{animation:sx-fade .3s ease-out both;margin:0 0 .75rem;border-left:3px solid var(--sx-accent);border-radius:.25rem;background:var(--sx-soft);padding:.6rem .9rem;& p{margin:.25rem 0}& small{color:var(--sx-muted);font-variant-numeric:tabular-nums}}.sx-pending{margin:0 0 .75rem;border:1px dashed var(--sx-line);border-radius:.25rem;padding:.6rem .9rem;color:var(--sx-muted)}.sx-bar{position:relative;margin-top:.4rem;border-radius:999px;background:var(--sx-line);height:.4rem;overflow:hidden;&:after{position:absolute;inset:0 auto 0 calc(var(--from, 0) * 100%);border-radius:inherit;background:var(--sx-gradient);width:calc((var(--to, 0) - var(--from, 0)) * 100%);content:""}}.sx-done{display:block;animation:sx-fade .3s ease-out both;margin:1.5rem auto;border:1px solid var(--sx-ok);border-radius:999px;padding:.4rem 1.25rem;width:fit-content;color:var(--sx-ok);font-weight:600;font-variant-numeric:tabular-nums}.sx-status{display:inline-flex;align-items:center;gap:.4rem;color:var(--sx-muted);font-size:.85rem;&:before{border-radius:50%;background:var(--sx-warn);width:.6rem;height:.6rem;content:""}&[data-state=open]:before{animation:sx-pulse 2s ease-in-out infinite;background:var(--sx-ok)}&[data-state=closed]:before{background:var(--sx-error)}}@keyframes sx-fade{0%{transform:translateY(.25rem);opacity:0}}@keyframes sx-pulse{50%{opacity:.4}}.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr));gap:0 1rem;margin:2rem 0}.ag-card{--tone: var(--sx-ok);display:grid;position:relative;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-bottom:1rem;animation:ag-pop .5s cubic-bezier(.2,.9,.3,1.3) both;transition:transform .2s,box-shadow .2s;border:1px solid color-mix(in srgb,var(--tone) 35%,transparent);border-radius:1rem;background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--tone) 18%,transparent),transparent 60%),linear-gradient(160deg,#ffffff0f,#ffffff03);padding:1.1rem 1.2rem;overflow:hidden;&:hover{transform:translateY(-3px);box-shadow:0 12px 32px -12px color-mix(in srgb,var(--tone) 60%,transparent)}&[data-status=error]{--tone: var(--sx-error)}&[data-status=timeout]{--tone: var(--sx-warn)}>header,>footer{margin:0;border:none;border-radius:0;background:none;padding:0}& header{display:flex;align-items:center;gap:.75rem;& div{flex:1;min-width:0}& h2{margin:0;font-size:.95rem;line-height:1.2;text-align:left}& small{display:block;margin-top:.15rem;color:var(--sx-muted);font-size:.75rem;line-height:1.2;overflow-wrap:anywhere}}& footer{display:flex;align-items:center;gap:.6rem}}.ag-icon{display:grid;flex:none;place-items:center;border-radius:.75rem;background:color-mix(in srgb,var(--tone) 20%,transparent);width:2.5rem;height:2.5rem;font-size:1.35rem}.ag-pill{flex:none;border-radius:999px;background:color-mix(in srgb,var(--tone) 22%,transparent);padding:.1rem .55rem;color:var(--tone);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;[data-status=ok] &:before{display:inline-block;vertical-align:.05rem;animation:sx-pulse 1.6s ease-in-out infinite;margin-right:.35rem;border-radius:50%;background:currentColor;width:.45rem;height:.45rem;content:""}}.ag-body{display:flex;flex:1;flex-direction:column;gap:.75rem}.ag-figure{display:flex;align-items:baseline;gap:.4rem;margin:0;& strong{background:linear-gradient(120deg,#fff,var(--tone));background-clip:text;color:transparent;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}& span{color:var(--sx-muted);font-size:.85rem;font-weight:600}}.ag-headline{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere;& a{color:inherit;text-decoration-color:color-mix(in srgb,var(--sx-accent) 60%,transparent);text-underline-offset:.2em;&:hover{color:var(--sx-accent)}}}.ag-message{margin:0;color:var(--tone);font-size:.9rem}.ag-details{display:grid;gap:.3rem;margin:auto 0 0;border-top:1px dashed var(--sx-line);padding-top:.6rem;& div{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}& dt{color:var(--sx-muted)}& dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}}.ag-rank{border-radius:.4rem;background:color-mix(in srgb,var(--tone) 18%,transparent);padding:0 .4rem;color:var(--tone);font-size:.75rem;font-weight:800;font-variant-numeric:tabular-nums}.ag-meter{flex:1;border-radius:999px;background:var(--sx-line);height:.35rem;overflow:hidden;&:after{display:block;transform-origin:left;animation:ag-grow .8s ease-out both;border-radius:inherit;background:linear-gradient(90deg,var(--sx-accent),var(--tone));width:calc(var(--to) * 100%);height:100%;content:""}}.ag-time{color:var(--sx-muted);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}.ag-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.75rem;animation:ag-pop .5s ease-out both}.ag-stat{--tone: var(--sx-accent);border:1px solid var(--sx-line);border-radius:1rem;background:var(--sx-soft);padding:.9rem 1rem;text-align:center;&[data-status=ok]{--tone: var(--sx-ok)}&[data-status=error]{--tone: var(--sx-error)}&[data-status=timeout]{--tone: var(--sx-warn)}& strong{display:block;color:var(--tone);font-size:1.6rem;font-variant-numeric:tabular-nums}& small{color:var(--sx-muted);font-size:.75rem}}.ag-hero{grid-column:span 2;border:none;background:var(--sx-gradient);& strong,small{color:#fff}& strong{font-size:2rem}}@keyframes ag-pop{0%{transform:translateY(.75rem) scale(.96);opacity:0}}@keyframes ag-grow{0%{transform:scaleX(0)}}