@font-face {
  font-family: "Portfolio Sans";
  src: local("HarmonyOS Sans SC"), local("HarmonyOS Sans"), local("OPPOSans"),
    local("PingFang SC"), local("Microsoft YaHei");
}

:root { --ease: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; }
body {
  margin: 0;
  color: #111;
  background: #fff;
  font-family: "Portfolio Sans", system-ui, sans-serif;
  cursor: none;
}
a { color: inherit; text-decoration: none; }

.case-nav {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 18px 3vw;
  color: #111;
  background: rgba(255, 255, 255, .1);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  mix-blend-mode: normal;
  pointer-events: auto;
  font-size: 14px;
  opacity: 1;
  transition: background-color .25s ease, border-color .25s ease,
    box-shadow .25s ease, color .25s ease, backdrop-filter .25s ease;
}
.case-nav.on-dark { color: #fff; }
.case-nav:hover,
.case-nav:focus-within {
  color: #111;
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(17, 17, 17, .08);
  box-shadow: 0 8px 28px rgba(17, 17, 17, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.case-nav.on-dark:hover,
.case-nav.on-dark:focus-within { color: #111; }
.case-nav a { pointer-events: auto; }
.case-nav span { font-weight: 700; }
.case-nav a:last-child { justify-self: end; }
.magnetic { transition: transform .28s var(--ease); }

.figma-web-section {
  container-type: inline-size;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* PNG 整屏切图 section — 底色与 Figma 一致，避免渐入时接缝露色 */
#section-01,
#section-02,
#section-03 {
  background: #fff !important;
}

#section-12 {
  background: #000 !important;
}
.visual-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  max-width: none;
  pointer-events: none;
}
.web-shape { position: absolute; z-index: 1; display: block; box-sizing: border-box; pointer-events: none; transform-origin: center; }
.web-shape--path { overflow: visible; }
.layout-text {
  position: absolute;
  z-index: 2;
  margin: 0;
  white-space: pre-wrap;
  overflow: visible;
  letter-spacing: 0;
}

.section-index-cleanup {
  position: absolute;
  z-index: 3;
  display: block;
  background: #fff;
  pointer-events: none;
}
#section-04.section--code-composed,
#section-05.section--code-composed,
#section-06.section--code-composed,
#section-07.section--code-composed,
#section-08.section--code-composed {
  background: #f9f9f9 !important;
}
#section-09.section--code-composed {
  background: #000 !important;
}
#section-10.section--code-composed,
#section-11.section--code-composed {
  background: #000 !important;
}
#section-13.section--code-composed {
  background: #fff !important;
}
#section-14.section--code-composed {
  background: #fff !important;
}
#section-15.section--code-composed {
  background: #fff !important;
}
#section-16.section--code-composed {
  background: #fff !important;
}
#section-13.section--code-composed::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 17.0833333333%;
  top: 30.7637116345%;
  width: 65.8333333333%;
  height: 8.5653104925%;
  border: 1px solid #524fff;
  border-radius: 0.8333333333cqw;
  background: #ededff;
  box-sizing: border-box;
  pointer-events: none;
}
#section-04 .section-index-cleanup,
#section-05 .section-index-cleanup,
#section-06 .section-index-cleanup,
#section-07 .section-index-cleanup,
#section-08 .section-index-cleanup {
  background: #f9f9f9;
}
.section-04-part,
.section-05-part,
.section-06-part,
.section-07-part,
.section-08-part,
.section-09-part,
.section-10-part,
.section-11-part,
.section-13-part,
.section-14-part,
.section-15-part {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center;
}
#section-07 .layout-text,
#section-08 .layout-text,
#section-09 .layout-text,
#section-10 .layout-text,
#section-11 .layout-text,
#section-13 .layout-text {
  z-index: 2;
  opacity: 1 !important;
}
#section-14 .layout-text {
  z-index: 2;
  opacity: 1 !important;
}
#section-15 .layout-text {
  z-index: 2;
  opacity: 1 !important;
}
#section-15 .section-15-label-row {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3125cqw;
  height: 2.65625cqw;
  padding: 0.5208333333cqw 0.625cqw 0.5208333333cqw 0.5208333333cqw;
  background: #fff;
  border: 0.5px solid #d0d0d5;
  border-radius: 999px;
  box-sizing: border-box;
  pointer-events: none;
}
#section-15 .section-15-label-row__chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5625cqw;
  padding: 0 0.5208333333cqw;
  background: #ededff;
  border-radius: 999px;
  box-sizing: border-box;
  font-family: "DingTalk JinBuTi Web", "Microsoft YaHei", sans-serif;
  font-size: 1.0416666667cqw;
  font-weight: 400;
  line-height: 1.5625cqw;
  color: #524fff;
  white-space: nowrap;
}
#section-15 .section-15-label-row__step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5625cqw;
  padding: 0 0.5208333333cqw;
  background: #ededff;
  border-radius: 999px;
  box-sizing: border-box;
  font-family: "DingTalk JinBuTi Web", "Microsoft YaHei", sans-serif;
  font-size: 1.0416666667cqw;
  font-weight: 400;
  line-height: 1.5625cqw;
  color: #524fff;
  white-space: nowrap;
}
#section-15 .section-15-label-row__desc {
  flex: 0 0 auto;
  font-family: "OPPOSans Web", "OPPOSans", sans-serif;
  font-size: 0.9375cqw;
  font-weight: 400;
  line-height: 1.5;
  color: #4c4c4c;
  white-space: nowrap;
}
#section-15 .section-15-watermark {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: "DingTalk JinBuTi Web", "Microsoft YaHei", sans-serif;
  font-size: 5.2083333333cqw;
  font-weight: 400;
  line-height: 150%;
  text-align: center;
  color: #524fff;
  opacity: 0.3;
  pointer-events: none;
  white-space: nowrap;
}
#section-15 .section-15-center-flow {
  z-index: 3;
  white-space: pre-line;
}
#section-15 .section-15-center-flow__arrow {
  font-weight: 400;
}
#section-16 .layout-text {
  z-index: 2;
  opacity: 1 !important;
  white-space: pre-line;
}
#section-16 .section-16-card {
  position: absolute;
  z-index: 1;
  display: block;
  background: rgba(208, 208, 213, 0.3);
  box-sizing: border-box;
  pointer-events: none;
}
#section-16 .section-16-card-header {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9375cqw;
  transform: translateX(-50%);
  pointer-events: none;
}
#section-16 .section-16-check-icon {
  flex: 0 0 auto;
  display: block;
  width: 1.5625cqw;
  height: 1.5625cqw;
}
#section-16 .section-16-card-title {
  flex: 0 0 auto;
  font-family: "OPPOSans Web", "OPPOSans", sans-serif;
  font-size: 1.25cqw;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  white-space: nowrap;
}
#section-13 .section-index-header {
  z-index: 3;
}
#section-14 .section-index-header {
  z-index: 3;
}
#section-13 [data-banner="challenge-02"] {
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
}
#section-13 .section-13-banner-accent {
  font-family: "OPPOSans Web", "OPPOSans", sans-serif;
  font-weight: 400;
  font-size: 1.4583333333cqw;
}
#section-07 .section-07-role-accent {
  font-family: "DingTalk JinBuTi Web", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#section-07 .section-07-role-body {
  font-family: "HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
  font-weight: 300;
  font-style: italic;
}
/* Figma spec (1920): 54px row, number box per digit width, 28/27px gaps, 18px divider */
.section-index-header {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
  height: 2.8125cqw;
  margin: 0;
  pointer-events: none;
}
.section-index-header__number,
.section-index-header__title {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 2.8125cqw;
  display: flex;
  align-items: center;
  line-height: 1;
}
.section-index-header__number {
  box-sizing: border-box;
  flex-shrink: 0;
}
.section-index-header__divider {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 0.9375cqw;
  margin-left: 1.458333cqw;
  margin-right: 1.40625cqw;
  background: rgba(0, 0, 0, .45);
  pointer-events: none;
  display: block;
}

/* These dense infographic frames are rendered from the final Figma artwork.
   Keep the semantic text in the DOM without drawing it a second time. */
#section-05 .layout-text,
#section-06 .layout-text {
  opacity: 0;
  pointer-events: none;
}
.cursor {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}
.cursor.is-hovering { width: 38px; height: 38px; }

@media (max-width: 700px) {
  body { cursor: auto; }
  .cursor { display: none; }
  .case-nav { grid-template-columns: 1fr auto; padding: 16px 18px; }
  .case-nav span { display: none; }
  .figma-web-section {
    min-width: 920px;
    width: 920px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}