:root {
  --blue: #1966ff;
  --ink: #000000;
  --ink-strong: #30354b;
  --ink-muted: #777a88;
  --ink-soft: rgba(48, 53, 75, 0.82);
  --blue-soft: rgba(25, 102, 255, 0.9);
  --fs-24: calc(24px * var(--type-comp));
  --fs-18: calc(18px * var(--type-comp));
  --fs-16: calc(16px * var(--type-comp));
  --fs-14: calc(14px * var(--type-comp));
  --viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "PingFang SC", "Alibaba PuHuiTi", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #ffffff;
}

.case-topbar {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 120;
  pointer-events: none;
}

.case-back-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.82);
  color: #111;
  font-family: "Inter", "Noto Sans SC", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.case-back-home:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.92);
}

.case-back-home svg {
  width: 16px;
  height: 16px;
}

.hvac-main {
  width: 100%;
  overflow-x: hidden;
}

.canvas-wrap {
  --canvas-width: 1920;
  --focus-width: var(--canvas-width);
  --canvas-shift: 0;
  --responsive-canvas-height: var(--canvas-height);
  --viewport-gutter: 0px;
  --viewport-width: calc(100vw - (var(--viewport-gutter) * 2));
  --scale-w: calc(var(--viewport-width) / (var(--focus-width) * 1px));
  --scale: min(1, var(--scale-w));
  --type-comp-max: 1.5;
  --type-comp: min(calc(1 / max(var(--scale), 0.01)), var(--type-comp-max));
  content-visibility: auto;
  contain-intrinsic-size: 1400px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: calc(var(--responsive-canvas-height) * 1px * var(--scale) + 2px);
  overflow: hidden;
  background: #ffffff;
}

.canvas {
  position: relative;
  width: 1920px;
  height: calc(var(--responsive-canvas-height) * 1px);
  flex: 0 0 auto;
  transform-origin: top left;
  transform: translateX(calc(var(--canvas-shift) * var(--scale) * 1px)) scale(var(--scale));
}

.hvac-canvas {
  background: linear-gradient(180deg, #f0f3f6 0%, #ffffff 32%);
  box-shadow: 0 -15px 50px rgba(0, 2, 57, 0.05);
}

.abs {
  position: absolute;
  white-space: nowrap;
}

.allow-wrap {
  white-space: normal;
}

.sec-no {
  margin: 0;
  color: rgba(188, 189, 192, 0.8);
  font-family: "DIN Alternate", "Inter", sans-serif;
  font-size: calc(32px * var(--type-comp));
  line-height: 1;
  font-weight: 700;
  opacity: 0.3;
}

.sec-en {
  margin: 0;
  color: rgba(188, 189, 192, 0.6);
  font-size: calc(24px * var(--type-comp));
  line-height: 1.4;
  font-weight: 600;
  opacity: 0.3;
}

.sec-title {
  margin: 0;
  font-size: var(--fs-24);
  line-height: 1.58;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.01em;
}

.sec-title span {
  color: var(--blue);
}

.time-label {
  margin: 0;
  font-size: var(--fs-18);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-strong);
}

.bullet-list {
  display: grid;
  gap: 12px;
}

.bullet-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
}

.bullet-icon {
  width: 8px;
  height: 28px;
  display: block;
}

.bullet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  display: block;
}

.bullet-row p {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.72;
  color: var(--ink-strong);
  white-space: normal;
}

.tag-row {
  display: flex;
  gap: 16px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: calc(12px * var(--type-comp));
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.title-24 {
  margin: 0;
  font-size: var(--fs-24);
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.01em;
}

.title-24 span {
  color: var(--blue);
}

.blue-title {
  margin: 0;
  color: var(--blue);
  font-size: var(--fs-24);
  line-height: 1.58;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.note-14 {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--blue-soft);
  font-weight: 500;
}

.body-16 {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.72;
  color: var(--ink-muted);
  letter-spacing: 0.005em;
}

.body-16.is-dark {
  color: var(--ink-strong);
}

.body-16.is-black {
  color: #000000;
}

.phase-wrap {
  background: rgba(26, 122, 248, 0.03);
}

.phase-chip {
  display: inline-flex;
  align-items: center;
  padding: 24px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: #d6e6ff;
}

.phase-chip span {
  color: var(--blue);
  font-size: calc(20px * var(--type-comp));
  line-height: 1.45;
  font-weight: 500;
}

.phase-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: calc(16px * var(--type-comp));
  line-height: 1.5;
  font-weight: 700;
}

.result-shadow {
  box-shadow: 8px 8px 50px rgba(0, 0, 0, 0.4);
}

.radius-24 {
  border-radius: 24px;
}

.radius-20 {
  border-radius: 20px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flow-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.body-16,
.title-24,
.blue-title,
.note-14 {
  white-space: normal;
}

.metric-caption {
  margin: 0 0 10px;
  text-align: center;
  color: var(--blue-soft);
}

.metric-caption + .image {
  margin-top: 10px;
}

.phase-intro {
  margin: 0 0 24px;
}

.phase-copy {
  margin: 0;
}

@media (max-width: 1680px) {
  .hvac-main .canvas-wrap {
    --focus-width: 1760;
    --canvas-shift: -80;
    --type-comp-max: 1.15;
  }
}

@media (max-width: 1440px) {
  .hvac-main .canvas-wrap {
    --focus-width: 1600;
    --canvas-shift: -120;
    --type-comp-max: 1.28;
  }
}

@media (max-width: 1280px) {
  .hvac-main .canvas-wrap {
    --focus-width: 1520;
    --canvas-shift: -160;
    --type-comp-max: 1.45;
  }

  .case-topbar {
    top: 14px;
    left: 14px;
  }

  .case-back-home {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .hvac-main .canvas-wrap {
    --focus-width: 1360;
    --canvas-shift: -280;
    --type-comp-max: 1.62;
  }
}

@media (max-width: 768px) {
  .hvac-main .canvas-wrap {
    --type-comp-max: 1.82;
  }
}

@media (max-width: 720px) {
  .hvac-main .canvas-wrap {
    --type-comp-max: 1.9;
    --viewport-gutter: 6px;
  }
}