export function frostedBox(content: string, extraClasses?: string): string {
  return `
    <div class="site-shell relative my-[2ch] overflow-hidden px-[2ch] py-[2ch] ${extraClasses ?? ""}">
      <div
        class="pointer-events-none absolute inset-0 h-[200%]"
        style="background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%); -webkit-mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);"
        aria-hidden="true"
      ></div>
      <div class="absolute inset-0 border-2 border-white" aria-hidden="true"></div>
      <div class="relative z-10 h-full min-h-0">
        ${content}
      </div>
    </div>`;
}