:root {
  color-scheme: dark;
  --ink: #070809;
  --paper: #f3f3f1;
  --muted: #a7a9a8;
  --faint: rgba(243, 243, 241, 0.2);
  --accent: #f04421;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
}

body {
  color: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

a { color: inherit; }

.live-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.scene,
.scene-route,
.screen-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene {
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.scene-route {
  z-index: -1;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.scene-route.route-mobile { display: none; }

.route-baked-mobile { display: none; }
.scene.route-baked { object-position: center !important; }
.scene.route-integrated {
  object-fit: fill;
  object-position: center;
}

.screen-shade {
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 9, 0.08), rgba(7, 8, 9, 0.18));
}

.eyebrow,
.screen-copy .en,
.micro-label,
.direction-list .en,
.step .en,
.layer-label .en,
.entry-link .en {
  font-family: Arial, sans-serif;
}

.screen-copy {
  position: absolute;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.screen-copy h1 {
  margin: 0;
  font-size: clamp(34px, 3.15vw, 54px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.08;
}

.screen-copy .en {
  margin: 18px 0 0;
  color: #d6d7d5;
  font-size: clamp(16px, 1.25vw, 21px);
  letter-spacing: 0.08em;
}

.statement {
  margin: clamp(34px, 4.5vh, 52px) 0 0;
  color: #d6d7d5;
  font-size: clamp(16px, 1.3vw, 21px);
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.statement span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font: 400 clamp(12px, 0.92vw, 15px)/1.5 Arial, sans-serif;
  letter-spacing: 0.05em;
}

.direction-list {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.direction-list li {
  position: relative;
  padding-left: 18px;
  color: #dedfdd;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.05em;
}

.direction-list li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  bottom: 0.1em;
  left: 0;
  width: 1px;
  background: var(--accent);
}

.direction-list .en {
  display: block;
  margin-top: 6px;
  color: #858887;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 02 — autonomous loop */
.loop-page .screen-shade {
  background:
    linear-gradient(90deg, rgba(7, 8, 9, 0.36) 0%, transparent 36%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.12) 62%, rgba(7, 8, 9, 0.5) 100%);
}

.loop-page .screen-copy {
  top: clamp(58px, 8vh, 88px);
  left: clamp(42px, 5.6vw, 94px);
}

.loop-steps {
  position: absolute;
  right: clamp(52px, 6vw, 100px);
  bottom: clamp(58px, 8vh, 92px);
  left: clamp(52px, 6vw, 100px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--faint);
}

.step {
  position: relative;
  min-height: 78px;
  padding: 0 22px 20px 34px;
}

.step::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 17px;
  width: 1px;
  height: 30px;
  background: var(--accent);
}

.step .number {
  color: #858887;
  font: 400 10px/1 Arial, sans-serif;
  letter-spacing: 0.12em;
}

.step strong {
  display: block;
  margin-top: 9px;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.step .en {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 03 — foundation models */
.models-page .scene { object-position: center; }
.models-page .screen-shade {
  background:
    linear-gradient(90deg, rgba(7, 8, 9, 0.62) 0%, rgba(7, 8, 9, 0.04) 36%, transparent 74%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.15) 58%, rgba(7, 8, 9, 0.7) 100%);
}

.models-page .screen-copy {
  top: clamp(52px, 7.2vh, 78px);
  left: clamp(38px, 4.7vw, 80px);
}

.model-inputs {
  position: absolute;
  top: 36%;
  left: clamp(34px, 4.2vw, 70px);
  z-index: 2;
  display: grid;
  gap: clamp(22px, 3.4vh, 36px);
}

.micro-label {
  position: relative;
  padding-left: 20px;
  color: #aeb0af;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.micro-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.models-page .direction-list {
  right: clamp(46px, 5vw, 84px);
  bottom: clamp(46px, 6.8vh, 76px);
  left: 48%;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 48px);
  border-top: 1px solid var(--faint);
  padding-top: 20px;
}

/* 04 — protein */
.protein-page .screen-shade {
  background:
    linear-gradient(90deg, rgba(7, 8, 9, 0.76) 0%, rgba(7, 8, 9, 0.16) 42%, transparent 72%),
    linear-gradient(180deg, transparent 64%, rgba(7, 8, 9, 0.44) 100%);
}

.protein-page .screen-copy {
  top: 23%;
  left: clamp(48px, 6.1vw, 104px);
  width: min(39vw, 570px);
}

.protein-page .direction-list {
  bottom: clamp(60px, 9vh, 96px);
  left: clamp(48px, 6.1vw, 104px);
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  width: min(48vw, 730px);
  gap: 26px;
}

/* 05 — robotics */
.robotics-page .screen-shade {
  background:
    linear-gradient(90deg, transparent 46%, rgba(7, 8, 9, 0.08) 62%, rgba(7, 8, 9, 0.72) 100%),
    linear-gradient(180deg, transparent 67%, rgba(7, 8, 9, 0.38) 100%);
}

.robotics-page .screen-copy {
  top: 25%;
  right: clamp(52px, 7vw, 118px);
  width: min(35vw, 510px);
}

.robotics-page .direction-list {
  right: clamp(52px, 7vw, 118px);
  bottom: clamp(74px, 11vh, 116px);
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  width: min(35vw, 510px);
  gap: 32px;
}

/* 06 — research ecosystem */
.kynm-page .screen-shade {
  background:
    linear-gradient(90deg, rgba(7, 8, 9, 0.45) 0%, transparent 35%, transparent 73%, rgba(7, 8, 9, 0.2) 100%),
    linear-gradient(180deg, transparent 67%, rgba(7, 8, 9, 0.5) 100%);
}

.kynm-page .screen-copy {
  top: 15%;
  left: clamp(48px, 6vw, 102px);
  width: min(31vw, 450px);
}

.kynm-page .statement { max-width: 420px; }

.entry-link {
  position: absolute;
  bottom: clamp(64px, 9.5vh, 102px);
  left: clamp(48px, 6vw, 102px);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-width: min(28vw, 390px);
  padding: 17px 0;
  border-top: 1px solid rgba(240, 68, 33, 0.72);
  border-bottom: 1px solid var(--faint);
  color: var(--paper);
  text-decoration: none;
  transition: padding-left 240ms ease, border-color 240ms ease;
}

.entry-link strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.entry-link .en {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.entry-link .arrow {
  color: var(--accent);
  font: 300 28px/1 Arial, sans-serif;
}

.entry-link:hover,
.entry-link:focus-visible {
  padding-left: 8px;
  border-top-color: var(--accent);
}

.entry-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

.layer-labels {
  position: absolute;
  top: 25.5%;
  right: clamp(42px, 5.4vw, 92px);
  bottom: 30.5%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.layer-label {
  min-width: 160px;
  color: #d6d7d5;
  font-size: 14px;
  letter-spacing: 0.07em;
}

.layer-label .en {
  display: block;
  margin-top: 6px;
  color: #787b7a;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .scene { animation: settle 1100ms both cubic-bezier(0.16, 1, 0.3, 1); }
  .screen-copy { animation: reveal 700ms 90ms both; }
  .direction-list,
  .loop-steps,
  .model-inputs,
  .entry-link,
  .layer-labels { animation: reveal 700ms 220ms both; }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes settle {
  from { opacity: 0.76; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  .scene { opacity: 0.78; }

  .screen-copy,
  .loop-page .screen-copy,
  .models-page .screen-copy,
  .protein-page .screen-copy,
  .robotics-page .screen-copy,
  .kynm-page .screen-copy {
    top: 8.5%;
    right: 24px;
    left: 24px;
    width: auto;
  }

  .screen-copy h1 { font-size: clamp(30px, 9vw, 40px); }
  .screen-copy .en { margin-top: 12px; font-size: 14px; }
  .statement { margin-top: 24px; font-size: 15px; }

  .loop-page .scene,
  .loop-page .scene-route { object-position: 57% center; }
  .models-page .scene,
  .models-page .scene-route { object-position: 58% center; }
  .protein-page .scene,
  .protein-page .scene-route { object-position: 66% center; }
  .robotics-page .scene,
  .robotics-page .scene-route { object-position: 56% center; }
  .kynm-page .scene,
  .kynm-page .scene-route { object-position: 56% center; }

  .kynm-page .scene-route.route-desktop { display: none; }
  .kynm-page .scene-route.route-mobile { display: block; }

  .route-baked-desktop { display: none; }
  .route-baked-mobile { display: block; }

  .loop-page .screen-shade,
  .models-page .screen-shade,
  .protein-page .screen-shade,
  .robotics-page .screen-shade,
  .kynm-page .screen-shade {
    background:
      linear-gradient(180deg, rgba(7, 8, 9, 0.72) 0%, rgba(7, 8, 9, 0.12) 38%, rgba(7, 8, 9, 0.38) 69%, rgba(7, 8, 9, 0.78) 100%),
      linear-gradient(90deg, rgba(7, 8, 9, 0.3), transparent 75%);
  }

  .loop-steps {
    right: 22px;
    bottom: max(82px, calc(68px + env(safe-area-inset-bottom)));
    left: 22px;
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid var(--faint);
    border-bottom: 0;
  }

  .step {
    min-height: 62px;
    padding: 7px 8px 10px 20px;
    border-bottom: 1px solid var(--faint);
  }

  .step::before { top: 11px; left: 9px; height: 18px; }

  .model-inputs {
    top: 38%;
    left: 22px;
    gap: 18px;
  }

  .models-page .direction-list,
  .protein-page .direction-list,
  .robotics-page .direction-list {
    right: 22px;
    bottom: max(84px, calc(70px + env(safe-area-inset-bottom)));
    left: 22px;
    width: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--faint);
  }

  .protein-page .direction-list { grid-template-columns: 1fr 1fr; }
  .robotics-page .direction-list { grid-template-columns: 1fr 1fr; }

  .direction-list li { font-size: 12px; }
  .direction-list .en { display: none; }

  .entry-link {
    right: 22px;
    bottom: max(84px, calc(70px + env(safe-area-inset-bottom)));
    left: 22px;
    min-width: 0;
  }

  .layer-labels {
    top: auto;
    right: 22px;
    bottom: max(176px, calc(162px + env(safe-area-inset-bottom)));
    left: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }

  .layer-label {
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid var(--faint);
    font-size: 12px;
  }
}