@font-face {
  font-family: "Chakra Petch";
  src: url("assets/ChakraPetch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("assets/HostGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("assets/HostGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #ff073a;
  --cream: #f2eae3;
  --gray: #d0c9c3;
  --black: #000;
  --panel: #131211;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  margin: 0;
  color: var(--cream);
  background: var(--black);
  font-family: "Host Grotesk", Arial, sans-serif;
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  /* Continuous grain above both the page and the black WebGL canvas. */
  z-index: 4;
  opacity: .012;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
}

.site-header, footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header { border-bottom: 1px solid rgba(242,234,227,.16); }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.brand img { width: 1.85rem; height: 1.85rem; object-fit: contain; }
.brand span { font-family: "Chakra Petch", sans-serif; font-size: .95rem; letter-spacing: .06em; }
.status { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--gray); }
.status span { width: .45rem; height: .45rem; background: var(--red); transform: rotate(45deg); box-shadow: 0 0 18px rgba(255,7,58,.9); animation: pulse 2.2s ease-in-out infinite; }

.hero {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 9.5rem);
  display: grid;
  grid-template-columns: minmax(16rem, .8fr) minmax(32rem, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 8rem);
  padding: clamp(3rem, 7vw, 7rem) clamp(2rem, 7vw, 8rem);
}

.orbital-mark { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 34rem; justify-self: center; }
.orbital-mark::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--red); filter: blur(90px); opacity: .1; }
.orbital-mark img { position: relative; z-index: 2; width: 48%; height: auto; filter: drop-shadow(0 0 50px rgba(255,7,58,.18)); animation: float 6s ease-in-out infinite; }
.crystal-area { position:relative; width:100%; max-width:38rem; justify-self:center; }
.crystal-area .orbital-mark { width:100%; max-width:none; }
.crystal-area .orbital-mark::before { display:none; }
#hero-crystal canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
#hero-crystal canvas:active { cursor:grabbing; }
#hero-crystal canvas:focus-visible { outline:1px solid #f2eae355; outline-offset:4px; }
#hero-crystal.is-ready .fallback-mark { visibility:hidden; }
.crystal-tools { margin:.7rem auto 0; max-width:26rem; color:var(--gray); font:10px "IBM Plex Mono",monospace; }
.crystal-tools[hidden] { display:none; }
.crystal-hint { text-align:center; color:#928b85; font-size:10px; margin:0 0 1rem; }
.crystal-actions { display:flex; justify-content:center; gap:.5rem; }
.crystal-tools button { padding:.65rem .85rem; border:1px solid #f2eae32a; border-radius:3px; color:var(--gray); background:#080808; font:inherit; text-transform:uppercase; cursor:pointer; }
.crystal-tools button:focus-visible,.crystal-tools input:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.color-control { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0 0; }
.color-control input { width:120px; accent-color:var(--cream); }
.color-control output { display:inline-block; min-width:3ch; }
.crystal-lab { border:1px solid #f2eae325; border-radius:6px; background:#0a0a0a; }
.crystal-lab summary { padding:1rem; cursor:pointer; color:var(--cream); font-size:11px; }
.crystal-lab summary span { float:right; font-size:9px; color:#928b85; }
.crystal-lab-body { padding:0 1rem 1rem; }
.material-status { font-size:13px; color:var(--cream); margin:.25rem 0 1rem; min-height:1.5em; }
.material-choices,.view-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; }
.crystal-tools .material-choices button,.crystal-tools .view-choices button { padding:.7rem .3rem; text-transform:none; }
.crystal-tools button[aria-pressed="true"] { background:var(--cream); color:#0a0a0a; }
.lab-control { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; align-items:center; margin:1rem 0 .5rem; }
.lab-control input { width:100%; min-width:0; accent-color:var(--cream); cursor:pointer; }
.lab-control select { width:100%; min-width:0; padding:.6rem .3rem; color:var(--cream); background:#0a0a0a; border:1px solid #f2eae32a; border-radius:3px; font:inherit; }
.lab-control output { white-space:nowrap; }
.lab-note { color:#928b85; font-size:9px; line-height:1.6; margin:.5rem 0 1rem; }
.crystal-lab .crystal-actions { justify-content:space-between; margin-top:1rem; padding-top:1rem; border-top:1px solid #f2eae325; }
.crystal-tools input:disabled { opacity:.35; cursor:not-allowed; }
.crystal-tools select:focus-visible,.crystal-lab summary:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.orbit { position: absolute; inset: 7%; border: 1px solid rgba(255,7,58,.34); border-radius: 50%; animation: spin 18s linear infinite; }
.orbit::after { content: ""; position: absolute; top: 8%; left: 20%; width: .55rem; height: .55rem; background: var(--red); transform: rotate(45deg); box-shadow: 0 0 24px rgba(255,7,58,.8); }
.orbit-two { inset: 19%; border-color: rgba(242,234,227,.18); animation-direction: reverse; animation-duration: 13s; transform: rotate(35deg); }
.orbit-two::after { top: auto; bottom: 9%; left: auto; right: 17%; width: .35rem; height: .35rem; background: var(--cream); box-shadow: none; }

.hero-copy { max-width: 50rem; }
.eyebrow { margin: 0 0 1.5rem; color: var(--red); font-family: "IBM Plex Mono", monospace; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 12ch; margin: 0; font-family: "Chakra Petch", sans-serif; font-size: clamp(3.4rem, 7.1vw, 7.7rem); font-weight: 600; line-height: .88; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.intro { max-width: 34rem; margin: 2rem 0 2.4rem; color: var(--gray); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 300; line-height: 1.5; }
.contact { position: relative; display: inline-block; padding: .85rem 0; color: var(--cream); font-family: "IBM Plex Mono", monospace; font-size: .82rem; letter-spacing: .04em; text-decoration: none; }
.contact::after { content: ""; position: absolute; left: 0; right: 0; bottom: .5rem; height: 1px; background: var(--red); transform-origin: left; transition: transform .3s ease; }
.contact:hover::after, .contact:focus-visible::after { transform: scaleX(.55); }
.contact:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }

.signal {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 2rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(242,234,227,.16);
  border-bottom: 1px solid rgba(242,234,227,.16);
  color: var(--gray);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  line-height: 1.6;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.signal p { margin: 0; }
.signal-center { text-align: center; }
.signal-right { text-align: right; }
.signal strong { color: var(--cream); font-weight: 400; }

footer { color: rgba(208,201,195,.62); }
footer p { margin: 0; }
footer span { font-family: "Host Grotesk", sans-serif; font-weight: 300; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-.8rem); } }
@keyframes pulse { 50% { opacity: .35; transform: rotate(45deg) scale(.75); } }

@media (max-width: 850px) {
  .site-header { padding: 1.2rem; }
  .status { font-size: 0; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 1rem; padding: 2.5rem 1.2rem 4.5rem; }
  .orbital-mark { width: min(78vw, 25rem); }
  .crystal-area { width:min(92vw,30rem); }
  .hero-copy { margin-top: 1.5rem; }
  h1 { font-size: clamp(3.25rem, 14vw, 5.8rem); }
  .intro { max-width: 30rem; }
  .signal { grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 1.2rem; }
  .signal-center { display: none; }
  footer { padding: 1.2rem; }
  footer p:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}