:root {
  color-scheme: dark;
  --night: #06152b;
  --night-deep: #020918;
  --blue: #1aa7ff;
  --blue-hot: #63d5ff;
  --ice: #eaf6ff;
  --muted: #8ca7c6;
  --px: 0;
  --py: 0;
  --patch-x: 36.3%;
  --patch-y: 92.3%;
  --patch-scale: 1;
  --patch-rotation: 40deg;
  --font-title: Sora, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-functional: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--night-deep); }

body {
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--ice);
}

.precision-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(420px, 44vw) minmax(560px, 1fr);
  min-height: 100svh;
  overflow: visible;
  background:
    radial-gradient(circle at 18% 48%, rgba(13, 88, 170, .28), transparent 35%),
    radial-gradient(circle at 83% 22%, rgba(13, 91, 190, .16), transparent 32%),
    linear-gradient(135deg, #031022 0%, var(--night) 48%, #020b1c 100%);
}

.precision-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, transparent 43.9%, rgba(108, 190, 255, .18) 44%, transparent 44.1%);
  pointer-events: none;
}

.ambient { position: absolute; z-index: 0; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient--one { width: 38vw; height: 38vw; left: -14vw; top: 16vh; border: 1px solid rgba(91, 190, 255, .13); box-shadow: 0 0 140px rgba(16, 118, 231, .12); }
.ambient--two { width: 19vw; height: 19vw; left: 30vw; bottom: -10vw; border: 1px solid rgba(91, 190, 255, .1); }

.grid-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .15;
  background-image: linear-gradient(rgba(111, 191, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 191, 255, .13) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 80%);
  transform: translate(calc(var(--px) * -5px), calc(var(--py) * -5px));
}

.portrait-zone { position: absolute; z-index: 2; inset: 0; min-height: 100svh; pointer-events: none; }

.portrait-orbit {
  position: absolute;
  width: 39vw;
  aspect-ratio: 1;
  left: -3vw;
  top: 20vh;
  border: 1px solid rgba(99, 205, 255, .13);
  border-radius: 50%;
  transform: rotateX(70deg) rotateZ(-12deg);
  box-shadow: 0 0 70px rgba(26, 167, 255, .06), inset 0 0 70px rgba(26, 167, 255, .05);
}

.human-column {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100svh;
  overflow: visible;
  transform: translateY(-8vh);
}

.human-stage {
  position: relative;
  flex: 0 0 auto;
  width: min(100vw, calc(100svh * 1.57153));
  overflow: visible;
}

.human-rig {
  position: relative;
  width: 100%;
}

.human-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.human-image {
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 30px 45px rgba(0, 20, 50, .35))
    drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
}

.human-floor-shadow {
  position: absolute;
  z-index: 0;
  left: 5%;
  bottom: 1%;
  width: 45%;
  height: 10%;
  border-radius: 50%;
  background: rgba(0, 7, 20, .42);
  filter: blur(26px);
  transform: translateY(10px);
}

.human-backlight {
  position: absolute;
  z-index: -1;
  left: 13%;
  top: 22%;
  width: 34%;
  aspect-ratio: .88;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46, 151, 255, .18), rgba(14, 74, 147, .05) 55%, transparent 72%);
  filter: blur(12px);
}

.patch-anchor {
  position: absolute;
  z-index: 5;
  left: var(--patch-x);
  top: var(--patch-y);
  width: 1px;
  height: 1px;
  transform: translate3d(-50%, -50%, 18px);
  transform-style: preserve-3d;
}

.device-lock { position: absolute; z-index: 5; left: 0; top: 0; width: 8px; height: 8px; transform: translate(-50%, -50%) scale(var(--patch-scale)); }
.device-lock__core { position: absolute; inset: 0; border-radius: 50%; background: var(--blue-hot); box-shadow: 0 0 6px rgba(99, 213, 255, .9), 0 0 16px rgba(26, 167, 255, .72), 0 0 28px rgba(26, 167, 255, .32); animation: anchor-core 2.8s ease-in-out infinite; }
.device-lock__halo { position: absolute; left: 50%; top: 50%; border: 1px solid var(--blue-hot); border-radius: 50%; transform: translate(-50%, -50%); }
.device-lock__halo--inner { width: 42px; height: 42px; animation: anchor-ring 2.8s ease-out infinite; }
.device-lock__halo--outer { width: 76px; height: 76px; animation: anchor-ring 2.8s .12s ease-out infinite; }
.device-lock__label { position: absolute; right: 66px; top: -7px; white-space: nowrap; text-align: right; font: 700 clamp(12px, .85vw, 15px)/1 var(--font-functional); letter-spacing: .13em; color: var(--blue-hot); opacity: .95; text-shadow: 0 0 12px rgba(99, 213, 255, .34); animation: anchor-label 2.8s ease-in-out infinite; }
.device-lock__label::before { content: ""; position: absolute; left: calc(100% + 9px); top: 6px; width: 42px; height: 1px; background: var(--blue-hot); }

.portrait-caption { position: absolute; z-index: 7; left: 3vw; bottom: 3vh; margin: 0; font: 500 9px/1.4 var(--font-functional); letter-spacing: .2em; color: rgba(194, 224, 248, .55); }
.portrait-caption span { color: var(--blue-hot); margin-right: 12px; }
.portrait-caption b { font: inherit; }

.content-zone { position: relative; z-index: 3; grid-column: 2; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 100svh; padding: clamp(32px, 4.5vh, 52px) clamp(32px, 4vw, 72px) clamp(26px, 3vh, 40px) clamp(38px, 4vw, 72px); }

