/* walki */
.wk-target { font-size: 18px; }
.wk-target b { font-family: var(--f-display); font-weight: 400; font-size: 26px; color: var(--pc); margin-left: 4px; }
.wk-ptt {
  width: min(190px, 52vw); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 50% 38%, #34302c, #1c1a18 70%); color: #f4f1ec;
  display: grid; place-items: center; align-content: center; gap: 6px;
  box-shadow: 0 0 0 10px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.45);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .12s, background .15s, box-shadow .15s;
}
.wk-ptt span { font-size: 44px; line-height: 1; }
.wk-ptt small { font-size: 13px; font-weight: 700; }
.wk-ptt.on { transform: scale(.95); background: radial-gradient(circle at 50% 38%, #ff7a45, #ff5a1f 70%); box-shadow: 0 0 0 14px rgba(255,90,31,.25), 0 10px 30px rgba(255,90,31,.45); }
.wk-ptt.busy { box-shadow: 0 0 0 10px rgba(229,72,77,.35), 0 18px 40px rgba(0,0,0,.45); }
.wk-ptt.free { box-shadow: 0 0 0 12px rgba(18,183,106,.45), 0 18px 40px rgba(0,0,0,.45); }
.wk-wave { display: flex; gap: 5px; align-items: center; height: 36px; }
.wk-wave i { width: 6px; height: 8px; border-radius: 3px; background: var(--pc); opacity: .4; }
.wk-wave.on i { opacity: 1; animation: wk-wave .5s ease-in-out infinite alternate; }
.wk-wave.on i:nth-child(odd) { animation-delay: -.25s; }
.wk-wave.on i:nth-child(3n) { animation-delay: -.12s; }
@keyframes wk-wave { to { height: 34px; } }
.wk-members { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.wk-members span { display: grid; justify-items: center; gap: 4px; }
.wk-members i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.08); border: 2px solid var(--line); transition: box-shadow .15s, border-color .15s; }
.wk-members small { font-size: 11px; color: var(--muted); }
.wk-members .talk i { border-color: #12b76a; box-shadow: 0 0 0 5px rgba(18,183,106,.3); }
.wk-members .me.talk i { border-color: var(--pc); box-shadow: 0 0 0 5px rgba(255,90,31,.35); }
.wk-status { font-family: var(--f-mono); font-size: 13px; min-height: 1.4em; text-align: center; }
.wk-pads { width: min(340px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wk-pad {
  aspect-ratio: 1; padding: 0; border-radius: 22px; border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent); display: grid; place-items: center; align-content: center; gap: 6px;
  transition: transform .08s, background .08s, box-shadow .08s;
}
.wk-pad i { font-style: normal; font-family: var(--f-display); font-size: 34px; color: var(--c); }
.wk-pad small { font-weight: 700; font-size: 13px; }
.wk-pad.lit { background: var(--c); transform: scale(1.04); box-shadow: 0 0 30px var(--c); }
.wk-pad.lit i { color: #fff; }