/* Say Hello — pulled into the Heyming OS chassis. Original surface was
   bare white; now it inherits the brand dark surface, body text, and
   typography. The voice control widgets are left to their native UA
   styling because that's what gives the OS speech APIs their familiar
   look (and we don't want to fight `select` rendering across platforms). */
body {
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-ui);
  min-height: 100dvh;
}
.content-wrapper {
  margin-left: 120px;
  padding: 20px;
  max-width: 720px;
}
h1 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
p {
  color: var(--text-2);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .content-wrapper {
    margin-left: 20px;
    padding: 10px 10px 10px 100px;
  }
}
#helloForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}
#helloForm select,
#helloForm textarea,
#helloForm button {
  width: 100%;
  box-sizing: border-box;
}
#helloForm label {
  font-weight: bold;
  margin-bottom: 5px;
}
.header-icon {
  font-size: 1.2em;
  margin-right: 10px;
}
.speaking-indicator {
  display: inline-block;
  font-size: 1.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.speaking-indicator.active {
  opacity: 1;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.learn-more {
  font-size: 0.9em;
  margin-top: 10px;
}
.learn-more a {
  color: var(--accent-primary-hover);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-primary-hover);
}
.learn-more a:hover {
  border-bottom-style: solid;
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}