:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070a13;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.scene-wrap {
  width: 100%;
  height: 100%;
}

.scene {
  width: 100%;
  height: 100%;
  display: block;
}

.cloud-layer {
  fill: #3b4664;
  opacity: 0.42;
  filter: url(#soft-blur);
}

.cloud-back {
  animation: driftBack 34s linear infinite alternate;
}

.cloud-mid {
  fill: #4c5977;
  opacity: 0.37;
  animation: driftMid 25s linear infinite alternate;
}

.city-haze {
  opacity: 0.75;
}

.cityline {
  fill: #141d33;
}

.far-city {
  opacity: 0.86;
}

.near-city {
  fill: #10172a;
}

.desk-plane rect {
  fill: #0f1628;
}

.desk-plane path {
  fill: #16203a;
}

.detective {
  transform-origin: 598px 520px;
  animation: breathe 6.5s ease-in-out infinite;
}

.coat,
.head,
.hat-brim,
.hat-top,
.collar,
.arm {
  fill: #010204;
  stroke: #28324d;
  stroke-width: 2.1;
  stroke-linejoin: round;
}

.jawline {
  fill: none;
  stroke: #3f4d70;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.95;
}

.collar {
  fill: #090d19;
}

.hat-top {
  fill: #080c15;
}

.socket {
  fill: #e9edf6;
  stroke: #0c1324;
  stroke-width: 1.8;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.46);
  transition: transform 170ms ease;
}

.pupil {
  fill: #070b16;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.55) translateY(1px);
  transition: transform 170ms ease;
}

.eyes.focused .socket {
  transform: scaleY(1);
}

.eyes.focused .pupil {
  transform: scaleY(1) translateY(0);
}

.laptop-base,
.laptop-screen {
  fill: #090f1e;
}

.laptop-glow {
  fill: #f2c14a;
  opacity: 0.9;
  filter: drop-shadow(0 0 20px rgba(242, 193, 74, 0.85));
  transition: opacity 240ms ease, filter 240ms ease;
}

.laptop-glow.near {
  opacity: 0.28;
  filter: drop-shadow(0 0 8px rgba(242, 193, 74, 0.35));
}

.vignette {
  pointer-events: none;
}

@keyframes driftBack {
  from {
    transform: translateX(-16px);
  }
  to {
    transform: translateX(18px);
  }
}

@keyframes driftMid {
  from {
    transform: translateX(21px);
  }
  to {
    transform: translateX(-22px);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-1.5px);
  }
}