@font-face { font-family:"Josefin Sans"; src:url("/fonts/josefin-sans-latin.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Roboto"; src:url("/fonts/roboto-latin.woff2") format("woff2"); font-display:swap; }
:root {
  color-scheme:light;
  --paper:#f5f4f0;
  --panel:#faf9f5;
  --field:#eeeeea;
  --ink:#111;
  --muted:#686860;
  --rule:#1c1c1a;
  --soft-rule:#aaa9a2;
  --accent:#efccea;
  --success:#196a40;
  --error:#a51f2b;
  font-family:Roboto,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
}
body.theme-dark {
  --paper:#050505;
  --panel:#151515;
  --field:#222222;
  --ink:#f4f4f1;
  --muted:#a5a59f;
  --rule:#4b4b47;
  --soft-rule:#30302d;
  --error:#d9828a;
  --success:#65dfa1;
}
body.theme-medium {
  --paper:#808080;
  --panel:#969694;
  --field:#aaa9a6;
  --ink:#101010;
  --muted:#3e3e3b;
  --rule:#262624;
  --soft-rule:#686864;
}
* { box-sizing:border-box; }
html { overflow-y:scroll; scrollbar-gutter:stable; }
[hidden] { display:none!important; }
body { min-width:320px; min-height:100vh; margin:0; background:var(--paper); color:var(--ink); }
body.theme-dark input { border-color:#4b4b47; }
body.theme-dark button.danger { color:#d9828a; }
button,input { border-radius:0; }
button {
  min-height:34px;
  border:1px solid var(--rule);
  padding:7px 13px;
  background:transparent;
  color:var(--ink);
  font:700 10px/1.2 "Courier New",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
button:hover:not(:disabled):not([aria-disabled="true"]),button:focus-visible:not([aria-disabled="true"]) { background:var(--ink); color:var(--paper); outline:none; }
button:disabled { opacity:.38; cursor:not-allowed; }
button[aria-disabled="true"] { border-color:var(--soft-rule); background:var(--field); color:var(--muted); opacity:.42; cursor:not-allowed; }
button.primary { border-color:var(--accent); background:var(--accent); color:#171112; }
button.primary:hover:not(:disabled) { border-color:#deb6d8; background:#deb6d8; color:#171112; }
button.danger { color:#741923; }
button.danger:hover:not(:disabled) { border-color:#741923; background:#741923; color:#fff; }
#studioApp { width:min(1600px,calc(100% - 28px)); margin:0 auto; padding:14px 0 28px; }
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:66px;
  padding:13px 14px;
  border:1px solid var(--rule);
  background:var(--panel);
}
.brand { display:flex; align-items:baseline; gap:16px; min-width:0; }
h1,h2,p { margin:0; }
h1 { font:400 clamp(23px,2.5vw,34px)/1 "Josefin Sans",sans-serif; letter-spacing:.06em; white-space:nowrap; }
.brand span,.kicker,.state,.session-strip,.header-status,.grade-signal,.message,label {
  font-family:"Courier New",ui-monospace,monospace;
  letter-spacing:.075em;
}
.brand span,.kicker,.state,.header-status,.grade-signal,.session-strip { text-transform:uppercase; }
.brand span { color:var(--muted); font-size:11px; }
.header-status { display:flex; align-items:center; gap:9px; font-size:9px; }
.login-panel { width:min(470px,100%); margin-top:14px; padding:24px; border:1px solid var(--rule); background:var(--panel); }
.login-panel h2 { margin:8px 0 9px; font:400 31px/1.1 "Josefin Sans",sans-serif; letter-spacing:.04em; }
.kicker { color:var(--muted); font-size:9px; }
.intro { color:var(--muted); font-size:14px; line-height:1.55; }
form { display:grid; gap:13px; margin-top:24px; }
label { display:grid; gap:7px; font-size:10px; font-weight:700; text-transform:uppercase; }
input { width:100%; height:38px; border:1px solid #777771; padding:7px 9px; background:var(--field); color:var(--ink); font:14px/1.2 "Courier New",ui-monospace,monospace; outline:none; }
input:focus { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
form .primary { justify-self:start; min-width:150px; }
.message { min-height:18px; margin-top:13px; color:var(--muted); font-size:10px; line-height:1.45; }
.message.error { color:var(--error); }
.workspace { margin-top:12px; }
.session-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:53px;
  margin-bottom:12px;
  padding:8px 14px;
  border:1px solid var(--rule);
  background:var(--panel);
  font-size:10px;
}
.session-strip > div:first-child { display:flex; align-items:center; gap:12px; min-width:0; }
.session-strip strong { display:inline-flex; align-items:center; min-height:35px; overflow:hidden; font-size:13px; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.session-strip #participantSummary { display:inline-flex; align-items:center; min-height:35px; color:var(--muted); line-height:1; white-space:nowrap; }
.slot { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--accent); background:var(--accent); color:#171112; font-size:15px; font-weight:700; }
.display-controls { display:flex; flex:0 0 auto; align-items:center; }
.theme-switch,.layout-switch { display:flex; flex:0 0 auto; }
.theme-switch { margin-right:12px; padding-right:12px; border-right:1px solid var(--soft-rule); }
.theme-switch button + button { border-left:0; }
.layout-switch { gap:4px; }
.theme-switch button.is-active,.layout-switch button.is-active { border-color:var(--accent); background:var(--accent); color:#171112; }
.studio-grid { display:grid; gap:12px; align-items:start; }
.primary-panels { display:contents; }
.room-participants-panel { display:none; }
.studio-grid.layout-collab { grid-template-columns:minmax(0,1fr) minmax(290px,360px); }
.layout-collab .collaboration-panel { align-self:stretch; }
.studio-grid.layout-grade,.studio-grid.layout-room { grid-template-columns:1fr; }
.layout-room .room-participants-panel { display:grid; grid-template-rows:auto minmax(0,1fr); }
.layout-room .grade-panel { display:none; }
.layout-room .collaboration-panel { display:block; }
.panel { min-width:0; border:1px solid var(--rule); background:var(--panel); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding:11px 14px; border-bottom:1px solid var(--rule); }
.panel-head h2 { margin-top:5px; font:400 22px/1.05 "Josefin Sans",sans-serif; letter-spacing:.035em; }
.collaboration-panel > .panel-head > div:first-child { transition:opacity .16s ease,color .16s ease; }
.collaboration-panel.is-disabled > .panel-head > div:first-child { color:var(--muted); opacity:.42; }
.grade-head-status { display:flex; min-width:0; align-items:center; justify-content:flex-end; gap:9px; }
.grade-signal { display:flex; align-items:center; gap:4px; font-size:8px; }
.grade-signal > span { display:inline-flex; min-height:27px; align-items:center; gap:5px; padding:5px 7px; border:1px solid var(--soft-rule); color:var(--muted); line-height:1; white-space:nowrap; }
.grade-signal strong { color:var(--ink); font-weight:700; }
.login-panel h2,.panel-head h2,.intro,.message,.room-gate p,.video-controls span { text-transform:lowercase; }
.state { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; white-space:nowrap; }
.state i { display:block; width:8px; height:8px; border:1px solid #777771; border-radius:50%; background:#aaa; }
.state.is-live i { border-color:var(--success); background:#36c77a; }
.state.is-error { color:var(--error); }
.state.is-error i { border-color:var(--error); background:#cf4d58; }
.video-shell { position:relative; display:grid; width:100%; min-height:220px; aspect-ratio:16/9; overflow:hidden; background:#000; }
#gradeVideo { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.video-controls {
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  min-height:37px;
  padding:3px 5px;
  border-top:1px solid rgba(255,255,255,.18);
  background:rgba(8,8,8,.9);
  color:#d0d0d0;
  opacity:0;
  pointer-events:none;
  transform:translateY(100%);
  transition:opacity .16s ease,transform .16s ease;
}
.video-shell.controls-visible .video-controls { opacity:1; pointer-events:auto; transform:translateY(0); }
.video-controls button { min-height:29px; border:0; color:#d0d0d0; }
.video-controls button:hover { background:#eee; color:#111; }
.video-controls span { overflow:hidden; font:9px/1.2 "Courier New",ui-monospace,monospace; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.video-shell:fullscreen { width:100vw; height:100vh; aspect-ratio:auto; }
.room-gate { display:grid; gap:18px; min-height:240px; padding:18px; align-content:center; }
.room-gate p { color:var(--muted); font-size:13px; line-height:1.5; }
.room-gate button { justify-self:start; }
#roomContent { position:relative; padding:12px; }
.participant-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.layout-collab .participant-grid.is-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.layout-collab .participant-grid.is-dense { grid-template-columns:repeat(3,minmax(0,1fr)); }
.participant-card { position:relative; display:grid; min-width:0; aspect-ratio:16/9; border:1px solid var(--rule); overflow:hidden; background:#111; color:#fff; }
.participant-card.is-speaking { border-color:var(--success); box-shadow:inset 0 0 0 1px var(--success); }
.participant-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scaleX(-1); }
.participant-card.remote video { transform:none; }
.participant-grid.effect-soft video,.room-participant-grid.effect-soft video { filter:brightness(1.08) contrast(.91) saturate(.96); }
.participant-grid.effect-disco video,.room-participant-grid.effect-disco video { animation:room-disco .65s steps(2,end) infinite; }
.participant-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#8f8f8f; font:400 clamp(22px,4vw,42px)/1 "Josefin Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.participant-meta { position:absolute; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:31px; padding:4px 7px; border-top:1px solid #393939; background:rgba(7,7,7,.9); font:9px/1.2 "Courier New",ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.participant-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.participant-flags { display:flex; flex:0 0 auto; align-items:center; gap:3px; }
.participant-flags button { display:grid; place-items:center; width:23px; min-width:23px; height:23px; min-height:23px; padding:0; border-color:#555; color:#bbb; }
.participant-flags button:hover:not(:disabled) { background:#eee; color:#111; }
.participant-flags button.is-active { border-color:#98545d; color:#e59aa3; }
.participant-flags button svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.participant-flags button .state-slash { display:none; }
.participant-flags button.is-active .state-slash { display:block; }
.layout-collab .participant-grid.is-compact .participant-meta { min-height:26px; padding:3px 5px; font-size:8px; }
.layout-collab .participant-grid.is-compact .participant-flags { gap:1px; }
.layout-collab .participant-grid.is-compact .participant-flags button { width:18px; min-width:18px; height:18px; min-height:18px; }
.layout-collab .participant-grid.is-compact .participant-flags button svg { width:10px; height:10px; }
.room-participants-body { display:grid; min-height:0; padding:12px; background:var(--field); }
.room-participant-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,auto); align-content:center; gap:8px; min-height:0; }
.room-participant-grid[data-count="1"] { grid-template-columns:1fr; grid-template-rows:auto; }
.room-participant-grid[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
.room-participant-grid[data-count="3"] .participant-card:nth-child(3) { grid-column:1 / -1; width:calc(50% - 4px); justify-self:center; }
.room-participant-grid[data-count="5"] .participant-card:nth-child(5) { grid-column:1 / -1; width:calc(50% - 4px); justify-self:center; }
.room-participant-grid[data-count="7"],.room-participant-grid[data-count="8"],.room-participant-grid[data-count="9"] { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,auto); }
.room-participants-empty { align-self:center; justify-self:center; max-width:360px; color:var(--muted); font:10px/1.5 "Courier New",ui-monospace,monospace; letter-spacing:.075em; text-align:center; text-transform:lowercase; }
.layout-room .participant-card video { object-fit:contain; transform:scale(-1.01,1.01); transform-origin:50% 50%; }
.layout-room .participant-card.remote video { transform:scale(1.01); }
.layout-room .collaboration-panel .participant-grid { grid-template-columns:1fr; }
.layout-room .collaboration-panel #roomContent {
  display:grid;
  grid-template-columns:minmax(220px,320px) minmax(0,1fr);
  grid-template-areas:"self effects" "controls effects" "message effects";
  align-items:start;
  gap:8px 12px;
}
.layout-room .collaboration-panel .participant-grid { grid-area:self; }
.layout-room .collaboration-panel .room-controls { grid-area:controls; margin-top:0; }
.layout-room .collaboration-panel .host-effects { grid-area:effects; margin-top:0; }
.layout-room .collaboration-panel .message { grid-area:message; margin-top:0; }
.layout-grade .collaboration-panel > .panel-head { min-height:46px; padding:7px 10px; }
.layout-grade .collaboration-panel > .panel-head h2 { margin-top:2px; font-size:17px; }
.layout-grade .room-gate { min-height:0; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px; }
.layout-grade .room-gate button { justify-self:end; }
.layout-grade .collaboration-panel #roomContent { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding:8px; }
.layout-grade .participant-grid { display:flex; grid-column:2; grid-row:1; min-width:0; overflow-x:auto; gap:6px; }
.layout-grade .participant-card { flex:0 0 142px; width:142px; }
.layout-grade .participant-meta { min-height:24px; padding:2px 5px; font-size:8px; }
.layout-grade .participant-flags { display:none; }
.layout-grade .room-controls { grid-column:1; grid-row:1; grid-template-columns:repeat(3,minmax(86px,1fr)); margin-top:0; }
.layout-grade .host-effects,.layout-grade .collaboration-panel .message { display:none!important; }
.room-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; margin-top:10px; }
.room-controls button { width:100%; padding-right:6px; padding-left:6px; }
.room-controls button.is-active { border-color:var(--accent); background:var(--accent); color:#171112; }
.room-controls .audio-resume { border-color:#9b5a62; color:#8b242f; }
.room-controls .audio-resume:hover:not(:disabled) { border-color:#8b242f; background:#8b242f; color:#fff; }
.room-fullscreen { display:none; }
.room-speaker-view { display:none; }
.layout-room .room-controls { grid-template-columns:repeat(4,minmax(0,1fr)); }
.layout-room .room-fullscreen { display:block; }
.studio-grid.layout-room:fullscreen,
.studio-grid.layout-room.is-chat-fullscreen,
body.chat-fullscreen-fallback .studio-grid.layout-room {
  --chat-footer-height:110px;
  width:100vw;
  height:100vh;
  max-width:none;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1fr) auto;
  gap:0;
  align-items:stretch;
  overflow:hidden;
  background:#050505;
}
body.chat-fullscreen-fallback { overflow:hidden; }
body.chat-fullscreen-fallback .studio-grid.layout-room {
  position:fixed;
  z-index:1000;
  inset:0;
}
.studio-grid.layout-room:fullscreen .room-participants-panel,
.studio-grid.layout-room.is-chat-fullscreen .room-participants-panel,
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participants-panel {
  grid-template-rows:minmax(0,1fr);
  min-height:0;
  border:0;
  background:#050505;
}
.studio-grid.layout-room:fullscreen .room-participants-panel > .panel-head,
.studio-grid.layout-room.is-chat-fullscreen .room-participants-panel > .panel-head,
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participants-panel > .panel-head {
  display:none;
}
.studio-grid.layout-room:fullscreen .room-participants-body,
.studio-grid.layout-room.is-chat-fullscreen .room-participants-body,
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participants-body {
  height:100%;
  padding:8px;
  overflow:hidden;
  background:#050505;
}
.studio-grid.layout-room:fullscreen .room-participant-grid,
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid,
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participant-grid {
  width:100%;
  height:100%;
  grid-template-rows:none;
  align-content:center;
  justify-content:center;
  gap:8px;
}
.studio-grid.layout-room:fullscreen .room-participant-grid.is-speaker-view,
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid.is-speaker-view,
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participant-grid.is-speaker-view {
  grid-template-columns:min(100%,calc(177.78vh - 224px))!important;
  grid-template-rows:auto!important;
}
.studio-grid.layout-room:fullscreen .room-participant-grid.is-speaker-view .participant-card:not(.is-speaker-featured),
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid.is-speaker-view .participant-card:not(.is-speaker-featured),
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participant-grid.is-speaker-view .participant-card:not(.is-speaker-featured) {
  display:none;
}
.studio-grid.layout-room:fullscreen .room-participant-grid.is-speaker-view .participant-card.is-speaker-featured,
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid.is-speaker-view .participant-card.is-speaker-featured,
body.chat-fullscreen-fallback .studio-grid.layout-room .room-participant-grid.is-speaker-view .participant-card.is-speaker-featured {
  grid-column:auto!important;
  width:100%!important;
  justify-self:stretch!important;
}
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="1"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="1"] {
  grid-template-columns:min(100%,calc(177.78vh - 224px));
}
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="2"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="2"] {
  grid-template-columns:repeat(2,minmax(0,min(calc((100vw - 24px)/2),calc(177.78vh - 224px))));
}
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="3"],
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="4"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="3"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="4"] {
  grid-template-columns:repeat(2,minmax(0,min(calc((100vw - 24px)/2),calc(88.89vh - 119px))));
}
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="5"],
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="6"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="5"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="6"] {
  grid-template-columns:repeat(3,minmax(0,min(calc((100vw - 32px)/3),calc(88.89vh - 119px))));
}
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="7"],
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="8"],
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="9"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="7"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="8"],
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="9"] {
  grid-template-columns:repeat(3,minmax(0,min(calc((100vw - 32px)/3),calc(59.26vh - 84px))));
}
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="3"] .participant-card:nth-child(3),
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="3"] .participant-card:nth-child(3),
.studio-grid.layout-room:fullscreen .room-participant-grid[data-count="5"] .participant-card:nth-child(5),
.studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="5"] .participant-card:nth-child(5) {
  grid-column:1 / -1;
  width:calc(50% - 4px);
  justify-self:center;
}
.studio-grid.layout-room:fullscreen .collaboration-panel,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel {
  --panel:#151515;
  --paper:#050505;
  --ink:#f4f4f1;
  --muted:#a5a59f;
  --rule:#4b4b47;
  --soft-rule:#30302d;
  --error:#d9828a;
  --success:#65dfa1;
  min-height:var(--chat-footer-height);
  border-width:1px 0 0;
  background:var(--panel);
  color:var(--ink);
}
.studio-grid.layout-room:fullscreen .collaboration-panel > .panel-head,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel > .panel-head,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel > .panel-head {
  display:none;
}
.studio-grid.layout-room:fullscreen .collaboration-panel #roomContent,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel #roomContent,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel #roomContent {
  display:grid;
  grid-template-columns:160px auto minmax(0,1fr);
  grid-template-areas:"self controls effects";
  align-items:center;
  gap:8px 10px;
  height:100%;
  padding:8px 12px;
}
.studio-grid.layout-room:fullscreen .collaboration-panel .participant-grid,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .participant-grid,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel .participant-grid {
  grid-area:self;
  align-self:center;
}
.studio-grid.layout-room:fullscreen .collaboration-panel .room-controls,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .room-controls,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel .room-controls {
  grid-area:controls;
  display:flex;
  align-self:center;
  width:auto;
  margin:0;
}
.studio-grid.layout-room:fullscreen .collaboration-panel .room-controls button,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .room-controls button,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel .room-controls button {
  flex:0 0 auto;
  width:auto;
  min-width:96px;
  min-height:32px;
  padding:6px 9px;
  font-size:9px;
}
.studio-grid.layout-room:fullscreen .collaboration-panel .room-speaker-view,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .room-speaker-view,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel .room-speaker-view {
  display:block;
}
.studio-grid.layout-room:fullscreen .collaboration-panel .host-effects,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .host-effects,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel .host-effects {
  grid-area:effects;
  align-self:center;
  justify-self:end;
  max-width:560px;
  margin:0;
}
.studio-grid.layout-room:fullscreen .collaboration-panel .message,
.studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .message,
body.chat-fullscreen-fallback .studio-grid.layout-room .collaboration-panel .message {
  display:none;
}
.host-effects { position:relative; z-index:7; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; width:100%; margin-top:6px; }
.host-effects button { width:100%; min-width:0; min-height:32px; padding:6px 3px; color:var(--ink); font-size:9px; line-height:1; }
.host-effects button.is-active { border-color:var(--accent); background:var(--accent); color:#241921; }
.participant-effect-layer { position:absolute; z-index:1; inset:0 0 31px; overflow:hidden; pointer-events:none; }
.effect-particle { position:absolute; display:block; pointer-events:none; }
.participant-effect-layer.effect-sparkles .effect-particle { width:2px; height:2px; border-radius:50%; background:#fffbe5; box-shadow:0 0 2px #fff,0 0 4px #efccea; animation:room-sparkle .68s ease-in-out infinite; }
.participant-effect-layer.effect-confetti .effect-particle { top:-12px; width:6px; height:10px; animation:room-confetti var(--duration) linear var(--delay) forwards; }
.participant-effect-layer.effect-party-hats { overflow:visible; }
.participant-effect-layer.effect-party-glasses { overflow:visible; }
.party-hat { position:absolute; top:20%; left:50%; width:24%; max-width:120px; min-width:25px; aspect-ratio:.92; opacity:0; transform:translate(-50%,-96%) rotate(var(--hat-angle,-5deg)); transform-origin:50% 100%; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); transition:left .13s linear,top .13s linear,width .13s linear,opacity .12s ease; }
.party-hat.is-tracked { opacity:1; animation:party-hat-bob .8s ease-in-out infinite alternate; }
.party-hat::before { content:""; position:absolute; inset:8% 0 0; clip-path:polygon(50% 0,100% 100%,0 100%); background:repeating-linear-gradient(135deg,#efccea 0 16%,#fff4a8 16% 32%,#69dfa2 32% 48%,#7fc8ff 48% 64%,#ff806f 64% 80%); }
.party-hat::after { content:""; position:absolute; top:0; left:50%; width:20%; aspect-ratio:1; border-radius:50%; background:#fff4a8; box-shadow:0 0 7px rgba(255,244,168,.8); transform:translate(-50%,-15%); }
.party-glasses { position:absolute; top:50%; left:50%; width:30%; min-width:38px; max-width:150px; aspect-ratio:2.25; opacity:0; transform:translate(-50%,-50%) rotate(var(--glasses-angle,0deg)); transform-origin:50% 50%; transition:left .11s linear,top .11s linear,width .11s linear,opacity .1s ease; filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.party-glasses.is-tracked { opacity:1; }
.party-glasses-lens { position:absolute; top:50%; width:43%; aspect-ratio:1; border:4px solid transparent; border-radius:50%; transform:translateY(-50%); background:linear-gradient(145deg,rgba(18,12,24,.94),var(--glasses-tint,rgba(239,204,234,.48))) padding-box,conic-gradient(var(--glasses-a,#efccea),var(--glasses-b,#fff4a8),var(--glasses-c,#69dfa2),var(--glasses-d,#7fc8ff),var(--glasses-a,#efccea)) border-box; box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),0 0 7px var(--glasses-a,#efccea); }
.party-glasses-lens.left { left:0; }
.party-glasses-lens.right { right:0; }
.party-glasses-bridge { position:absolute; z-index:-1; top:47%; left:39%; width:22%; height:5px; border-radius:5px; background:var(--glasses-a,#efccea); }
.party-glasses-feather { position:absolute; z-index:-1; top:-40%; width:11%; height:58%; border-radius:70% 8% 70% 8%; transform-origin:50% 100%; background:linear-gradient(90deg,var(--glasses-a,#efccea),var(--glasses-b,#ff806f)); box-shadow:7px 2px 0 -1px var(--glasses-c,#7fc8ff),13px 5px 0 -2px var(--glasses-d,#69dfa2); }
.party-glasses-feather.left { left:2%; transform:rotate(-30deg); }
.party-glasses-feather.right { right:2%; transform:scaleX(-1) rotate(-30deg); }
@keyframes room-sparkle { 0%,100% { opacity:.08; transform:scale(.35) rotate(0); } 50% { opacity:1; transform:scale(1.2) rotate(35deg); } }
@keyframes room-confetti { from { top:-12px; transform:translateX(0) rotate(0); } to { top:110%; transform:translateX(var(--drift)) rotate(720deg); } }
@keyframes room-disco { 0% { filter:hue-rotate(0deg) saturate(1.2); } 33% { filter:hue-rotate(105deg) saturate(1.8); } 66% { filter:hue-rotate(235deg) saturate(1.8); } 100% { filter:hue-rotate(360deg) saturate(1.2); } }
@keyframes party-hat-bob { from { transform:translate(-50%,-96%) rotate(var(--hat-angle,-5deg)); } to { transform:translate(-50%,calc(-96% - 2px)) rotate(var(--hat-angle,-5deg)); } }
.collaboration-panel .message { margin:9px 0 0; }
@media (max-width:900px) {
  .studio-grid.layout-collab { grid-template-columns:1fr; }
  .participant-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}
@media (max-width:680px) {
  #studioApp { width:calc(100% - 20px); padding-top:10px; }
  .site-header,.session-strip { align-items:flex-start; flex-direction:column; }
  .brand { display:grid; gap:5px; }
  .header-status { width:100%; flex-wrap:wrap; }
  .header-status button { width:100%; }
  .session-strip > div:first-child { flex-wrap:wrap; }
  .display-controls { width:100%; align-items:stretch; flex-direction:column; gap:8px; }
  .theme-switch,.layout-switch { width:100%; }
  .theme-switch { margin:0; padding:0 0 8px; border-right:0; border-bottom:1px solid var(--soft-rule); }
  .theme-switch button,.layout-switch button { flex:1; }
  .panel-head { align-items:flex-start; }
  .grade-panel .panel-head { flex-wrap:wrap; }
  .grade-head-status { width:100%; justify-content:space-between; }
  .grade-signal { flex-wrap:wrap; }
  .layout-room .collaboration-panel #roomContent { grid-template-columns:1fr; grid-template-areas:"self" "controls" "effects" "message"; }
  .layout-grade .collaboration-panel #roomContent { grid-template-columns:1fr; }
  .layout-grade .participant-grid { grid-column:1; grid-row:2; }
  .layout-grade .room-controls { grid-column:1; grid-row:1; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .room-participant-grid { grid-template-columns:1fr!important; grid-template-rows:none!important; }
  .room-participant-grid .participant-card { grid-column:auto!important; width:100%!important; }
  .participant-grid { grid-template-columns:1fr; }
  .host-effects { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .studio-grid.layout-room.is-chat-fullscreen,
  body.chat-fullscreen-fallback .studio-grid.layout-room { --chat-footer-height:126px; }
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="1"] { grid-template-columns:1fr!important; }
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="3"],
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="4"],
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="5"],
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="6"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="7"],
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="8"],
  .studio-grid.layout-room.is-chat-fullscreen .room-participant-grid[data-count="9"] { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  .studio-grid.layout-room.is-chat-fullscreen .collaboration-panel #roomContent {
    grid-template-columns:112px minmax(0,1fr);
    grid-template-areas:"self controls";
    gap:8px;
    padding:8px;
  }
  .studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .room-controls {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .room-controls button {
    width:100%;
    min-width:0;
  }
  .studio-grid.layout-room.is-chat-fullscreen .collaboration-panel .host-effects { display:none!important; }
}