:root{--bg:#0a0a0c}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:'Space Mono',monospace;color:#f5f5f7;background:var(--bg);overflow:hidden}
#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:1}
.container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%}
@media (max-width:768px){.container{justify-content:flex-start;padding:2rem 0 2rem 0}}
.title-wrapper{padding:2rem;text-align:center}
.main-title{font-size:clamp(2.5rem,7vw,5rem);letter-spacing:.35em;text-indent:.35em;font-weight:900;font-family:'Orbitron',monospace;color:#f5f5f7;text-transform:uppercase;position:relative;text-align:center;width:100%}
@media (max-width:768px){.main-title{letter-spacing:.25em;text-indent:.25em}}

#renderer{position:fixed;bottom:12px;left:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#bbb;opacity:.6;z-index:4}

/* Guest List Form Styles */
.guest-list-form {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.guest-list-form h2 {
  font-size: clamp(0.9rem, 2.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: #f5f5f7;
  width: 100%;
  text-align: center;
}

.guest-list-form p {
  font-size: 0.9rem;
  color: #bbb;
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
}

.form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #f5f5f7;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.form-group select {
  padding-right: 2.5rem;
}

.form-group input::placeholder {
  color: #888;
  font-family: 'Space Mono', monospace;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.form-group select {
  cursor: pointer;
}

.form-group select option {
  background: #0a0a0c;
  color: #f5f5f7;
}

.submit-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #f5f5f7;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

.form-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-message.success {
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid rgba(0, 255, 0, 0.3);
  color: #90ee90;
  opacity: 1;
}

.form-message.error {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff6b6b;
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .guest-list-form {
    margin: 1rem 0;
    padding: 1.5rem;
  }
  
  .guest-list-form h2 {
    font-size: 1.2rem;
  }
  
  .form-group input,
  .form-group select {
    padding: 0.8rem;
  }
}