/* Japanese home v3 integration prototype. Loaded only by /ja.html. */
body[data-mm-home-layout="v3"] .mm-home {
  padding-block: clamp(30px, 5vw, 62px) 54px !important;
}
.mm-home-v2__label {
  margin: 0 0 12px;
  color: var(--mmr-muted);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .08em;
}

.mm-home-v2__feature {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid var(--mmr-border);
  border-radius: 24px;
  background: var(--mmr-surface);
  box-shadow: var(--mmr-shadow-sm);
  color: var(--mmr-text) !important;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, translate .16s ease;
}
.mm-home-v2__feature::before {
  content: "";
  position: absolute;
  inline-size: 420px;
  block-size: 420px;
  inset-inline-end: -210px;
  inset-block-start: -235px;
  border-radius: 50%;
  background: var(--mmr-accent-soft);
  opacity: .58;
  pointer-events: none;
}
.mm-home-v2__feature:hover {
  border-color: var(--mmr-accent);
  box-shadow: var(--mmr-shadow-md);
  translate: 0 -2px;
}
.mm-home-v2__feature-copy {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mm-home-v2__feature-heading {
  margin: 0 0 16px;
  font-size: clamp(3.15rem, 5.4vw, 4.8rem);
  white-space: nowrap;
  line-height: .98;
  letter-spacing: -.065em;
}
.mm-home-v2__feature-description {
  max-width: 660px;
  color: var(--mmr-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}
.mm-home-v2__cta {
  min-height: 48px;
  margin-top: 29px;
  padding: 12px 17px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border-radius: 11px;
  background: var(--mmr-accent);
  color: #fff;
  font-weight: 760;
}
html[data-mm-theme="dark"] .mm-home-v2__cta { color: #071416; }
.mm-home-v2__cta svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mm-home-v2__secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.mm-home-v2__tool {
  min-height: 160px;
  padding: 24px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  border: 1px solid var(--mmr-border);
  border-radius: 19px;
  background: var(--mmr-surface);
  box-shadow: var(--mmr-shadow-sm);
  color: var(--mmr-text) !important;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, translate .16s ease;
}
.mm-home-v2__tool:hover { border-color: var(--mmr-accent); box-shadow: var(--mmr-shadow-md); translate: 0 -2px; }
.mm-home-v2__tool-icon {
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--mmr-surface-2);
  color: var(--mmr-accent);
}
.mm-home-v2__tool-icon svg { inline-size: 34px; block-size: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-home-v2__tool strong { display: block; margin-bottom: 5px; font-size: 1.15rem; }
.mm-home-v2__tool small { display: block; color: var(--mmr-muted); font-size: .88rem; }
.mm-home-v2__arrow { color: var(--mmr-accent); font-size: 1.35rem; }
.mm-home-v2__create { margin-top: 44px; scroll-margin-top: calc(var(--mmr-header-h) + 20px); }
.mm-home-v2__studio {
  padding: 27px 29px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--mmr-border);
  border-radius: 19px;
  background: var(--mmr-surface);
  box-shadow: var(--mmr-shadow-sm);
  color: var(--mmr-text) !important;
  text-decoration: none;
}
.mm-home-v2__studio:hover { border-color: var(--mmr-accent); }
.mm-home-v2__studio h2 { margin: 0 0 5px; font-size: 1.22rem; }
.mm-home-v2__studio p { margin: 0; color: var(--mmr-muted); font-size: .9rem; }
.mm-home-v2__studio-action { color: var(--mmr-accent-ink); font-weight: 760; }

/* Sound controls are a prototype-only integration check; no audio source is bundled. */
.mm-home-v2-sound {
  min-width: 250px;
  padding: 4px 12px 10px;
  border-bottom: 1px solid var(--mmr-border);
  margin-bottom: 6px;
}
.mm-home-v2-sound__title { margin: 0 0 8px; font-size: .8rem; color: var(--mmr-muted); }
.mm-home-v2-sound__row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .84rem; }
.mm-home-v2-sound__row input[type="checkbox"] { inline-size: 18px; block-size: 18px; accent-color: var(--mmr-accent); }
.mm-home-v2-sound__row input[type="range"] { inline-size: 105px; accent-color: var(--mmr-accent); }
.mm-home-v2-sound__note { margin: 6px 0 0; color: var(--mmr-muted); font-size: .68rem; }

@media (max-width: 900px) {
  .mm-home-v2__feature { min-height: 280px; }
  .mm-home-v2__feature-copy { padding: 40px; }
}
@media (max-width: 680px) {
  body[data-mm-home-layout="v3"] .mm-home { padding-block-start: 25px !important; }
  .mm-home-v2__feature { min-height: 250px; border-radius: 20px; }
  .mm-home-v2__feature::before { inline-size: 300px; block-size: 300px; inset-inline-end: -140px; inset-block-start: -115px; }
  .mm-home-v2__feature-copy { padding: 31px 23px; }
  .mm-home-v2__feature-heading { margin-bottom: 13px; font-size: 3rem; }
  .mm-home-v2__feature-description { font-size: .89rem; line-height: 1.65; }
  .mm-home-v2__cta { margin-top: 21px; min-height: 44px; padding: 10px 14px; }
  .mm-home-v2__secondary { grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
  .mm-home-v2__tool { min-height: 120px; padding: 17px; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 13px; }
  .mm-home-v2__tool-icon { inline-size: 46px; block-size: 46px; border-radius: 12px; }
  .mm-home-v2__tool-icon svg { inline-size: 29px; block-size: 29px; }
  .mm-home-v2__tool strong { font-size: 1.02rem; }
  .mm-home-v2__tool small { font-size: .79rem; }
  .mm-home-v2__create { margin-top: 34px; }
  .mm-home-v2__studio { padding: 21px; grid-template-columns: 1fr; }
  .mm-home-v2__studio-action { justify-self: start; }
  .mm-redesign-menu__panel { min-width: min(300px, calc(100vw - 18px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-home-v2__feature, .mm-home-v2__tool { transition: none; }
}