/* AtelierAI BGM */
.bgm-control{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:5px 10px 5px 6px;color:rgba(255,255,255,.9);background:rgba(7,7,16,.34);border:1px solid rgba(255,255,255,.1);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;font:inherit;transition:transform 180ms ease,border-color 180ms ease,background 180ms ease}
.bgm-control:hover{transform:translateY(-1px);border-color:rgba(103,232,249,.26);background:rgba(12,14,28,.48)}
.bgm-control:focus-visible{outline:2px solid rgba(103,232,249,.7);outline-offset:3px}
.bgm-record{position:relative;display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at center,#c4b5fd 0 11%,#080812 12% 23%,rgba(103,232,249,.82) 24% 27%,#111321 28% 46%,rgba(255,255,255,.12) 47% 49%,#090a12 50% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 14px rgba(103,232,249,.1);animation:bgm-record-spin 4s linear infinite;animation-play-state:paused}
.bgm-control.is-playing .bgm-record{animation-play-state:running}
.bgm-record::after{content:"♬";position:absolute;right:-4px;top:-5px;color:#9aeef8;font-size:13px;line-height:1;opacity:0;transform:translateY(3px) rotate(-8deg);transition:opacity 180ms ease,transform 180ms ease}
.bgm-control.is-playing .bgm-record::after{opacity:1;transform:translateY(0) rotate(-8deg)}
.bgm-text{display:grid;gap:1px;min-width:45px;text-align:left}
.bgm-label{color:rgba(255,255,255,.43);font-size:8px;font-weight:700;letter-spacing:.16em}
.bgm-state{color:rgba(255,255,255,.9);font-size:10px;font-weight:700}
@keyframes bgm-record-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bgm-record{animation:none!important}.bgm-control{transition:none}}
@media (max-width:640px){.bgm-control{min-height:38px;padding:4px}.bgm-record{width:29px;height:29px}.bgm-text{display:none}}