/* 主页全宽铺满视口，内容水平居中（修复宽屏下挤在左上角约 60% 区域） */

html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0;
  overflow-x: clip;
}

body.mirror-home-sketch #root,
body.mirror-home-canvas #root {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh;
}

body.mirror-home-sketch #root > div.min-h-screen,
body.mirror-home-canvas #root > div.min-h-screen,
body.mirror-home-sketch #root > div[class*="min-h-screen"],
body.mirror-home-canvas #root > div[class*="min-h-screen"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body.mirror-home-sketch #root .relative.z-10,
body.mirror-home-canvas #root .relative.z-10 {
  width: 100% !important;
  max-width: min(80rem, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box;
}

body.mirror-home-sketch nav.fixed,
body.mirror-home-canvas nav.fixed {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

body.mirror-home-sketch nav.fixed > div.max-w-7xl,
body.mirror-home-canvas nav.fixed > div.max-w-7xl {
  width: min(80rem, calc(100% - 2rem)) !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\],
body.mirror-home-canvas #root .min-h-\[calc\(100dvh-6rem\)\] {
  width: 100% !important;
  max-width: min(80rem, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* 游离在视口右侧的官网 loading 品牌图（非手绘铅笔/尺子） */
body.mirror-home-sketch #root img[src*="logo"],
body.mirror-home-sketch #root img[src*="brand"],
body.mirror-home-sketch #root img[alt*="logo" i],
body.mirror-home-canvas #root img[src*="logo"],
body.mirror-home-canvas #root img[src*="brand"] {
  max-width: min(12rem, 28vw);
}

body.mirror-home-sketch #root > div.min-h-screen > .fixed.inset-0.pointer-events-none:empty,
body.mirror-home-canvas #root > div.min-h-screen > .fixed.inset-0.pointer-events-none:empty {
  display: none !important;
}