:root {
  --bg: #0B0B0C;
  --ink: #F4F4F5;
  --grey: #8B8B94;
  --mark-l: #F4F4F5;
  --chassis-1: #2B2C31;
  --chassis-2: #141518;
  --chassis-edge: rgba(255, 255, 255, .14);
  --recess: #060607;
  --floor: rgba(0, 0, 0, .8);
  --glow: rgba(53, 82, 146, .42);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F4F4F5;
    --ink: #0B0B0C;
    --grey: #6B6B73;
    --mark-l: #0B0B0C;
    --chassis-1: #E6E7EA;
    --chassis-2: #BFC1C7;
    --chassis-edge: rgba(255, 255, 255, .9);
    --recess: #2A2B30;
    --floor: rgba(30, 40, 70, .4);
    --glow: rgba(53, 82, 146, .2);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
ul { list-style: none; }
i { display: block; font-style: normal; }
.defs { position: absolute; }

/* Lockup: sized by font-size */
.lockup {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.lockup-mark { width: .705em; height: .705em; margin-right: .07em; }

.page {
  min-height: 100dvh;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  background: radial-gradient(70% 80% at 72% 48%, var(--glow), transparent 70%);
}
.copy { animation: fade .8s both; }
.copy .lockup { font-size: clamp(48px, 5vw, 76px); }
.copy h1 {
  margin-top: clamp(28px, 6vh, 64px);
  font-size: clamp(42px, 5.2vw, 84px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  text-wrap: balance;
}
.copy p {
  margin-top: 20px;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--grey);
  max-width: 20em;
}
.scene { perspective: 1500px; }
.nas {
  --rx: 2deg;
  --ry: -6deg;
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  padding: clamp(10px, 1.5vw, 22px);
  border-radius: clamp(16px, 1.8vw, 28px);
  background: linear-gradient(165deg, var(--chassis-1), var(--chassis-2));
  box-shadow:
    inset 0 1px 0 var(--chassis-edge),
    inset 0 -2px 3px rgba(0, 0, 0, .18),
    0 44px 70px -28px var(--floor),
    0 12px 22px -12px var(--floor);
}
.nas::before, .nas::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 11%;
  height: 8px;
  border-radius: 0 0 6px 6px;
  background: #101114;
}
.nas::before { left: 9%; }
.nas::after { right: 9%; }

.nas-top {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-bottom: clamp(10px, 1.2vw, 18px);
  padding: 0 clamp(2px, .4vw, 6px);
}
.nas-mark { flex: none; width: clamp(22px, 2.3vw, 34px); height: clamp(22px, 2.3vw, 34px); }
.nas-lcd {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: .55em .9em;
  border-radius: 8px;
  background: #070B18;
  box-shadow: inset 0 1px 4px #000, 0 1px 0 var(--chassis-edge);
  color: #A9BEF2;
  font: 500 clamp(12px, 1.05vw, 16px)/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  text-shadow: 0 0 10px rgba(130, 165, 255, .55);
  white-space: nowrap;
}
.nas-lcd-state { color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.nas-lcd-state i { width: .55em; height: 1em; background: currentColor; animation: caret 1.2s steps(1) infinite; }
.nas-lights { display: flex; gap: 8px; }
.nas-lights i { width: 9px; height: 9px; border-radius: 50%; background: #7E9EF0; box-shadow: 0 0 9px 1px #6E91EE; }
.nas-lights i + i { animation: blink-a 3.1s steps(1) infinite; }

.nas-bays {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(4px, .5vw, 8px);
  padding: clamp(4px, .5vw, 8px);
  border-radius: clamp(10px, 1vw, 16px);
  background: var(--recess);
  box-shadow: inset 0 2px 6px #000;
}
.sled {
  --led: #fff;
  position: relative;
  min-height: clamp(280px, 50vh, 480px);
  padding: clamp(12px, 1.2vw, 18px);
  border-radius: clamp(6px, .7vw, 10px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: linear-gradient(var(--t1), var(--t2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  animation: sled-in .55s cubic-bezier(.2, .9, .3, 1) both;
}
.sled::before, .sled::after { /* the icons' two quiet oversized blocks */
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 14%;
  background: var(--q);
}
.sled::before { width: 240%; left: 34%; top: 36%; opacity: .35; }
.sled::after { width: 240%; left: 58%; top: 58%; opacity: .3; }
.sled-music  { --t1: #5C2323; --t2: #200204; --q: #834241; --led: oklch(.75 .17 22); animation-delay: .15s; }
.sled-video  { --t1: #3F2C5D; --t2: #110621; --q: #604B83; --led: oklch(.75 .15 300); animation-delay: .3s; }
.sled-photos { --t1: #004542; --t2: #001412; --q: #006763; --led: oklch(.8 .13 190); animation-delay: .45s; }
.sled-books  { --t1: #582900; --t2: #1E0500; --q: #7E4921; --led: oklch(.8 .15 55); animation-delay: .6s; }

.sled-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 10px 1px var(--led);
  animation: blink-a 2.7s steps(1) .9s infinite;
}
.sled-video .sled-led { animation: blink-b 3.7s steps(1) 1s infinite; }
.sled-photos .sled-led { animation: blink-c 2.3s steps(1) 1.1s infinite; }
.sled-books .sled-led { animation: blink-b 4.3s steps(1) 1.2s infinite; }
.sled-vents {
  flex: 1;
  margin: clamp(12px, 1.3vw, 20px) 0;
  border-radius: 3px;
  background: repeating-linear-gradient(rgba(0, 0, 0, .34) 0 3px, transparent 3px 9px);
  mask-image: linear-gradient(transparent, #000 25%, #000 60%, transparent);
}
.sled strong { font-size: clamp(20px, 2.15vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.sled span { margin-top: 5px; font-size: clamp(12px, .95vw, 14px); font-weight: 500; opacity: .78; }
.sled-latch { margin-top: clamp(10px, 1vw, 16px); height: 5px; width: 46%; border-radius: 3px; background: rgba(255, 255, 255, .24); }

@keyframes fade { from { opacity: 0; } }
@keyframes sled-in { from { transform: translateY(-16px) scale(1.05); opacity: 0; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes blink-a { 0%, 30%, 34%, 72% { opacity: 1; } 28%, 32%, 70% { opacity: .22; } }
@keyframes blink-b { 0%, 12%, 58%, 62%, 90% { opacity: 1; } 10%, 56%, 60%, 88% { opacity: .22; } }
@keyframes blink-c { 0%, 44%, 48%, 52% { opacity: 1; } 42%, 46%, 50% { opacity: .22; } }

@media (max-width: 860px) {
  .page { grid-template-columns: minmax(0, 1fr); align-content: start; background: radial-gradient(90% 40% at 50% 66%, var(--glow), transparent 75%); }
  .copy .lockup { font-size: clamp(52px, 14vw, 76px); }
  .copy h1 { margin-top: 24px; font-size: clamp(42px, 11.4vw, 72px); }
  .copy p { margin-top: 14px; }
  .nas { --rx: 0deg; --ry: 0deg; }
  .sled { min-height: clamp(200px, 30vh, 300px); }
}
@media (max-width: 520px) {
  .nas-bays { grid-template-columns: repeat(2, 1fr); }
  .sled { min-height: 148px; }
  .sled-vents { margin: 8px 0; }
  .sled strong { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  main *, main *::before, main *::after {
    animation: none !important;
    transition: none !important;
  }
}