.grid-3{display:flex;gap:1.5rem;align-items:flex-start}
.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.5rem}

bike-grid{display:flex;gap:1.5rem;align-items:flex-start}
bike-card{display:flex;flex-direction:column;gap:.5rem}
bike-file{display:flex;align-items:center;gap:.5rem}
bike-dot{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;line-height:1;flex:none;font-weight:500}

.tile{width:100%;aspect-ratio:16/9;flex:none;position:relative;overflow:hidden}
.skel{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:14px}
.ln{display:block;height:8px;border-radius:3px;background:var(--color-secondary-background);flex:none}
.mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wf{gap:3px;padding:0 16px}
.wf span{width:4px;border-radius:2px;background:#0D99FF;flex:none}
.play::after{content:"";width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent currentColor;opacity:.5}
.tok{height:7px;border-radius:2px;flex:none}
.scrub{position:absolute;left:14px;right:14px;bottom:12px;height:3px;border-radius:2px;background:var(--color-secondary-background)}
.scrub::before{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:#0D99FF}

.chrome{position:absolute;top:.75rem;left:.75rem;z-index:1}
.bubble{position:absolute;top:.75rem;left:50%;transform:translateX(-50%);z-index:2;padding:.4rem .8rem}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.live{background:#3a7d18}
.peer{background:#d24dde}

.shot{width:100%;aspect-ratio:16/9;overflow:hidden}
.frame{position:relative;padding:1.5rem}
.embed{display:block;width:100%;height:100%;border:0}
bike-cursor{display:inline-flex;align-items:center;gap:.4rem}

.sdot{width:7px;height:7px;border-radius:999px;display:inline-block;flex:none}
.chip{display:inline-flex;align-items:center;gap:.35em;padding:.15em .5em;border:1px solid;border-radius:.35rem;font:inherit;font-size:.85em;line-height:1.4;white-space:nowrap}
.caret{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

.shot-card{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.avatar{width:15px;height:15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ewf{display:flex;align-items:center;gap:3px;height:64px}
.ewf span{width:4px;border-radius:2px;background:#0D99FF;flex:none}

.num{font-variant-numeric:tabular-nums;opacity:.35}
.map-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border:1px solid;border-radius:.4rem;background:var(--color-primary-background);color:inherit;text-decoration:none;font-size:.78rem;white-space:nowrap}
.map-tag:hover{background:var(--color-secondary-background)}