.mpe-music,.mpe-music *{box-sizing:border-box}
.mpe-music{color:#554331;font-family:inherit;font-size:13px;line-height:1.4}
.mpe-music [hidden]{display:none!important}
.mpe-music .mpe-music__button{display:inline-flex;align-items:center;flex-direction:column;gap:0;max-width:100%;position:relative;border:0;border-radius:14px;padding:4px 8px;background:transparent;color:inherit;font:inherit;line-height:1.4;box-shadow:none;cursor:pointer;text-transform:none}
.mpe-music .mpe-music__button:disabled{cursor:default;opacity:.55}
.mpe-music .mpe-music__button:focus-visible,.mpe-music input:focus-visible{outline:3px solid #e7b200;outline-offset:3px}
.mpe-music .mpe-music__visual{position:relative;display:block;width:110px;height:96px;flex-shrink:0}
.mpe-music .mpe-music__svg{display:block;position:relative;width:110px;height:96px;overflow:visible;filter:drop-shadow(0 5px 5px #3f352a22)}
.mpe-music .mpe-music__shadow{fill:#3a2f231c;filter:blur(3px)}
.mpe-music .mpe-music__saucer{fill:none;stroke:#7464506b;stroke-width:2;stroke-linecap:round}
.mpe-music .mpe-music__handle{fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.mpe-music .mpe-music__body{stroke:#705e4870;stroke-width:1.4;stroke-linejoin:round}
.mpe-music .mpe-music__rim{fill:#f7f0e4;stroke:#69564180;stroke-width:1.3}
.mpe-music .mpe-music__coffee{stroke:#442b1b80;stroke-width:.8}
.mpe-music .mpe-music__shine{fill:none;stroke:#ffffffc7;stroke-width:4;stroke-linecap:round;opacity:.75}
.mpe-music .mpe-music__glow{opacity:0}
.mpe-music[data-state="playing"] .mpe-music__glow{opacity:1}
.mpe-music .mpe-music__steam{position:absolute;top:-10px;left:calc(50% - 22px);width:44px;height:45px;pointer-events:none}
.mpe-music .mpe-music__steam i{position:absolute;bottom:0;width:3px;height:36px;border-radius:999px;background:linear-gradient(transparent,#83796677,transparent);filter:blur(1px);opacity:0}
.mpe-music .mpe-music__steam i:nth-child(1){left:4px}
.mpe-music .mpe-music__steam i:nth-child(2){left:21px;height:42px}
.mpe-music .mpe-music__steam i:nth-child(3){left:38px;height:32px}
.mpe-music[data-state="playing"] .mpe-music__steam i{animation:mpe-music-steam 3.6s ease-in-out infinite}
.mpe-music[data-state="playing"] .mpe-music__steam i:nth-child(2){animation-delay:.7s}
.mpe-music[data-state="playing"] .mpe-music__steam i:nth-child(3){animation-delay:1.3s}
.mpe-music .mpe-music__sound{position:absolute;right:2px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:2px;width:20px;height:20px;border-radius:50%;background:#fff;opacity:0}
.mpe-music .mpe-music__sound i{width:2px;height:8px;background:#e7b200}
.mpe-music .mpe-music__sound i:nth-child(2){height:12px;animation-delay:.18s!important}
.mpe-music .mpe-music__sound i:nth-child(3){height:6px;animation-delay:.36s!important}
.mpe-music[data-state="playing"] .mpe-music__sound{opacity:1}
.mpe-music[data-state="playing"] .mpe-music__sound i{animation:mpe-music-sound 1s ease-in-out infinite}
.mpe-music .mpe-music__label{font-size:12px;overflow-wrap:anywhere}
.mpe-music .mpe-music__status{display:block;font-size:12px;max-width:260px}
.mpe-music--card{margin-top:auto;padding-top:12px;align-self:flex-start}
.mpe-music--story{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;max-width:1180px;margin:12px auto 28px;padding:12px 20px;border:1px solid #eee5d5;border-radius:18px;background:#fffdf7}
.mpe-music--story .mpe-music__button{flex-direction:row;gap:12px}
.mpe-music--story .mpe-music__label{font-size:14px}
.mpe-music .mpe-music__volume{display:flex;align-items:center;gap:10px;font-size:13px}
.mpe-music .mpe-music__volume input{width:110px;max-width:100%;accent-color:#b68e00;min-height:44px;margin:0}
@keyframes mpe-music-steam{0%{opacity:0;transform:translate(0,5px) scaleY(.7)}25%{opacity:.65}65%{opacity:.3;transform:translate(4px,-12px)}100%{opacity:0;transform:translate(-3px,-30px) scaleY(1.25)}}
@keyframes mpe-music-sound{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.mpe-music .mpe-music__visual{transition:transform 200ms ease}.mpe-music .mpe-music__button:hover .mpe-music__visual{transform:translateY(-2px)}}
@media(max-width:767px){.mpe-music--card{display:none}.mpe-music--story .mpe-music__visual{display:none}.mpe-music--story{padding:10px 14px;gap:4px 16px}.mpe-music--story .mpe-music__button{min-height:44px;padding:8px 12px;border:1px solid #e7b200;border-radius:999px}}
@container(max-width:680px){.mpe-music--card{display:none}}
@media(prefers-reduced-motion:reduce){.mpe-music .mpe-music__steam i,.mpe-music .mpe-music__sound i{animation:none!important}.mpe-music[data-state="playing"] .mpe-music__steam i{opacity:.3}}

/* Native range semantics, custom track: exclude generic theme input rectangles. */
.mpe-music .mpe-music__volume input[type="range"][data-mpe-volume] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 140px; max-width: 100%; height: 44px; min-height: 44px;
  padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
  cursor: pointer;
}
.mpe-music input[data-mpe-volume]::-webkit-slider-runnable-track {
  height: 6px; border: 0; border-radius: 999px;
  background: linear-gradient(to right, #e7b200 0 var(--mpe-volume-fill, 53.333%), #e9e3d5 var(--mpe-volume-fill, 53.333%) 100%);
}
.mpe-music input[data-mpe-volume]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border: 0;
  border-radius: 50%; background: #c99c00; box-shadow: none;
}
.mpe-music input[data-mpe-volume]::-moz-range-track {
  height: 6px; border: 0; border-radius: 999px; background: #e9e3d5;
}
.mpe-music input[data-mpe-volume]::-moz-range-progress {
  height: 6px; border: 0; border-radius: 999px; background: #e7b200;
}
.mpe-music input[data-mpe-volume]::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: #c99c00; box-shadow: none;
}
.mpe-music input[data-mpe-volume]:focus:not(:focus-visible) { outline: none; }
.mpe-music input[data-mpe-volume]:focus-visible { outline: 2px solid #c79900; outline-offset: 2px; }

/* No atmosphere or volume controls on phones, including standalone stories. */
@media(max-width:767px){
 .mpe-music.mpe-music--story{display:none!important}
}
