:root {
  color-scheme: dark;
  --navy: #002868;
  --red: #bf0a30;
  --steel: #dce1e5;
  --charcoal: #1c232b;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--steel);
  background: var(--charcoal);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  isolation: isolate;
}
.factory { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #1c232b url('../motion/poster.jpg') center/cover no-repeat; }
.factory-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: blur(5px) saturate(.7); opacity: 0; transition: opacity 1s ease; }
.factory-video.is-active { opacity: 1; }
.factory-tint { position: absolute; inset: 0; background: rgba(28,35,43,.72); transition: background .6s; }
.factory-tint.flash-guard { background: rgba(28,35,43,.86); }
.factory-tint::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(transparent, rgba(28,35,43,.45)); }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, rgba(35,42,52,.23), rgba(28,35,43,.48) 78%); }
.ambient::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(220,225,229,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(220,225,229,.024) 1px, transparent 1px); background-size: 48px 48px; }
main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-width: 0; padding: clamp(12px, 2.5svh, 28px) 16px 12px; }
main:focus { outline: none; }
.landing { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.5svh, 18px); }
.hero { position: relative; width: 100%; max-width: 960px; transform: translateY(-12px); }
.assembly { display: block; width: 100%; height: auto; aspect-ratio: 2400/1020; overflow: hidden; }
.assembly-pieces, .assembly-arms, .weld-points { visibility: hidden; }
.piece { transform-origin: 0 0; }
.complete-identity { visibility: visible; }
.is-assembling .assembly-pieces, .is-assembling .assembly-arms, .is-assembling .weld-points { visibility: visible; }
.is-assembling .complete-identity { visibility: hidden; }
.arm-under { fill: none; stroke: #14202c; stroke-width: 38; stroke-linecap: round; }
.arm-link { fill: none; stroke: url('#arm-steel'); stroke-width: 27; stroke-linecap: round; }
.arm-shoulder, .arm-elbow, .arm-wrist { fill: url('#joint-steel'); stroke: #abb9c5; stroke-width: 3; }
.gripper { fill: none; stroke: #a5b7c5; stroke-width: 8; stroke-linecap: square; stroke-linejoin: round; }
.weld { opacity: 0; fill: #fff6cc; stroke: #f4d38a; stroke-width: 3; }
.asset-fallback { text-align: center; font-size: clamp(2rem, 9vw, 5rem); font-weight: 700; padding: 1em 0; }
.glass {
  position: relative; overflow: hidden; width: 100%; max-width: 640px;
  border: 1px solid rgba(220,225,229,.18); border-radius: 16px;
  background: rgba(28,35,43,.10);
  backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08);
  padding: clamp(1.2rem, 2.8vw, 2.2rem) clamp(1.4rem, 5vw, 3rem);
  text-align: center;
  box-shadow: 0 14px 42px rgba(0,0,0,.18), 0 3px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.27), inset 1px 0 1px rgba(255,255,255,.10), inset -1px 0 1px rgba(255,255,255,.06), inset 0 -3px 3px rgba(0,0,0,.15);
}
@supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(28,35,43,.92); } }
.glass::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(220,225,229,.065); border-bottom-color: rgba(220,225,229,.04); border-radius: 12px; box-shadow: inset 0 1px 1px rgba(255,255,255,.06); pointer-events: none; }
.glass::after { content: ""; position: absolute; inset: 0 0 auto; height: 55%; background: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.01) 40%, transparent); pointer-events: none; }
.glass-edge { position: absolute; bottom: 3px; left: 14px; right: 14px; height: 3px; border-radius: 6px; background: linear-gradient(90deg, transparent, rgba(220,225,229,.12) 30%, rgba(220,225,229,.07) 70%, transparent); box-shadow: 0 -1px 2px rgba(0,0,0,.20); pointer-events: none; }
.glass h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(1.4rem, 3.5vw, 2.1rem); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: .6rem; text-shadow: 0 1px 4px rgba(0,0,0,.6), 0 3px 20px rgba(0,40,104,.3); }
.accent-line { width: 48px; height: 2px; margin: 0 auto .7rem; border-radius: 1px; background: linear-gradient(90deg, var(--navy), var(--red)); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.glass p { position: relative; z-index: 1; font-size: clamp(.86rem, 1.4vw, .96rem); line-height: 1.78; max-width: 56ch; margin: auto; color: rgba(220,225,229,.92); text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.motion-controls { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 34px; }
.is-ready .motion-controls { display: flex; }
.motion-controls button { font: inherit; font-size: .76rem; line-height: 1.5; color: var(--steel); border: 1px solid rgba(220,225,229,.24); border-radius: 7px; background: rgba(20,28,36,.65); padding: 6px 12px; cursor: pointer; }
.motion-controls button:hover { background: rgba(28,35,43,.95); border-color: rgba(220,225,229,.5); }
button:focus-visible, footer a:focus-visible, .location a:focus-visible { outline: 2px solid #dce1e5; outline-offset: 4px; }
button:disabled { cursor: default; }
footer { flex-shrink: 0; text-align: center; padding: 10px 16px 12px; color: rgba(220,225,229,.76); font-size: .76rem; text-shadow: 0 0 8px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.6); }
.location { position: relative; z-index: 1; max-width: 42ch; margin: 1.1rem auto 0; padding-top: .9rem; border-top: 1px solid rgba(220,225,229,.18); text-align: center; font-size: .82rem; font-style: normal; line-height: 1.6; color: var(--steel); }
.location a { color: inherit; text-decoration: underline; text-decoration-color: rgba(220,225,229,.4); text-underline-offset: 3px; border-radius: 3px; }
.location a:hover { color: #fff; text-decoration-color: currentColor; }
.location span { display: inline-block; max-width: 100%; }
footer a { color: rgba(220,225,229,.85); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(220,225,229,.4); }
footer a:hover, footer a:focus-visible { color: #fff; }
.footer-credit { white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 8px 16px; color: white; background: var(--navy); border-radius: 6px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (max-width: 600px) { main { padding: 12px 12px 8px; } .glass { border-radius: 13px; } .glass::before { border-radius: 8px; } .landing { gap: 12px; } }
@media (max-height: 900px) and (min-width: 700px) { .hero { max-width: clamp(300px, calc(235svh - 862px), 740px); } .glass { padding-top: 1.1rem; padding-bottom: 1.1rem; } .landing { gap: 10px; } main { padding-top: 10px; } }
@media (max-width: 600px) and (orientation: portrait) { .hero { transform: translateY(clamp(-60px, calc(220px - 44svh), -24px)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .factory-video { display: none; transition: none; }
  .factory-tint { transition: none; }
  .assembly-pieces, .assembly-arms, .weld-points { visibility: hidden !important; }
  .complete-identity { visibility: visible !important; }
  .motion-controls { display: none !important; }
}