.bgm[data-kf-bgm]{position:fixed;z-index:40;left:max(12px,env(safe-area-inset-left,0px));bottom:max(1.25rem,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-family:Anuphan,sans-serif;pointer-events:none}.bgm[data-kf-bgm]>[data-kf-bgm]{pointer-events:auto}@media(min-width:641px){.bgm[data-kf-bgm]{left:24px}}html[data-mode=page] .bgm[data-kf-bgm]{bottom:64px}html.r-chrome-hidden .bgm[data-kf-bgm]:not(.is-open){opacity:0;transform:translateY(8px)}html.r-chrome-hidden .bgm[data-kf-bgm]:not(.is-open)>[data-kf-bgm]{pointer-events:none}.bgm[data-kf-bgm]{transition:opacity .25s var(--ease-out-soft, ease),transform .25s var(--ease-out-soft, ease)}.bgm-toggle[data-kf-bgm]{position:relative;width:46px;height:46px;border-radius:9999px;display:grid;place-items:center;background:var(--r-sheet, #fff);box-shadow:0 10px 28px -12px #00000059,0 0 0 1px var(--r-line, #e5e5e5);transition:transform .2s}.bgm-toggle[data-kf-bgm]:hover{transform:translateY(-2px)}.bgm-toggle[data-kf-bgm]:focus-visible,.bgm-track[data-kf-bgm]:focus-visible,.bgm-x[data-kf-bgm]:focus-visible,.bgm-stop[data-kf-bgm]:focus-visible{outline:2px solid var(--r-accent, #e8590c);outline-offset:2px}.bgm-disc[data-kf-bgm]{position:relative;width:36px;height:36px;border-radius:9999px;display:grid;place-items:center;background:repeating-radial-gradient(circle at center,#1b1b1f 0 1.4px,#2b2b31 1.4px 2.6px),#1b1b1f;box-shadow:inset 0 0 0 1px #ffffff0f}.bgm-label[data-kf-bgm]{width:13px;height:13px;border-radius:9999px;background:var(--r-accent, #e8590c);box-shadow:0 0 0 2px #1b1b1f;position:relative}.bgm-label[data-kf-bgm]:after{content:"";position:absolute;inset:5px;border-radius:9999px;background:#1b1b1f}.bgm-disc[data-kf-bgm]:before{content:"";position:absolute;inset:0;border-radius:9999px;pointer-events:none;background:conic-gradient(from 30deg,transparent 0 18%,rgb(255 255 255 / .16) 22%,transparent 28% 68%,rgb(255 255 255 / .1) 72%,transparent 78%)}.bgm[data-kf-bgm][data-state=playing] .bgm-disc[data-kf-bgm]{animation:bgm-spin 3.2s linear infinite}.bgm-note[data-kf-bgm]{position:absolute;right:-3px;top:-3px;width:18px;height:18px;padding:3px;border-radius:9999px;background:var(--r-accent, #e8590c);color:#fff;box-shadow:0 0 0 2px var(--r-sheet, #fff)}@keyframes bgm-spin{to{transform:rotate(360deg)}}.bgm-panel[data-kf-bgm]{width:min(300px,calc(100vw - 92px));max-height:min(calc(100dvh - 190px),620px);overflow:auto;overscroll-behavior:contain;border-radius:18px;background:var(--r-sheet, #fff);color:var(--r-fg, #111);box-shadow:0 22px 50px -18px #0006,0 0 0 1px var(--r-line, #e5e5e5);transform-origin:bottom left;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);pointer-events:none}.bgm[data-kf-bgm].is-open .bgm-panel[data-kf-bgm]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}.bgm-head[data-kf-bgm]{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px 14px}.bgm-h[data-kf-bgm]{font-size:13px;font-weight:700}.bgm-x[data-kf-bgm]{width:32px;height:32px;border-radius:9999px;display:grid;place-items:center}.bgm-x[data-kf-bgm]:hover,.bgm-track[data-kf-bgm]:hover{background:var(--r-hover, rgb(0 0 0 / .05))}.bgm-player[data-kf-bgm]{margin:4px 10px 6px;border-radius:12px;overflow:hidden;aspect-ratio:16 / 9;background:#000}.bgm-player[data-kf-bgm][hidden]{display:none}.bgm-player[data-kf-bgm] iframe{display:block;width:100%;height:100%;border:0}.bgm-list[data-kf-bgm]{padding:2px 6px 4px}.bgm-track[data-kf-bgm]{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;text-align:left;padding:8px;border-radius:12px;font-size:13.5px}.bgm-track[data-kf-bgm][aria-pressed=true]{background:var(--r-hover, rgb(0 0 0 / .05));box-shadow:inset 3px 0 0 var(--r-accent, #e8590c)}.bgm-no[data-kf-bgm]{width:30px;height:30px;border-radius:9999px;display:grid;place-items:center;font-weight:700;font-size:12.5px;box-shadow:inset 0 0 0 1px var(--r-line, #e5e5e5);color:var(--r-accent, #e8590c)}.bgm-no[data-kf-bgm]>[data-kf-bgm]{grid-area:1 / 1}.bgm-play[data-kf-bgm],.bgm-eq[data-kf-bgm]{display:none}@media(hover:hover){.bgm-track[data-kf-bgm]:hover .bgm-n[data-kf-bgm]{display:none}.bgm-track[data-kf-bgm]:hover .bgm-play[data-kf-bgm]{display:block}}.bgm-track[data-kf-bgm][aria-pressed=true] .bgm-n[data-kf-bgm],.bgm-track[data-kf-bgm][aria-pressed=true] .bgm-play[data-kf-bgm]{display:none!important}.bgm-track[data-kf-bgm][aria-pressed=true] .bgm-eq[data-kf-bgm]{display:flex}.bgm-eq[data-kf-bgm]{gap:2px;align-items:flex-end;height:12px}.bgm-eq[data-kf-bgm] i[data-kf-bgm]{width:3px;background:currentColor;border-radius:1px;animation:bgm-eq 1s ease-in-out infinite}.bgm[data-kf-bgm][data-state=paused] .bgm-eq[data-kf-bgm] i[data-kf-bgm]{animation-play-state:paused}.bgm-eq[data-kf-bgm] i[data-kf-bgm]:nth-child(2){animation-delay:-.35s}.bgm-eq[data-kf-bgm] i[data-kf-bgm]:nth-child(3){animation-delay:-.7s}@keyframes bgm-eq{0%,to{height:3px}50%{height:12px}}.bgm-meta[data-kf-bgm]{display:flex;flex-direction:column;min-width:0}.bgm-title[data-kf-bgm]{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bgm-artist[data-kf-bgm]{font-size:11.5px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bgm-ctrl[data-kf-bgm]{display:grid;gap:6px;margin:2px 10px 4px;padding:6px 4px 8px;border-bottom:1px solid var(--r-line, #e5e5e5)}.bgm-row[data-kf-bgm]{display:flex;align-items:center;justify-content:space-between;gap:8px}.bgm-lab[data-kf-bgm]{font-size:12px;font-weight:600;opacity:.65;white-space:nowrap}.bgm-loops[data-kf-bgm]{display:flex;gap:4px}.bgm-cb[data-kf-bgm]{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;white-space:nowrap;border-radius:9999px;font-size:12px;font-weight:600;box-shadow:inset 0 0 0 1px var(--r-line, #e5e5e5);color:var(--r-fg, #111);opacity:.75;transition:background-color .15s,color .15s,opacity .15s}.bgm-cb[data-kf-bgm]:hover{opacity:1;background:var(--r-hover, rgb(0 0 0 / .05))}.bgm-cb[data-kf-bgm][aria-pressed=true]{opacity:1;background:var(--r-accent, #e8590c);color:#fff;box-shadow:none}.bgm-vol[data-kf-bgm]{display:inline-flex;align-items:center;gap:2px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--r-line, #e5e5e5);padding:2px}.bgm-vb[data-kf-bgm]{width:36px;height:36px;border-radius:9999px;display:grid;place-items:center;color:var(--r-fg, #111)}.bgm-vb[data-kf-bgm]:hover{background:var(--r-hover, rgb(0 0 0 / .05))}.bgm-vb[data-kf-bgm]:disabled{opacity:.3}.bgm-pct[data-kf-bgm]{min-width:3.1em;text-align:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}.bgm-cb[data-kf-bgm]:focus-visible,.bgm-vb[data-kf-bgm]:focus-visible{outline:2px solid var(--r-accent, #e8590c);outline-offset:2px}.bgm-foot[data-kf-bgm]{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px 12px;font-size:11.5px;opacity:.75}.bgm-stop[data-kf-bgm]{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--r-fg, #111)}.bgm-stop[data-kf-bgm][hidden]{display:none}@media(prefers-reduced-motion:reduce){.bgm[data-kf-bgm][data-state=playing] .bgm-disc[data-kf-bgm],.bgm-eq[data-kf-bgm] i[data-kf-bgm]{animation:none}.bgm-eq[data-kf-bgm] i[data-kf-bgm]{height:9px}}