:root {
  --bg: #090c10;
  --surface: #10181e;
  --ink: #f0f5f7;
  --muted: #97a7b0;
  --accent: #68e0e8;
}
.hero { --pointer-x: 50%; --pointer-y: 35%; }
.hero h1 em, h2 em { color: #68e0e8; }
.hero h1 em { text-shadow: 0 0 65px #39c5dc18; }
.hero-atmosphere {
  background: radial-gradient(ellipse at var(--pointer-x) var(--pointer-y), #29c7df14, transparent 48%);
}
#network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .48; }
.engineering-grid {
  position: absolute;
  inset: 24% -20% -25%;
  background-image: linear-gradient(#60d5e00a 1px, transparent 1px), linear-gradient(90deg, #60d5e00a 1px, transparent 1px);
  background-size: 65px 65px;
  transform: perspective(650px) rotateX(42deg);
  mask-image: radial-gradient(ellipse at 50% 40%, black, transparent 67%);
  animation: grid-travel 22s linear infinite;
}
.orbital { border-color: #7ce2ed13; }
.star { background: #9be8ed; box-shadow: 0 0 12px #37d2df; }
.primary {
  background: linear-gradient(115deg, #94edf0, #4dc5d6);
  color: #09202a;
  border-color: #b3f4f866;
  box-shadow: 0 4px 28px #36c4d522, inset 0 1px 1px #ffffff55;
  position: relative;
  overflow: hidden;
}
.primary:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, #ffffff55 50%, transparent 75%);
  transform: translateX(-160%);
  animation: button-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.primary:hover { box-shadow: 0 8px 40px #32c7dc38; }
.product-stage { isolation: isolate; }
.product-halo { background: #2fbed3; opacity: .12; }
.product-stage>.screenshot-button {
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s;
  border-color: #6fced34d;
  box-shadow: 0 0 0 5px #8de3ed03, 0 25px 90px #0008, 0 0 50px #48bcd60a;
}
.product-stage:after {
  content: '';
  position: absolute;
  left: 5%; right: 5%; top: 37px; height: 1px;
  background: linear-gradient(90deg, transparent, #91f5ff88, transparent);
  filter: blur(.5px);
  z-index: -1;
  animation: scan-line 7s ease-in-out infinite;
}
.code-signal {
  display: flex; align-items: center; gap: 12px;
  padding: 0 6px 14px;
  color: #b2c3ce;
  font: 10px/1.5 Consolas, 'Courier New', monospace;
  min-height: 34px;
  overflow: hidden;
}
.terminal-prompt { color: #69828f; }
.terminal-chevron { color: var(--accent); }
#code-type { white-space: pre; }
.terminal-caret { height: 12px; width: 5px; background: var(--accent); animation: cursor-blink 1.1s step-end infinite; }
.signal-status { margin-left: auto; display: flex; align-items: center; gap: 7px; color: #77949b; font-size: 9px; }
.signal-status i { width: 4px; height: 4px; border-radius: 50%; background: #64dfbe; box-shadow: 0 0 9px #64dfbe55; }
.feature { position: relative; isolation: isolate; }
.feature:before {
  content: ''; position: absolute; inset: -15px; z-index: -1; pointer-events: none;
  background: radial-gradient(180px at var(--spot-x, 50%) var(--spot-y, 30%), #65d8e00d, transparent 80%);
  opacity: 0; transition: opacity .35s;
}
.feature:hover:before { opacity: 1; }
.feature-art { transition: translate .5s; }
.feature:hover .feature-art { translate: 0 -5px; }
.feature-number, .eyebrow { font-family: Consolas, 'Courier New', monospace; }
.feature-number { color: #698a97; }
.theme-choice { transition: background .25s, border-color .25s, transform .25s; }
.theme-choice:hover { transform: translateY(-3px); }
.theme-choice[aria-pressed=true] { border-color: #67d4df88; background: #67d4df0d; }
.theme-arriving { animation: theme-arrive .65s cubic-bezier(.2,.7,.3,1); }
.theme-dot { box-shadow: 0 0 12px #68e0e888; }
.keys span { background: linear-gradient(145deg, #20343e, #0c131a 65%); border-color: #648f9b66; box-shadow: 0 9px 0 #070d11, 0 10px 0 1px #315965, 0 15px 25px #0008, inset 0 2px 4px #ffffff13; color: #adced7; }
.keys .p-key { border-color: #8aeaf0; color: #c2fcff; box-shadow: 0 9px 0 #0b2630, 0 10px 0 1px #76e2eb, 0 15px 35px #38c5da38, inset 0 2px 4px #ffffff13; }
.key-glow { background: radial-gradient(ellipse, #379eaf22, transparent 65%); }
.download { background: radial-gradient(ellipse at 50% 0, #238fae20, transparent 65%); }
.download-orbits { border-color: #7be7ee40; box-shadow: 0 -3px 20px #38d4ef18, 0 -1px 3px #a0f1f955; }
.download-orbits:after { border-color: #77dce514; }
.download-inner>img { filter: drop-shadow(0 6px 20px #4cbad326); }
.nav-cta, .image-expand, .theme-choice, .release-note { border-radius: 4px; }
@keyframes grid-travel { to { background-position: 0 65px, 0 65px; } }
@keyframes button-sheen { 0%, 72% { transform: translateX(-160%); } 90%, 100% { transform: translateX(160%); } }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes scan-line { 0%, 100% { translate: 0 0; opacity: 0; } 25%, 75% { opacity: .5; } 80% { translate: 0 440px; opacity: 0; } }
@keyframes theme-arrive { from { opacity: .4; transform: scale(1.015); filter: blur(2px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@media(max-width:700px) {
  .code-signal { font-size: 8px; gap: 7px; padding-bottom: 10px; }
  .terminal-prompt { display: none; }
  .signal-status { font-size: 7px; }
  .engineering-grid { background-size: 40px 40px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none!important; transition: none!important; }
  .product-stage>.screenshot-button { transform: none!important; }
  .engineering-grid, .product-stage:after { display: none; }
}
@media(max-width:360px) {
  .keys { gap: 9px; }
  .keys span { width: 74px; height: 82px; }
}