/* 30% transparency = 70% background alpha. Never fade the whole control. */
:root { --homepage-control-fill: rgba(0, 0, 0, .7); }

html body[data-next-style] .next-status-header .next-action-zone .next-download {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 100% !important;
  margin: 0 !important;
}

/* The collapsed rail has no shared backing or outer contour. */
.download-center-portal,
.download-center-portal.is-open,
.download-center-frame {
  background: transparent;
  box-shadow: none;
}
.download-center-closed-flow { display: none; }

html body[data-next-style] .next-status-header .next-action-zone .ac-action-surface {
  background: var(--homepage-control-fill) !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}
html body[data-next-style] .next-action-zone .next-download,
html body[data-next-style] .next-action-zone .ac-language-orbit {
  background: transparent !important;
  box-shadow: none !important;
}

/* Quality uses the same canvas flow as the other homepage controls. */
body[data-next-style] .website-quality {
  border-color: transparent;
  background: var(--homepage-control-fill);
  background-clip: padding-box;
  box-shadow: none;
  isolation: isolate;
  overflow: hidden;
}
body[data-next-style] .website-quality select {
  background: transparent;
  border-color: transparent;
}
body[data-next-style] .website-quality option { background: #0a1728; }

/* The iframe must also be transparent all the way down to the cards. */
html[data-homepage-download],
html[data-homepage-download] body,
html[data-homepage-download] body .viewport-fit,
html[data-homepage-download] body .download-center,
html[data-homepage-download] body .matrix,
html[data-homepage-download] body .systems,
html[data-homepage-download] body .system-list,
html[data-homepage-download] body .left-access,
html[data-homepage-download] body .left-brand-zone {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-homepage-download] body:not(.host-expanded) .matrix {
  border-color: transparent !important;
}
html[data-homepage-download] body:not(.host-expanded) .matrix > .matrix-four-flow,
html[data-homepage-download] body:not(.host-expanded) .matrix > .flow-frame {
  display: none !important;
}
html[data-homepage-download] body.hierarchy-v3 .systems :is(.system, .emulator-button, .product-entry-button, .official-site-button) {
  background: var(--homepage-control-fill) !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Keep the quality border running even when the selected profile disables canvas effects. */
@property --homepage-control-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body[data-next-style] .website-quality::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--homepage-control-angle),
    transparent 0deg 24deg, rgba(255, 92, 142, .2) 56deg,
    rgba(255, 216, 77, .58) 76deg, #fff3c2 88deg, #ff355e 92deg,
    transparent 103deg 204deg, rgba(168, 85, 247, .2) 236deg,
    rgba(97, 220, 255, .58) 256deg, #efffff 268deg, #a855f7 272deg,
    transparent 283deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: homepageControlFlow 6.4s linear infinite;
}
@keyframes homepageControlFlow { to { --homepage-control-angle: -360deg; } }
@media (prefers-reduced-motion: reduce) {
  body[data-next-style] .website-quality::before { animation: none; }
}

/* Homepage menus use Microsoft YaHei with the requested 700 weight. */
html[data-homepage-download] .systems :is(.system-copy > b, .product-entry-button b, .emulator-button b, .official-site-button b) {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal;
}

/* Reference sidebar opacity (.7) affects the light; avoid a second static outline. */
html[data-homepage-download] .systems [data-reference-flow="09081515"] { outline: none !important; }
html[data-homepage-download] body:not(.host-expanded) .systems [data-reference-flow="09081515"] > .dual-flow-canvas { opacity: .7; }

/* Apply to both the homepage and its actual embedded sidebar. */
html body[data-next-style],
html body[data-next-style] :is(button, input, select, textarea),
html body[data-next-style] .next-action-zone :is(.next-download, .website-quality, .homepage-carousel-control),
html body[data-next-style] .node-label,
html[data-homepage-download],
html[data-homepage-download] body,
html[data-homepage-download] :is(button, input, select, textarea),
html[data-homepage-download] .systems :is(b, small, .release-edition) {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
}
html body[data-next-style] .next-action-zone :is(.next-download, .ac-language-switch button, .website-quality, .website-quality select, .homepage-carousel-control, .homepage-carousel-toggle, .homepage-carousel-options button, .contact-trigger) {
  font-weight: 700 !important;
}
/* Reference 1.15 title / 1.3 status rhythm, adjusted for the 820px iframe canvas. */
html[data-homepage-download] body:not(.host-expanded) .systems :is(.system-copy > b, .product-entry-button b, .emulator-button b) {
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html[data-homepage-download] .systems .release-edition {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
html[data-homepage-download] body:not(.host-expanded) .systems :is(.system-copy small, .product-entry-button small, .emulator-button small) {
  font-size: 7.2px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 2.7px !important;
  color: #829095 !important;
}