@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: #f9f9f9; }
body {
  margin: 0;
  color: #111;
  background: #f9f9f9;
  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);
  mix-blend-mode: normal;
}
.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;
}
#section-11 { background: #000 !important; }
#section-11.section--11-composed { background: #000 !important; }
.section-11-slot {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.section-11-monitors,
.section-11-comp-icons,
.section-11-hero {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
}
.section-11-competitor-rule {
  position: absolute;
  z-index: 2;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
#section-11 .layout-text {
  z-index: 2;
  background: transparent !important;
  color: #fff !important;
}
#section-11 [data-figma-id="533:2442"],
#section-11 [data-figma-id="533:2443"],
#section-11 [data-figma-id="533:2444"] {
  color: rgba(255, 255, 255, .72) !important;
}
#section-11 .web-shape { display: none; }
#section-11 .section-index-cleanup { display: none; }
#section-11 .section-index-divider {
  background: rgba(255, 255, 255, .72);
}
#section-11.section--code-composed { background: #000 !important; }
.section--code-composed { background: #f9f9f9; }

/* 整屏切图页 — 画布底色与 Figma 一致 */
#section-02 {
  background: #000 !important;
}
#section-05,
#section-06 {
  background: #f9f9f9 !important;
}
#section-08,
#section-09 {
  background: #fff !important;
}
#section-16.section--code-composed {
  background: #fff !important;
}
#section-09 .section-index-cleanup {
  background: #fff;
}
#section-20 {
  background: #f9f9f9 !important;
}
.visual-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

#section-19 > .visual-layer {
  object-fit: contain;
  object-position: top center;
}
#section-22 {
  background: #000 !important;
}

.section-05-bulb {
  left: 21.875%;
  top: 27.4074%;
  width: 4.2708%;
  height: 9.7222%;
}
.section-05-photo {
  left: 9.6875%;
  top: 45.463%;
  width: 43.3333%;
  height: 46.9354%;
  border-radius: 1.04cqw;
}
.section-05-line {
  position: absolute;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.section-05-arrow {
  position: absolute;
  z-index: 2;
  left: 35.8854%;
  top: 31.0185%;
  width: 1.6276%;
  height: 2.5%;
  object-fit: fill;
}
.section-05-card {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 1.04167cqw;
  background: #fff;
  pointer-events: none;
}
.section-05-cross {
  position: absolute;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.section-05-cross path {
  fill: none;
}
.section-05-label-mark {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 0.96354cqw;
  pointer-events: none;
}
.section-05-label-mark--orange {
  background: #ff9419;
}
.section-05-label-mark--blue {
  background: #fff;
  border: 0.10417cqw solid #1953ff;
}
#section-04 .web-shape,
#section-07 .web-shape,
#section-08 .web-shape,
#section-10 .web-shape,
#section-16 .web-shape,
#section-20 .web-shape { display: none; }
.section-16-interconnect {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center;
}
.section-07-equipment {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center;
}
.section-10-vision-diagram {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center;
}
#section-10 {
  background: #fff !important;
}
#section-10.section--10-composed {
  background: #fff !important;
}
#section-10 .layout-text {
  z-index: 3;
}
#section-10 .section-index-cleanup { display: none; }
.section--full-visual {
  background: #fff !important;
}
.section-full-cut {
  position: absolute;
  z-index: 0;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center top;
}
.section--full-visual .web-shape {
  z-index: 2;
}
.section--full-visual .layout-text {
  z-index: 3;
}
#section-14 .section-14-accent {
  color: #1953ff;
}
#section-12 {
  background: #fff !important;
}
#section-12 .section-index-cleanup { display: none; }
#section-12.section--12-composed {
  background: #fff !important;
}
.section-12-diagram-mask {
  position: absolute;
  z-index: 1;
  background: #fff;
  pointer-events: none;
}
.section-12-function-pyramid {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center;
}
#section-12 .layout-text {
  z-index: 3;
}
#section-12 .section-index-divider {
  z-index: 1;
}
#section-13 .section-index-cleanup { display: none; }
.section-13-clinical-mask {
  position: absolute;
  z-index: 1;
  background: #fff;
  pointer-events: none;
}
.section-13-clinical-scene {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
  object-position: center;
}
#section-13 .layout-text {
  z-index: 3;
}
#section-13 .section-index-divider {
  z-index: 1;
}
.phase-title-underline {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: fill;
  max-width: none;
  pointer-events: none;
}
.phase-section-photo {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 70.7361%;
  max-width: none;
  pointer-events: none;
  left: 0;
  top: 29.2639%;
  object-fit: fill;
  image-rendering: auto;
}
.section-index-cleanup {
  position: absolute;
  z-index: 1;
  left: 9.48%;
  width: .7%;
  height: 5.74%;
  background: #fff;
}
.section-index-divider {
  position: absolute;
  z-index: 2;
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, .45);
}
.section-09-inset,
.section-09-chip,
.section-24-folder {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
}
.section-09-inset {
  z-index: 3;
  border: 2px dashed rgba(25, 83, 255, .5);
}
.section-09-chip {
  z-index: 3;
  border-radius: .42cqw;
  background: #1953ff;
}
#section-09 .layout-text { z-index: 4; }
.section-09-dot-label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #000;
  color: #fff !important;
  line-height: 1 !important;
  overflow: hidden;
  overflow-wrap: normal;
  transform: translateZ(0);
}
.section-24-folder {
  z-index: 2;
  top: 40.37%;
  width: 6.25%;
  height: 11.11%;
  margin-left: -3.125%;
  content: url("assets/hypixel-24-folder.png");
  object-fit: cover;
}
#section-24 { background: #f9f9f9; }
.web-shape { position: absolute; z-index: 1; display: block; box-sizing: border-box; pointer-events: none; transform-origin: center; }
.web-shape--ellipse { backface-visibility: hidden; }
.web-shape--path { overflow: visible; }
.layout-text {
  position: absolute;
  z-index: 2;
  margin: 0;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  text-transform: none;
}
#section-01 .layout-text[data-figma-id="533:1187"] {
  white-space: nowrap !important;
  width: auto !important;
}

