:root {
  color-scheme: dark;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08111f;
  color: #ecf3ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(53, 111, 195, 0.25), transparent 36rem),
    linear-gradient(165deg, #0d1727 0%, #07101d 70%);
}

main {
  width: min(46rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 0 max(3rem, env(safe-area-inset-bottom));
}

.hero { padding: 1rem 0 1.5rem; }
.eyebrow { color: #79aaf2; font-size: .75rem; font-weight: 800; letter-spacing: .17em; }
h1 { margin: .25rem 0; font-size: clamp(2.1rem, 8vw, 4rem); line-height: 1; }
h1 span { color: #78aefc; }
.subtitle { color: #aebed4; line-height: 1.6; }

.panel {
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid rgba(132, 170, 222, .2);
  border-radius: 1rem;
  background: rgba(16, 28, 46, .82);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
}

.panel h2 { margin: 0 0 1rem; font-size: 1rem; }
label { display: block; margin-bottom: .5rem; font-size: .9rem; color: #c2d0e4; }
input {
  width: 100%;
  padding: .9rem;
  border: 1px solid #354966;
  border-radius: .7rem;
  background: #081321;
  color: #fff;
  font-size: 1rem;
}

.buttonRow { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .85rem; }
button {
  min-height: 3rem;
  border: 1px solid #496485;
  border-radius: .7rem;
  background: #17263b;
  color: #eaf2ff;
  font-size: 1rem;
  font-weight: 700;
}
button.primary { background: #2d6fd2; border-color: #4c8ae7; }
button:disabled { opacity: .45; }

.hint, .boundary { color: #9fb0c7; font-size: .84rem; line-height: 1.55; }
.boundary { margin-top: 1.3rem; padding: 0 .4rem; }

.status {
  display: inline-flex;
  margin-top: .6rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 750;
}
.status.idle { background: #223148; color: #c4d2e6; }
.status.connecting { background: #3b321a; color: #f6d477; }
.status.connected { background: #123e34; color: #7ee4bf; }
.status.error { background: #4b2028; color: #ff9fac; }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0; }
.metrics div { padding: .75rem; border-radius: .7rem; background: rgba(4, 12, 23, .55); }
.metrics dt { color: #8fa4bf; font-size: .75rem; }
.metrics dd { margin: .3rem 0 0; font-variant-numeric: tabular-nums; font-weight: 750; }

.eventLog {
  min-height: 4rem;
  max-height: 14rem;
  margin: 0;
  padding-left: 1.6rem;
  overflow: auto;
  color: #a9bcd5;
  font: .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}

audio { display: none; }

@media (max-width: 34rem) {
  .buttonRow, .metrics { grid-template-columns: 1fr; }
}