:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a1012;
  color: #eef8f4;
  --mint: #84f2c4;
  --cyan: #69cddb;
  --amber: #ffc86b;
  --red: #ff7a78;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button { font: inherit; }

.stage {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2rem;
  padding: 3rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(38, 112, 102, .2), transparent 32rem),
    linear-gradient(145deg, #0a1012, #111a1d 58%, #091114);
}

.privacy-chip {
  padding: .55rem 1rem;
  border: 1px solid rgba(132, 242, 196, .28);
  border-radius: 999px;
  color: #b9d7cc;
  background: rgba(8, 24, 23, .7);
  font-size: .82rem;
  letter-spacing: .04em;
}

.presence { display: flex; align-items: center; gap: 2.25rem; }
.orb {
  position: relative;
  width: 13rem;
  aspect-ratio: 1;
  border: 1px solid rgba(132, 242, 196, .35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105, 205, 219, .18), rgba(9, 24, 26, .4) 55%, transparent 72%);
  box-shadow: 0 0 5rem rgba(68, 214, 171, .12), inset 0 0 2rem rgba(132, 242, 196, .1);
  transition: border-color .2s, filter .2s;
}

.orb::before, .orb::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(105, 205, 219, .22);
  border-radius: 42% 58% 61% 39%;
  animation: orbit 8s linear infinite;
}
.orb::after { inset: 28%; animation-direction: reverse; animation-duration: 5s; }
.core {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: Georgia, serif; font-size: 3.2rem; color: var(--mint);
  text-shadow: 0 0 1.5rem rgba(132, 242, 196, .55);
}
.node { position: absolute; width: .62rem; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 1rem var(--cyan); }
.node-a { top: 13%; left: 49%; }.node-b { right: 14%; top: 54%; }.node-c { bottom: 16%; left: 27%; }.node-d { left: 11%; top: 34%; }

@keyframes orbit { to { transform: rotate(360deg); } }
:root[data-phase="speaking"] .orb { border-color: var(--mint); animation: breathe .9s ease-in-out infinite alternate; }
:root[data-phase="muted"] .orb, :root[data-phase="handed_back"] .orb { filter: saturate(.35); border-color: var(--amber); }
:root[data-phase="ended"] .orb { filter: grayscale(1); opacity: .42; border-color: var(--red); }
@keyframes breathe { to { transform: scale(1.025); box-shadow: 0 0 6rem rgba(68, 214, 171, .26); } }

.eyebrow { margin: 0 0 .25rem; color: #8eb1a7; text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; }
h1 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(3.6rem, 8vw, 6rem); line-height: .95; }
.state { margin: .8rem 0 .2rem; color: var(--mint); font-size: 1.15rem; text-transform: capitalize; }
.detail { margin: 0; color: #91aaa4; max-width: 32rem; }

.controls { display: grid; grid-template-columns: repeat(4, minmax(9rem, 1fr)); gap: .75rem; width: min(66rem, 100%); }
.controls button, .simulate {
  border: 1px solid rgba(238, 248, 244, .18);
  border-radius: .8rem;
  padding: .9rem 1rem;
  background: rgba(24, 38, 41, .85);
  color: #eef8f4;
  cursor: pointer;
}
.controls button:hover:not(:disabled), .simulate:hover:not(:disabled) { border-color: var(--mint); background: rgba(30, 56, 53, .9); }
.controls .danger { border-color: rgba(255, 122, 120, .42); color: #ffc0bf; }
button:disabled { opacity: .42; cursor: not-allowed; }
.simulate { padding: .55rem .9rem; color: #9ebbb2; font-size: .8rem; }
.shortcuts, .disclaimer { margin: -.8rem 0 0; color: #718985; font-size: .78rem; text-align: center; }
.disclaimer { color: #c59d62; }

@media (max-width: 760px) {
  .stage { padding: 2rem 1rem; }
  .presence { flex-direction: column; text-align: center; gap: 1rem; }
  .orb { width: 10rem; }
  .controls { grid-template-columns: 1fr 1fr; }
}