.ms-magic-bento {
  --mb-bg: #060010;
  --mb-card: #120f17;
  --mb-text: #f4f1f8;
  --mb-muted: #b7aec4;
  --mb-glow: 132, 0, 255;
  --mb-radius: 18px;
  --mb-gap: 0.75rem;
  --mb-accent: #c084fc;
  --mb-btn: #ffffff;
  --mb-btn-text: #1a1024;
  position: relative;
  width: 100%;
  background: var(--mb-bg);
  color: var(--mb-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ms-magic-bento *,
.ms-magic-bento *::before,
.ms-magic-bento *::after { box-sizing: border-box; }

.ms-magic-bento .mb-bento {
  width: min(92vw, 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mb-gap);
}

@media (min-width: 720px) {
  .ms-magic-bento .mb-bento { grid-template-columns: 1fr 1fr; width: min(94vw, 1080px); }
}

@media (min-width: 1024px) {
  .ms-magic-bento .mb-bento[data-layout="classic"] {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(168px, auto);
  }
  .ms-magic-bento .mb-bento[data-layout="classic"] .mb-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .ms-magic-bento .mb-bento[data-layout="classic"] .mb-card:nth-child(1) .mb-media {
    flex: 1 1 auto;
    height: auto;
    min-height: 180px;
  }
  .ms-magic-bento .mb-bento[data-layout="classic"] .mb-card:nth-child(2) { grid-column: span 2; }
  .ms-magic-bento .mb-bento[data-layout="equal-2"] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(220px, auto); }
  .ms-magic-bento .mb-bento[data-layout="equal-3"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); }
  .ms-magic-bento .mb-bento[data-layout="hero-top"] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, auto); }
  .ms-magic-bento .mb-bento[data-layout="hero-top"] .mb-card:nth-child(1) { grid-column: 1 / -1; min-height: min(42dvh, 320px); }
  .ms-magic-bento .mb-bento[data-layout="mosaic-a"] { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); }
  .ms-magic-bento .mb-bento[data-layout="mosaic-a"] .mb-card:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .ms-magic-bento .mb-bento[data-layout="mosaic-a"] .mb-card:nth-child(2) { grid-column: span 3; }
  .ms-magic-bento .mb-bento[data-layout="mosaic-a"] .mb-card:nth-child(3),
  .ms-magic-bento .mb-bento[data-layout="mosaic-a"] .mb-card:nth-child(4),
  .ms-magic-bento .mb-bento[data-layout="mosaic-a"] .mb-card:nth-child(5) { grid-column: span 2; }
  .ms-magic-bento .mb-bento[data-layout="mosaic-b"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); }
  .ms-magic-bento .mb-bento[data-layout="mosaic-b"] .mb-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .ms-magic-bento .mb-bento[data-layout="mosaic-b"] .mb-card:nth-child(6) { grid-column: span 2; }
}

.ms-magic-bento .mb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  height: 100%;
  border-radius: var(--mb-radius);
  background: var(--mb-card);
  overflow: hidden;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 570px;
  --glow-color: var(--mb-glow);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.ms-magic-bento .mb-card.is-background { min-height: min(56dvh, 440px); }

.ms-magic-bento .mb-media {
  display: none;
  position: relative;
  flex: 0 0 auto;
  height: min(42vw, 210px);
  min-height: 148px;
  background: #1c1724;
}

.ms-magic-bento .mb-card.is-partial .mb-media { display: block; }
.ms-magic-bento .mb-card.is-background .mb-media {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}
.ms-magic-bento .mb-card.no-image .mb-media { display: none !important; }

.ms-magic-bento .mb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  padding: 0;
  pointer-events: none;
}

.ms-magic-bento .mb-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1rem 1.05rem;
  margin-top: auto;
}

.ms-magic-bento .mb-card.is-background .mb-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 3.2rem;
  background: linear-gradient(to top, rgba(6, 0, 16, 0.92) 18%, rgba(6, 0, 16, 0.2) 78%, transparent);
}

.ms-magic-bento .mb-label {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-accent);
  font-weight: 650;
}

.ms-magic-bento .mb-title {
  margin: 0;
  font-size: clamp(1.15rem, 4.6vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--mb-text);
}

.ms-magic-bento .mb-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--mb-muted);
}

.ms-magic-bento .mb-card.has-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(var(--glow-color), calc(var(--glow-intensity) * 0.95)) 0%, rgba(var(--glow-color), calc(var(--glow-intensity) * 0.35)) 28%, transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}

.ms-magic-bento .mb-particle,
.ms-magic-bento .mb-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ms-magic-bento .mb-particle { width: 4px; height: 4px; z-index: 5; }
.ms-magic-bento .mb-ripple { z-index: 6; }

.ms-magic-bento .mb-spot {
  position: fixed;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.ms-magic-bento .mb-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 0, 16, 0.62);
}
.ms-magic-bento .mb-modal.is-open { display: flex; }
.ms-magic-bento .mb-sheet {
  width: min(680px, 100%);
  max-height: min(86dvh, 720px);
  overflow: auto;
  background: var(--mb-card);
  color: var(--mb-text);
  border-radius: 18px 18px 0 0;
  padding: 1.1rem 1.15rem 1.4rem;
}
@media (min-width: 720px) {
  .ms-magic-bento .mb-modal { align-items: center; padding: 1.5rem; }
  .ms-magic-bento .mb-sheet { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-magic-bento .mb-card { transition: none !important; }
}