: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}}.ws-count{margin-left:.4rem;color:var(--sx-muted);font-weight:400;font-size:.85rem}.ws-room{position:relative;border:1px solid var(--sx-line);border-radius:.5rem;background:radial-gradient(circle,var(--sx-line) 1px,transparent 1px) 0 0 / 1.5rem 1.5rem,#00000026;height:22rem;overflow:hidden;touch-action:none;cursor:crosshair;user-select:none}.ws-hint{position:absolute;inset:auto 0 .75rem;margin:0;color:var(--sx-muted);font-size:.85rem;text-align:center;pointer-events:none}.ws-cursor{position:absolute;transition:left .08s linear,top .08s linear;pointer-events:none;& svg{display:block;width:1.1rem;height:1.1rem;fill:var(--color);stroke:#000;stroke-width:1}& span{display:inline-block;margin:.1rem 0 0 .8rem;border-radius:999px;background:var(--color);padding:.05rem .5rem;color:#000;font-weight:600;font-size:.75rem;white-space:nowrap}}.ws-ripple{position:absolute;translate:-50% -50%;animation:ws-ripple .8s ease-out forwards;border:2px solid var(--color, var(--sx-accent));border-radius:50%;width:4rem;height:4rem;pointer-events:none}.ws-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:.75rem;color:var(--sx-muted);font-variant-numeric:tabular-nums;#you{font-weight:600}}.ws-note{color:var(--sx-muted);font-size:.9rem}@keyframes ws-ripple{0%{scale:.1;opacity:1}to{scale:1.5;opacity:0}}