:root {
  color-scheme:dark;
  --bg:#111717;
  --panel:#1b201d;
  --ink:#eef1e9;
  --muted:#a7aea2;
  --green:#c4ffa1;
  --brass:#a69770;
  --line:#484b3c;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  font:16px/1.45 var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
  opacity:.45;
}
button,input,a {
  touch-action:manipulation;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--green);
  outline-offset:3px;
}
button {
  color:inherit;
}
a {
  color:inherit;
}
.icon {
  display:block;
  width:21px;
  height:21px;
  flex:none;
}
.bar {
  width:min(1160px,90%);
  margin:auto;
  height:67px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand {
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-size:31px;
  font-weight:690;
  letter-spacing:-2.2px;
  line-height:1;
}
.brand-icon {
  width:30px;
  height:30px;
  display:block;
  flex:none;
  background:linear-gradient(145deg,#d8eab6,#94b584);
  color:#1b291b;
  border:1px solid #c8d7ad;
  border-radius:7px;
  box-shadow:inset 0 1px 0 #f5f8db7a,0 1px 4px #0005;
}
.accent,h1 span {
  color:var(--green);
}
.local {
  display:flex;
  align-items:center;
  gap:8px;
  font:11px var(--mono);
  color:#b8c2b1;
}
.local i {
  height:6px;
  width:6px;
  border-radius:50%;
  background:#bded95;
  box-shadow:0 0 8px #9acc6660;
}
main {
  flex:1;
  display:grid;
  align-items:center;
  justify-items:center;
  padding:22px 14px;
  min-width:0;
}
.surface {
  position:relative;
  width:min(100%,456px);
  min-width:0;
  padding:32px;
  border:1px solid #545648;
  border-radius:17px;
  background:linear-gradient(140deg,#272d27f7,#181e1bf7 44%,#20251ff7);
  box-shadow:inset 0 1px #e2e8bf12,0 14px 70px #02050275,0 3px 10px #0006;
}
h1,h2,p {
  margin:0;
}
h1 {
  font-size:clamp(34px,4.1vw,52px);
  font-weight:580;
  letter-spacing:-.061em;
  line-height:1.02;
  text-wrap:balance;
}
h1 span {
  margin-left:1px;
}
.lead {
  margin:14px 0 24px;
  font-size:15px;
  color:var(--muted);
  text-wrap:pretty;
}
form,.stack {
  display:grid;
  gap:13px;
}
.field {
  display:grid;
  gap:5px;
}
.field label,.share label,.caption {
  font-size:13px;
  font-weight:520;
  color:#c3cabd;
}
.field-inner {
  position:relative;
  display:flex;
  align-items:center;
}
.field input,.share input {
  width:100%;
  min-width:0;
  border:1px solid #505648;
  border-radius:7px;
  background:#111813;
  color:var(--ink);
  padding:10px 13px;
  height:45px;
}
.field input::placeholder {
  color:#939c8c;
}
.field-inner:has(.eye) input {
  padding-right:47px;
}
.eye {
  display:grid;
  place-items:center;
  position:absolute;
  right:1px;
  top:1px;
  height:43px;
  width:44px;
  color:#b2bbac;
  background:none;
  border:0;
  border-radius:6px;
}
.eye:hover {
  color:var(--ink);
}
.eye .icon {
  width:18px;
  height:18px;
}
.primary,.secondary,.quiet,.back,.tool {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-weight:570;
  font-size:14px;
  border-radius:8px;
  transition:background-color .15s,border-color .15s,transform .15s;
}
.primary,.secondary,.quiet {
  min-height:45px;
  padding:9px 15px;
  border:1px solid #565f4e;
}
.primary {
  background:#c3ef9e;
  border-color:#d1efb5;
  color:#1c291a;
}
.primary:hover {
  background:#d2f5b4;
}
.secondary,.quiet,.tool {
  color:var(--ink);
  background:linear-gradient(#30382f,#252c26);
}
.secondary:hover,.quiet:hover,.tool:hover {
  background:#394436;
  border-color:#818a70;
}
.primary:active,.secondary:active,.tool:active {
  transform:translateY(1px);
}
.wide {
  justify-content:space-between;
}
.back {
  background:none;
  border:0;
  color:var(--muted);
  height:38px;
  padding:0 4px;
  margin:-8px 0 8px -4px;
}
.back .icon {
  width:16px;
}
.fine {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
  color:var(--muted);
  font-size:12px;
}
.fine .icon {
  width:14px;
  height:14px;
}
.notice {
  margin-top:10px;
  font-size:13px;
  color:#ffcd9b;
  line-height:1.35;
}
.notice button {
  min-height:36px;
  margin:3px;
}
.busy .progress-dot {
  height:10px;
  width:10px;
  border-radius:50%;
  background:currentColor;
  animation:pulse .9s ease-in-out infinite alternate;
}
@keyframes pulse {
  to {
    opacity:.32;
    transform:scale(.65);
  }
}
.tool {
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:none;
  height:44px;
  width:44px;
  border:1px solid #595e4e;
  border-radius:10px;
}
[data-tip]::after {
  position:absolute;
  left:50%;
  bottom:calc(100% + 6px);
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
  padding:6px 9px;
  max-width:156px;
  width:max-content;
  white-space:normal;
  text-align:center;
  border:1px solid #676f57;
  border-radius:5px;
  background:#161d17;
  color:#f0f4e9;
  font:12px/1.3 var(--sans);
  opacity:0;
}
.controls [data-tip]:focus-visible::after {
  content:attr(data-tip);
  opacity:1;
}
@media(hover:hover) {
  [data-tip]:hover::after {
    content:attr(data-tip);
    opacity:1;
  }
  .event-strip [data-tip]:hover::after {
    left:auto;
    right:0;
    transform:none;
  }
}
#room-panel {
  max-width:490px;
  margin:auto;
}
.panel-heading h2 {
  font-size:32px;
  font-weight:560;
  letter-spacing:-.05em;
}
.share {
  display:grid;
  gap:8px;
  margin:16px 0 1px;
}
.share strong {
  font:clamp(22px,4vw,32px) var(--mono);
  letter-spacing:.07em;
  color:var(--green);
  margin-bottom:8px;
}
.share input {
  font:13px var(--mono);
}
.share .fine {
  margin:2px 0 0;
}
.share .primary {
  margin-top:4px;
}
[hidden] {
  display:none!important;
}
/* Entry screens use the same graphite, card surface and lime as the live call. */
body:not([data-view=room]) { min-height: 100dvh; font-family: Arial,sans-serif }
.top { padding-top: env(safe-area-inset-top) }
.top .bar { width: auto; margin-inline: clamp(22px,5.25vw,96px); height: clamp(64px,10vh,88px) }
.top .brand { color: #e4e8db; font: bold 29px/1 Arial,sans-serif; letter-spacing: -.045em; gap: 9px }
.top .brand-icon,.launch-lockup .brand-icon { background:#cee99c; border:0; border-radius:30%; box-shadow:none }
.top .accent { color: #cee99c }
.top .local { color: #a3b2a6; font: 13px/1.2 Arial,sans-serif; gap: 7px }
.top .local i { width: 6px; height: 6px; box-shadow: none; background:#bed69d }
body:not([data-view=room]) main { align-content:center; padding: 20px 20px clamp(24px,9dvh,78px) }
body:not([data-view=room]) .surface {
  width:min(100%,456px); padding:38px;
  background:#1a2220; border:1px solid #3a453c; border-radius:24px; box-shadow:none;
}
body:not([data-view=room]) h1 { color:#e4e8db; font:bold 34px/1.08 Arial,sans-serif; letter-spacing:-.045em }
body:not([data-view=room]) .lead { font: 15px/1.48 Arial,sans-serif; color:#b5c1b6; margin:10px 0 30px }
body:not([data-view=room]) form,.stack { display:grid; gap:18px }
body:not([data-view=room]) .field { gap:8px }
body:not([data-view=room]) .field label { font:bold 14px/1.25 Arial,sans-serif; color:#d6dfd2 }
body:not([data-view=room]) .field input {
  height:50px; padding:0 15px; border-radius:12px; border:1px solid #445347;
  background:#121a17; color:#e4e8db; font:16px/1.3 Arial,sans-serif;
}
body:not([data-view=room]) .field-inner:has(.eye) input { padding-right:50px }
body:not([data-view=room]) .field input::placeholder { color:#97a59b }
body:not([data-view=room]) .field input[aria-invalid=true] { border-color:#bf9386 }
body:not([data-view=room]) .eye { top:0; right:2px; height:100%; width:44px; color:#adbcad }
body:not([data-view=room]) .wide {
  justify-content:space-between; min-height:50px; padding:0 17px; border:1px solid transparent;
  border-radius:12px; font:bold 16px/1.15 Arial,sans-serif;
}
body:not([data-view=room]) .wide .icon { width:20px; height:20px }
body:not([data-view=room]) .primary { background:#cee99c; color:#1b291e }
body:not([data-view=room]) .primary:hover { background:#dbf3ae }
body:not([data-view=room]) .secondary { background:#27322c; border-color:#425047; color:#deead8 }
body:not([data-view=room]) form .primary { margin-top:4px }
body:not([data-view=room]) .back {
  margin:-7px 0 16px -9px; padding:0 9px; height:38px; gap:6px; background:none; color:#bccab8;
  font:14px/1.2 Arial,sans-serif;
}
body:not([data-view=room]) .notice { margin:16px 0 0; color:#edc4b2; font:14px/1.45 Arial,sans-serif }
body[data-view=launch] > .top { display:none }
body[data-view=launch] main { padding:0 }
body[data-view=launch] .surface { width:auto; padding:0; border:0; border-radius:0; background:transparent }
.launch-lockup { display:flex; align-items:center; gap:14px }
.launch-lockup .brand-icon { width:54px; height:54px }
.launch-lockup .brand-icon use { transform-origin:center; animation:launch-wave 800ms ease-in-out infinite alternate }
body[data-view=launch] h1 { font-size:42px }
@keyframes launch-wave { from { transform:scaleY(.63) } to { transform:scaleY(1) } }

@media (max-width:700px), (max-height:520px) and (max-width:950px) {
  body:not([data-view=room],[data-view=launch]) main {
    display:flex; flex-direction:column; align-items:center;
    padding:24px max(24px,env(safe-area-inset-right))
      max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  }
  body:not([data-view=room],[data-view=launch]) .surface {
    flex:none; width:min(100%,412px); margin-block:auto; padding:0;
    background:transparent; border:0; border-radius:0; box-shadow:none;
  }
  .top .bar { height:64px; margin-left:max(24px,env(safe-area-inset-left)); margin-right:max(24px,env(safe-area-inset-right)) }
  .top .brand { font-size:26px }
  .top .local { font-size:12px }
  body:not([data-view=room]) h1 { font-size:31px }
  body:not([data-view=room]) .lead { margin:9px 0 26px }
  body:not([data-view=room]) .back { margin-top:0; margin-bottom:11px }
}
@media (max-height:650px) and (max-width:700px), (max-height:520px) and (max-width:950px) {
  .top .bar { height:48px }
  body:not([data-view=room],[data-view=launch]) main {
    padding:16px max(20px,env(safe-area-inset-right))
      max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  }
  body:not([data-view=room]) h1 { font-size:27px }
  body:not([data-view=room]) .lead { margin:6px 0 16px; font-size:14px }
  body:not([data-view=room]) form,.stack { gap:12px }
  body:not([data-view=room]) .field { gap:5px }
  body:not([data-view=room]) .wide,body:not([data-view=room]) .field input { height:44px; min-height:44px }
  body:not([data-view=room]) .back { height:32px; margin-bottom:5px }
}
@media (max-height:460px) and (max-width:599px) {
  body:not([data-view=room]) form { gap:8px }
}
@media (max-height:520px) and (min-width:600px) and (max-width:950px) {
  body:not([data-view=room],[data-view=launch]) .surface { width:min(100%,740px) }
  body:not([data-view=room],[data-view=launch]) #screen {
    display:grid; grid-template-columns:minmax(180px,.85fr) minmax(230px,1.15fr);
    column-gap:32px; justify-content:space-between; align-content:center;
  }
  body:not([data-view=room]) #screen > .back {justify-self:start;grid-column:1;margin:0 0 10px}
  body:not([data-view=room]) #screen > h1,body:not([data-view=room]) #screen > .lead {grid-column:1}
  body:not([data-view=room]) #screen > form,body:not([data-view=room]) #screen > .stack {grid-column:2;grid-row:1/5}
}
@media (prefers-reduced-motion:reduce) {
  .launch-lockup .brand-icon use { animation:none }
}

.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* In-call surfaces fill the browser viewport. */
body[data-view=room] {
  color: #e4e8db;
  font-family: Arial, sans-serif;
}
body[data-view=room] > .top { display: none }
body[data-view=room] main { padding: 0; align-content: stretch; align-items: stretch }
body[data-view=room] .surface {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body[data-view=room] #screen { flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0,1fr) }
#room-main {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 0;
}
.room-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}
.room-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: bold 25px/1 Arial,sans-serif;
  letter-spacing: 0;
  color: #e5e9d9;
}
.room-brand .brand-icon {
  width: 32px;
  height: 32px;
  margin: 0;
  background: #cee99c;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.security { display: flex; align-items: center; gap: 8px; margin-left: auto }
.security > span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 14px;
  color: #c3d4ba;
  background: #1f2a23;
  font: 12px/1 Arial,sans-serif;
}
.security > span:first-child { min-width: 104px }
.security > span:last-child { min-width: 145px }
.security .icon { width: 13px; height: 13px; color: #b9cbaa }
#presence-count { margin-left: 16px; min-width: 44px; white-space: nowrap; text-align: right; font: bold 15px Arial,sans-serif; color: #d7dfd5 }
.patchbay { margin-top: 46px; padding-bottom: 63px }
#cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2 }
.people { display: flex; width: 100%; gap: 12px }
.person {
  --speaker-top: 18px;
  --speaker-left: 20px;
  --speaker-size: 72px;
  --name-left: 106px;
  --name-right: 11px;
  flex: 1 1 0;
  min-width: 0;
  height: 167px;
  position: relative;
  transform-origin: top left;
  background: #1a2220;
  border: 1px solid #3a453c;
  border-radius: 15px;
}
.person.speaking { background: #1c2924 }
.portrait {
  position: absolute; top: var(--speaker-top); left: var(--speaker-left);
  width: var(--speaker-size); height: var(--speaker-size);
}
.membrane { width: 100%; height: 100%; display: block }
.profile {
  position: absolute;
  top: var(--speaker-top); height: var(--speaker-size);
  left: var(--name-left); right: var(--name-right);
  display: flex; align-items: center; gap: 6px;
}
.person-name { min-width: 0; overflow-wrap: anywhere; font: bold 24px/1.06 Arial,sans-serif; color: #e4e8db }
.person-name.long { font-size: 14px; line-height: 1.1 }
.peer-state {
  position: relative; display: grid; place-items: center;
  flex: 0 0 19px; width: 19px; height: 22px; color: #bedaa6;
}
.peer-state[data-state=speaking] { color: #c6ed9d }
.peer-state[data-state=connecting] { color: #cfbf95 }
.peer-state[data-state=disconnected] { color: #f0b49c }
.state-icon { grid-area: 1/1; opacity: 0; transition: opacity 130ms ease-in-out }
.state-icon .icon { width: 18px; height: 18px }
.peer-state[data-state=listening] [data-glyph=listening],
.peer-state[data-state=speaking] [data-glyph=speaking],
.peer-state[data-state=muted] [data-glyph=muted],
.peer-state[data-state=connecting] [data-glyph=connecting],
.peer-state[data-state=disconnected] [data-glyph=disconnected] { opacity: 1 }
.peer-state:focus-visible,.creator-mark:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 3px }
.person [data-tip]:focus::after { content: attr(data-tip); opacity: 1 }
.person [data-tip]::after { left: auto; right: 0; transform: none; white-space: nowrap }
.wave {
  position: absolute;
  bottom: 14px;
  left: 16px;
  width: calc(100% - 32px);
  height: 44px;
  border-radius: 6px;
  background: #131b18;
}
.creator-mark { position: absolute; top: 10px; right: 12px; display: inline-grid; place-items: center; flex: none; width: 17px; height: 20px; color: #bca775 }
.creator-mark .icon { width: 16px; height: 16px }
.event-strip {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#latest:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  min-width: 122px;
  height: 26px;
  border-radius: 15px;
  background: #202d25;
  color: #c8d5c6;
  font: 13px Arial,sans-serif;
}
#latest:not(:empty)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #a6c98c }
.controls {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 11px;
  align-items: center;
  margin-top: 7px;
}
.main-tool { border: 0; width: 44px; height: 44px; border-radius: 13px; background: #29332e; color: #d7dcce }
.main-tool .icon { width: 21px; height: 21px }
.main-tool#mic { color: #dddfd1; background: #343c37 }
.main-tool#mic.active { color: #293521; background: #c4dda2 }
.main-tool.exit { background: #352c29; color: #e4b3a6 }
#room-panel { width: min(92%,460px); margin: auto; padding: 22px; background: #1a2220; border: 1px solid #3a453c; border-radius: 14px }
body[data-view=room] .notice { order: -1; flex: none; margin: 3px auto 0; width: 90%; text-align: center }
/* The desktop room occupies the window. Keep the same phone breakpoint as
   the cable controller, including the short landscape phone layout. */
@media (width > 950px), (width > 700px) and (height > 520px), (orientation:landscape) and (height > 520px) {
  #room-main {
    --inset: clamp(24px,5.25vw,112px);
    --button-size: clamp(48px,7.6dvh,72px);
    --logo-size: clamp(34px,min(3.3vw,7dvh),54px);
    display: grid;
    grid-template-rows: var(--logo-size) minmax(0,1fr) auto auto;
    padding: clamp(12px,4.4dvh,52px) var(--inset) clamp(12px,3.6dvh,42px);
  }
  .room-header { height: auto; gap: clamp(10px,1vw,18px) }
  .room-brand { gap: clamp(9px,1vw,16px); font-size: clamp(26px,2.55vw,42px) }
  .room-brand .brand-icon {
    width: var(--logo-size); height: var(--logo-size); border-radius: 30%;
  }
  .security { gap: clamp(8px,.8vw,16px) }
  .security > span {
    height: clamp(28px,4.3dvh,39px); gap: 7px; padding: 0 clamp(10px,.95vw,18px);
    font-size: clamp(12px,1.02vw,17px); border-radius: 2em;
  }
  .security .icon { width: 1.1em; height: 1.1em }
  #presence-count { font-size: clamp(16px,1.45vw,24px); margin-left: clamp(0px,.65vw,14px) }
  .patchbay {
    display: grid; place-items: center; min-height: 0; margin: 0;
    padding-bottom: clamp(48px,6dvh,65px);
  }
  .people { width: min(100%,1920px); min-width: 0; gap: clamp(12px,1.5vw,32px); justify-content: center }
  .person {
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) minmax(0,28%);
    align-items: center;
    column-gap: clamp(11px,1.25vw,24px);
    row-gap: clamp(7px,1.6dvh,19px);
    padding: clamp(10px,2.75dvh,32px) clamp(12px,1.55vw,32px);
    height: clamp(122px,min(35dvh,25vw),365px);
    border-radius: clamp(16px,1.65vw,29px);
  }
  .person:only-child { max-width: 860px }
  .portrait {
    position: static;
    width: clamp(46px,min(34cqw,16.4dvh,9.5vw),158px);
    height: auto; aspect-ratio: 1;
  }
  .profile { position: static; min-width: 0; height: auto; gap: clamp(5px,.57vw,10px) }
  .person-name { font-size: clamp(19px,min(10.6cqw,2.65vw,6.5dvh),48px); line-height: 1.08 }
  .person-name.long { font-size: clamp(13px,min(7cqw,2vw,4dvh),32px); line-height: 1.1 }
  .peer-state {
    --icon-size: clamp(17px,min(6.8cqw,1.85vw),32px);
    width: var(--icon-size); height: var(--icon-size); flex-basis: var(--icon-size);
  }
  .state-icon .icon { width: var(--icon-size); height: var(--icon-size) }
  .wave { position: static; grid-column: 1/-1; width: 100%; height: 100%; border-radius: 9px }
  .creator-mark { top: clamp(7px,1.5dvh,17px); right: clamp(12px,1.25vw,23px); width: clamp(17px,1.5vw,26px) }
  .creator-mark .icon { width: 100%; height: auto }
  .event-strip { height: clamp(25px,4.2dvh,36px) }
  #latest:not(:empty) { height: 100%; font-size: clamp(13px,1vw,16px); padding: 0 16px; border-radius: 2em }
  .controls { gap: clamp(12px,1.2vw,20px); margin-top: clamp(8px,1.7dvh,20px) }
  .main-tool { width: var(--button-size); height: var(--button-size); border-radius: 28% }
  .main-tool .icon {
    width: calc(var(--button-size) * .48);
    height: calc(var(--button-size) * .48);
  }
}

/* A phone call fills the current viewport, including changes in browser chrome.
   The middle grid track is the exact space between the header and notifications. */
@media (max-width:700px) and (orientation:portrait), (max-width:950px) and (max-height:520px) {
  body[data-view=room] { min-height: 100dvh }
  body[data-view=room] main { align-content: stretch; align-items: stretch }
  body[data-view=room] .surface {
    height: 100dvh;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  body[data-view=room] #screen { flex: 1; min-height: 0; display: grid }
  body[data-view=room] .notice { order: -1; flex: none }
  #room-main {
    --inset: 28px;
    --dock-gap: 18px;
    display: grid;
    grid-template-rows: 32px minmax(0,1fr) 26px auto;
    height: 100%;
    min-height: 0;
    padding: max(16px,env(safe-area-inset-top)) max(var(--inset),env(safe-area-inset-right))
             max(16px,env(safe-area-inset-bottom)) max(var(--inset),env(safe-area-inset-left));
  }
  #cables { display: none }
  .room-header { flex-wrap: nowrap; height: 100%; gap: 8px }
  .room-brand { font-size: 24px }
  .security { margin-left: auto; flex: none; gap: 7px; order: 0 }
  .security > span:first-child,.security > span:last-child {
    display: grid;
    place-items: center;
    background: none;
    padding: 0;
    width: 17px;
    min-width: 0;
    height: 20px;
  }
  .security .icon { width: 16px; height: 16px; color: #a5b6a6 }
  .security [data-state=shield-check] .icon { color: #c3dca7 }
  .security [data-state=shield-x] .icon { color: #ecac95 }
  .security-caption { display: none }
  #presence-count { margin-left: 2px; min-width: 42px; font-size: 14px }
  .patchbay {
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    align-items: center;
  }
  .people { flex-direction: column; gap: clamp(14px,2.85dvh,26px) }
  .person {
    --speaker-top: 6px; --speaker-left: 14px; --speaker-size: clamp(44px,7.6dvh,63px);
    --name-left: 91px; --name-right: 15px;
    flex: none; width: 100%; height: clamp(98px,16.4dvh,135px);
  }
  .creator { --name-right: 44px }
  .creator-mark { top: calc(var(--speaker-top) + var(--speaker-size) / 2 - 10px); right: 15px }
  .person-name { font-size: 22px }
  .wave { bottom: 8px; left: 13px; width: calc(100% - 26px); height: clamp(25px,4.8dvh,39px) }
  .event-strip { height: 100%; align-self: end }
  #latest:not(:empty) { height: 24px; font-size: 12px }
  .controls { margin: var(--dock-gap) 0 0; gap: 14px }
  .main-tool { width: 48px; height: 48px }
  #room-panel { margin: auto; width: min(92%,460px) }
  body[data-view=room] .notice:not([hidden]) {
    margin: 0;
    width: 100%;
    padding: 6px 15px max(6px,env(safe-area-inset-bottom));
    background: #202820;
  }
}
@media (max-width:380px) and (orientation:portrait) {
  #room-main { --inset: 23px; --dock-gap: 12px }
  .person { --name-left: 72px }
}
@media (max-width:950px) and (max-height:520px) and (orientation:landscape) {
  #room-main {
    --inset: max(26px,calc((100vw - 666px) / 2));
    --dock-gap: 10px;
    grid-template-rows: 28px minmax(0,1fr) 22px auto;
    padding-top: max(6px,env(safe-area-inset-top));
    padding-bottom: max(8px,env(safe-area-inset-bottom));
  }
  .room-brand { font-size: 21px }
  .room-brand .brand-icon { width: 27px; height: 27px; border-radius: 8px }
  #presence-count { font-size: 13px }
  .people { gap: clamp(10px,3dvh,16px) }
  .person {
    --speaker-size: 42px; --speaker-left: 12px; --speaker-top: calc(50% - var(--speaker-size)/2);
    --name-left: 66px; --name-right: 47%;
    height: clamp(44px,15.2dvh,68px); border-radius: 10px;
  }
  .person-name { font-size: 18px }
  .creator-mark { top: calc(50% - 10px); right: 8px }
  .wave { left: auto; right: 34px; bottom: 50%; margin-bottom: -15px; width: calc(44% - 24px); height: 30px }
  #latest:not(:empty) { height: 21px; font-size: 11px }
  .main-tool { width: 46px; height: 44px }
  #room-panel { padding: 10px 16px }
  .share { gap: 3px; margin: 4px 0 }
  .share strong { font-size: 21px; margin-bottom: 1px }
  .share .fine { font-size: 11px }
}
@media (max-width:700px) and (max-height:540px) and (orientation:portrait) {
  #room-main { --inset: clamp(12px,5vw,24px); --dock-gap: 7px }
  .people { gap: 8px }
  .person { --speaker-top: 4px; --speaker-left: 9px; --speaker-size: clamp(33px,8dvh,42px); --name-left: 56px; height: clamp(60px,16.5dvh,85px) }
  .person-name { font-size: 18px }
  .person-name.long { font-size: 12px }
  .wave { bottom: 4px; height: clamp(14px,3.85dvh,20px) }
  .creator { --name-right: 34px }
  .creator-mark { right: 8px }
}
@media (max-width:950px) and (max-height:310px) and (orientation:landscape) {
  #room-main { --dock-gap: 4px; grid-template-rows: 24px minmax(0,1fr) 18px auto; padding-block: max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-bottom)) }
  .room-brand .brand-icon { width: 23px; height: 23px }
  .people { gap: 4px }
  .person { --speaker-size: 33px; --speaker-left: 8px; --name-left: 50px; height: clamp(33px,16dvh,46px) }
  .person-name.long { font-size: 12px }
  .wave { height: 24px; margin-bottom: -12px }
  #latest:not(:empty) { height: 18px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important }
}