.headline-block { align-self: start; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--blue-hot); font: 600 clamp(9px, .7vw, 11px)/1 var(--font-functional); letter-spacing: .28em; opacity: 0; animation: reveal-up .8s .15s forwards; }
.eyebrow span { width: 34px; height: 1px; background: currentColor; box-shadow: 0 0 9px currentColor; }
.eyebrow b { font: inherit; }

h1 { margin: 0; max-width: 940px; font-family: var(--font-title); font-size: clamp(50px, 5.35vw, 96px); font-weight: 520; line-height: .88; letter-spacing: -.065em; }
.headline-line { display: block; overflow: hidden; padding: .05em .06em .08em 0; }
.headline-line > span { display: block; transform: translateY(120%) rotate(3deg); animation: title-in 1s cubic-bezier(.16, 1, .3, 1) forwards; }
.headline-line:nth-child(2) > span { animation-delay: .12s; }
.headline-line:nth-child(3) > span { animation-delay: .24s; }
.headline-line--accent { color: var(--blue-hot); text-shadow: 0 0 38px rgba(26, 167, 255, .24); }

.description-block { width: 100%; max-width: 760px; margin-top: clamp(16px, 2vh, 22px); padding-left: 0; opacity: 0; animation: reveal-up .9s .58s forwards; }
.lead { margin: 0 0 8px; font-size: clamp(18px, 1.5vw, 26px); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.description { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(14px, 1vw, 18px); line-height: 1.55; }

.video-panel { position: relative; flex: 0 0 auto; width: 100%; min-height: 0; margin: clamp(22px, 2.6vh, 30px) 0 0; padding: 12px; border: 1px solid rgba(116, 196, 255, .22); background: rgba(3, 14, 31, .72); box-shadow: 0 24px 80px rgba(0, 0, 0, .26), inset 0 0 45px rgba(26, 167, 255, .035); opacity: 0; transform: translateY(40px); animation: panel-in 1s .75s cubic-bezier(.16, 1, .3, 1) forwards; overflow: hidden; }
.video-panel::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(110deg, transparent 0 44%, rgba(93, 207, 255, .2) 50%, transparent 56%); transform: translateX(-100%); animation: scan 7s 2s ease-in-out infinite; pointer-events: none; }
.video-panel__chrome, .video-panel figcaption { display: flex; justify-content: space-between; align-items: center; height: 22px; color: rgba(177, 214, 242, .48); font: 500 8px/1 var(--font-functional); letter-spacing: .18em; text-transform: uppercase; }
.video-panel__frame { position: relative; width: 100%; background: #01050c; border: 1px solid rgba(103, 197, 255, .12); }
.video-panel video { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #01050c; }
.status-dot { display: flex; align-items: center; gap: 7px; }
.status-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: status 2s ease-in-out infinite; }

.cursor-light { position: fixed; z-index: 1; width: 34vw; aspect-ratio: 1; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(38, 152, 255, .09), transparent 66%); transform: translate3d(calc(var(--cursor-x, 50vw) - 50%), calc(var(--cursor-y, 50vh) - 50%), 0); pointer-events: none; }

@keyframes title-in { to { transform: translateY(0) rotate(0); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-in { to { opacity: 1; transform: translateY(0); } }
@keyframes anchor-ring { 0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(.48); } 28% { opacity: .9; } 72% { opacity: .42; } 88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
@keyframes anchor-core { 0%, 100% { transform: scale(.82); opacity: .66; } 34% { transform: scale(1.2); opacity: 1; } 72% { transform: scale(.92); opacity: .8; } }
@keyframes anchor-label { 0%, 100% { opacity: .72; } 34%, 72% { opacity: 1; } }
@keyframes scan { 0%, 64% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@keyframes status { 50% { opacity: .35; } }

@media (max-width: 1050px) {
  .precision-stage { grid-template-columns: minmax(340px, 42vw) 1fr; }
  .content-zone { padding-left: 38px; padding-right: 34px; }
}

@media (max-width: 760px) {
  .precision-stage { display: block; min-height: auto; }
  .precision-stage::before { display: none; }
  .content-zone { display: flex; flex-direction: column; min-height: 100svh; padding: 54px 22px 28px; }
  .headline-block { position: relative; z-index: 8; }
  h1 { font-size: clamp(48px, 15vw, 78px); }
  .description-block { position: relative; z-index: 8; padding: 0; max-width: 540px; }
  .portrait-zone { position: relative; inset: auto; min-height: 74svh; margin-top: 0; }
  .human-column { min-height: 74svh; transform: translateY(-5vh); }
  .human-stage { width: min(100vw, calc(74svh * 1.57153)); }
  .portrait-orbit { width: 90vw; left: -18vw; top: 23vh; }
  .portrait-caption { bottom: 2vh; }
  .video-panel { margin-top: 24px; }
  .cursor-light { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .human-floor-shadow, .human-backlight, .grid-field { transform: none !important; }
}

html[data-debug="true"] .human-stage { outline: 1px dashed rgba(99, 213, 255, .85); outline-offset: -1px; }
html[data-debug="true"] .human-rig::after { content: "HUMAN RIG · 6635 × 4222"; position: absolute; z-index: 20; left: 8px; top: 8px; padding: 5px 7px; color: #071936; background: #63d5ff; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
html[data-debug="true"] .patch-anchor::before { content: ""; position: absolute; z-index: 30; left: 50%; top: 50%; width: 72px; height: 92px; border: 2px solid #38e06f; transform: translate(-50%, -50%) rotate(var(--patch-rotation)); }
html[data-debug="true"] .patch-anchor::after { content: ""; position: absolute; z-index: 31; left: -25px; top: 0; width: 50px; height: 1px; background: #ff4f72; box-shadow: 25px -25px 0 -24.5px #ff4f72; }