.layout-text .heavy,
.layout-text strong { font-weight: 900; }
.layout-text .medium { font-weight: 500; }
.layout-text .regular { font-weight: 400; }
.layout-text .light { font-weight: 300; }

.project-end {
  min-height: min(56.25vw, 1080px);
  padding: clamp(96px, 8.65vw, 166px) clamp(40px, 9.8vw, 188px) clamp(80px, 8.65vw, 166px);
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project-end__stamp {
  width: clamp(132px, 11.35vw, 218px);
  aspect-ratio: 1;
}
.project-end__stamp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.project-end__launch {
  margin: clamp(34px, 3.65vw, 70px) 0 0;
  font-size: clamp(14px, 1.0417vw, 20px);
  line-height: 1.5;
  text-align: center;
}
.project-end__launch a { text-decoration: underline; text-underline-offset: 3px; }
.project-end__nav {
  width: 100%;
  margin-top: clamp(110px, 11.04vw, 212px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 32px);
}
.project-end__card {
  min-height: clamp(154px, 11.875vw, 228px);
  padding: clamp(28px, 2.6vw, 50px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: clamp(22px, 1.875vw, 36px);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.project-end__card--previous { background: rgba(82, 79, 255, .2); }
.project-end__card--next { justify-content: flex-end; background: rgba(29, 185, 84, .2); text-align: right; }
.project-end__card:hover,
.project-end__card:focus-visible { transform: translateY(-8px); filter: saturate(1.08); }
.project-end__arrow {
  flex: 0 0 auto;
  width: clamp(68px, 5.2083vw, 100px);
  height: clamp(68px, 5.2083vw, 100px);
  border-radius: 50%;
  background: #000;
  display: block;
  overflow: hidden;
  transition: transform .35s var(--ease);
}
.project-end__arrow-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.project-end__card:hover .project-end__arrow,
.project-end__card:focus-visible .project-end__arrow { transform: translateX(-5px); }
.project-end__card--next:hover .project-end__arrow,
.project-end__card--next:focus-visible .project-end__arrow { transform: translateX(5px); }
.project-end__copy { display: grid; gap: 6px; }
.project-end__copy small { font-size: clamp(14px, 1.0417vw, 20px); opacity: .7; }
.project-end__copy strong { font-size: clamp(24px, 1.875vw, 36px); font-weight: 900; line-height: 1.5; }

/* Keep numbered subsection dividers identical to the approved section-11 line. */
[data-figma-id="533:1370"],
[data-figma-id="533:1426"],
[data-figma-id="533:2845"],
[data-figma-id="533:2914"],
[data-figma-id="533:3113"],
[data-figma-id="533:3122"],
[data-figma-id="533:3190"] {
  z-index: 4;
}
[data-figma-id="533:1370"]::before,
[data-figma-id="533:1426"]::before,
[data-figma-id="533:2845"]::before,
[data-figma-id="533:2914"]::before,
[data-figma-id="533:3113"]::before,
[data-figma-id="533:3122"]::before,
[data-figma-id="533:3190"]::before {
  content: "";
  position: absolute;
  left: 100%;
  top: -.25cqw;
  width: 2.9cqw;
  height: 3.25cqw;
  background: #fff;
  z-index: -1;
}
[data-figma-id="533:1370"]::after,
[data-figma-id="533:1426"]::after,
[data-figma-id="533:2845"]::after,
[data-figma-id="533:2914"]::after,
[data-figma-id="533:3113"]::after,
[data-figma-id="533:3122"]::after,
[data-figma-id="533:3190"]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: #8b8b8b;
}

[data-figma-id="533:1370"]::after,
[data-figma-id="533:2845"]::after,
[data-figma-id="533:3113"]::after {
  left: calc(100% + 1.4583cqw);
}

[data-figma-id="533:1426"]::after {
  left: calc(100% + 1.25cqw);
}

[data-figma-id="533:2914"]::after,
[data-figma-id="533:3122"]::after,
[data-figma-id="533:3190"]::after {
  left: calc(100% + 1.4583cqw);
}

/* Remove the obsolete stray divider above the section-12 heading. */
#section-12::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 9.35%;
  top: 18.5%;
  width: 2.2%;
  height: 5.5%;
  background: #fff;
  pointer-events: none;
}
[data-figma-id="533:1466"] {
  width: 27.6042% !important;
  white-space: nowrap;
  overflow-wrap: normal;
}
.role-pill {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.role-pill--orange { background: #ff9419; }
.role-pill--blue {
  background: #fff;
  border: .10417cqw solid #1953ff;
}
.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%);
  }
  .project-end { min-height: auto; padding: 88px 24px 72px; }
  .project-end__launch { max-width: 100%; overflow-wrap: anywhere; }
  .project-end__nav { margin-top: 88px; grid-template-columns: 1fr; }
  .project-end__card { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}