:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --noysey-ease: cubic-bezier(.2,.86,.22,1);
  --noysey-ease-out: cubic-bezier(.16,1,.3,1);
  --noysey-motion-fast: 160ms;
  --noysey-motion-med: 280ms;
  --noysey-blue: #0b49d8;
  --noysey-blue-2: #2463f6;
  --noysey-blue-3: #062f9f;
  --noysey-navy: #06142f;
  --noysey-ink: #07111f;
  --noysey-ice: #f8fbff;
  --noysey-paper:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 0 15%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(255,255,255,.18) 35% 36%, transparent 37%),
    radial-gradient(circle at 20% 78%, rgba(47,115,255,.36), transparent 0 24%),
    linear-gradient(145deg, #050b16, #0a2f84);
  --noysey-video-paper:
    linear-gradient(0deg, rgba(2,6,16,.9), rgba(2,6,16,.18) 42%, rgba(255,255,255,.06)),
    var(--noysey-paper);
  color: #07111f;
  background: #f7faff;
}

* { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100dvh;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 42%, #e9f1ff 100%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform var(--noysey-motion-fast) var(--noysey-ease),
    filter var(--noysey-motion-fast) ease,
    background var(--noysey-motion-med) ease,
    border-color var(--noysey-motion-med) ease,
    box-shadow var(--noysey-motion-med) ease,
    color var(--noysey-motion-med) ease,
    opacity var(--noysey-motion-med) ease;
}

button:active {
  transform: scale(.975);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: var(--noysey-ease-out);
}

.app {
  width: min(1180px, 100%);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
  --appearance-shell-bg: #06142f;
  --appearance-home-bg:
    radial-gradient(circle at 78% -8%, rgba(68, 119, 255, .2), transparent 0 25%),
    radial-gradient(circle at 6% 22%, rgba(255, 255, 255, .06), transparent 0 19%),
    linear-gradient(180deg, #0a2c6d 0%, #06183a 48%, #02050d 100%);
  --appearance-text: #fff;
  --appearance-muted: rgba(255,255,255,.66);
  --appearance-soft: rgba(255,255,255,.1);
  --appearance-soft-strong: rgba(255,255,255,.16);
  --appearance-line: rgba(255,255,255,.1);
  --appearance-menu-icon: #fff;
  --appearance-card-bg: #0b1d45;
  --appearance-card-line: rgba(166, 194, 255, .28);
  --appearance-card-glow: rgba(20, 78, 210, .34);
  --appearance-card-lift: rgba(0,0,0,.44);
  --appearance-tile-text: #fff;
  --appearance-tile-muted: rgba(255,255,255,.82);
  --appearance-secondary-bg:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    rgba(12,28,61,.76);
  --appearance-secondary-text: rgba(255,255,255,.82);
  --appearance-recent-pill-bg: rgba(10,132,255,.18);
  --appearance-recent-pill-text: #77b9ff;
  --appearance-shadow: rgba(0,0,0,.42);
}

.app[data-appearance="white"] {
  --appearance-shell-bg: #f7faff;
  --appearance-home-bg:
    radial-gradient(circle at 74% -6%, rgba(7, 87, 255, .14), transparent 0 27%),
    radial-gradient(circle at 10% 24%, rgba(7, 87, 255, .08), transparent 0 20%),
    linear-gradient(180deg, #ffffff 0%, #f4f8ff 44%, #e8f0ff 100%);
  --appearance-text: #07111f;
  --appearance-muted: rgba(7,17,31,.6);
  --appearance-soft: rgba(7,17,31,.06);
  --appearance-soft-strong: rgba(7,17,31,.11);
  --appearance-line: rgba(7,17,31,.08);
  --appearance-menu-icon: #07111f;
  --appearance-card-bg: #ffffff;
  --appearance-card-line: rgba(16, 52, 126, .14);
  --appearance-card-glow: rgba(20,48,96,.12);
  --appearance-card-lift: rgba(20,48,96,.14);
  --appearance-tile-text: #fff;
  --appearance-tile-muted: rgba(255,255,255,.84);
  --appearance-secondary-bg:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,240,255,.86));
  --appearance-secondary-text: #0b2c75;
  --appearance-recent-pill-bg: rgba(7,87,255,.1);
  --appearance-recent-pill-text: #0757ff;
  --appearance-shadow: rgba(20, 48, 96, .16);
}

.app[data-appearance="black"] {
  --appearance-shell-bg: #000;
  --appearance-home-bg:
    radial-gradient(circle at 76% -8%, rgba(31, 94, 255, .14), transparent 0 25%),
    radial-gradient(circle at 2% 26%, rgba(255, 255, 255, .05), transparent 0 18%),
    #000;
  --appearance-text: #fff;
  --appearance-muted: rgba(255,255,255,.62);
  --appearance-soft: rgba(255,255,255,.1);
  --appearance-soft-strong: rgba(255,255,255,.14);
  --appearance-line: rgba(255,255,255,.1);
  --appearance-menu-icon: #fff;
  --appearance-card-bg: #111;
  --appearance-card-line: rgba(100,141,255,.18);
  --appearance-card-glow: rgba(7,87,255,.16);
  --appearance-card-lift: rgba(0,0,0,.42);
  --appearance-tile-text: #fff;
  --appearance-tile-muted: rgba(255,255,255,.82);
  --appearance-secondary-bg:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    rgba(12,28,61,.76);
  --appearance-secondary-text: rgba(255,255,255,.82);
  --appearance-recent-pill-bg: rgba(10,132,255,.18);
  --appearance-recent-pill-text: #77b9ff;
  --appearance-shadow: rgba(0,0,0,.42);
}

.topbar,
.bottom-nav,
.device-notification,
.hero,
.incoming-card,
.call-stage,
.messages-panel,
.chat-panel,
.room-feed,
.invite-panel,
.games-panel,
.analytics-panel {
  border: 1px solid rgba(22, 45, 84, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 58px rgba(20, 48, 96, 0.08);
}

.topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 116px 1fr 116px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 30px;
}

.device-notification {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 50;
  width: min(520px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 22px 70px rgba(7, 17, 31, 0.18);
  transform: translateX(-50%);
}

.device-notification.is-hidden {
  display: none;
}

.device-notification > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #0757ff, #003fdb);
  color: #fff;
  font-weight: 950;
}

.device-notification small,
.device-notification b,
.device-notification em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-notification small {
  color: #0757ff;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.device-notification b {
  color: #07111f;
  font-size: 0.9rem;
}

.device-notification em {
  color: #728197;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 850;
}

.device-notification nav {
  display: flex;
  gap: 6px;
}

.device-notification button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 87, 255, 0.1);
  color: #0757ff;
  font-size: 0.7rem;
  font-weight: 950;
}

.device-notification button:first-child {
  background: #0757ff;
  color: #fff;
}

.topbar img {
  width: 220px;
  max-width: 100%;
  justify-self: center;
}

.topbar button,
.section-head button,
.call-title button {
  min-height: 42px;
  border: 1px solid rgba(22, 45, 84, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #07111f;
  font-size: 0.82rem;
  font-weight: 900;
}

.screens {
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.screen {
  min-height: 0;
  display: none;
  gap: 14px;
  overflow: auto;
  padding: 0 2px 4px;
  transform-origin: center bottom;
}

.screen.is-active {
  display: grid;
  animation: screen-settle var(--noysey-motion-med) var(--noysey-ease-out) both;
}

.app.is-screen-settling .screen.is-active {
  will-change: opacity, transform, filter;
}

@keyframes screen-settle {
  from {
    opacity: .001;
    filter: blur(10px);
    transform: translate3d(0, 12px, 0) scale(.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.app[data-screen="call"],
.app[data-screen="incoming"],
.app[data-screen="guest-join"] {
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 0;
  background: #07111f;
}

.app[data-screen="entry"],
.app[data-screen="auth"] {
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 0;
  background: #03050a;
}

.app[data-screen="call"] .topbar,
.app[data-screen="call"] .bottom-nav,
.app[data-screen="incoming"] .topbar,
.app[data-screen="incoming"] .bottom-nav,
.app[data-screen="guest-join"] .topbar,
.app[data-screen="guest-join"] .bottom-nav {
  display: none;
}

.app[data-screen="entry"] .topbar,
.app[data-screen="entry"] .bottom-nav,
.app[data-screen="auth"] .topbar,
.app[data-screen="auth"] .bottom-nav {
  display: none;
}

.app[data-screen="analytics"] .bottom-nav {
  display: none;
}

.app[data-screen="call"] .screens,
.app[data-screen="incoming"] .screens,
.app[data-screen="guest-join"] .screens,
.app[data-screen="entry"] .screens,
.app[data-screen="auth"] .screens,
.app[data-screen="call"] .screen.call,
.app[data-screen="incoming"] .screen.incoming-screen,
.app[data-screen="guest-join"] .screen.guest-join-screen,
.app[data-screen="entry"] .screen.entry-screen,
.app[data-screen="auth"] .screen.auth-screen {
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}

.recents {
  display: grid;
  gap: 10px;
}

.recent-list {
  display: grid;
}

.recent-list button {
  min-height: 76px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar title action"
    "avatar meta action";
  align-items: center;
  gap: 2px 12px;
  border: 0;
  border-top: 1px solid rgba(22,45,84,.1);
  background: transparent;
  color: #07111f;
  text-align: left;
}

.recent-list span {
  grid-area: avatar;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #07111f;
  color: #fff;
  font-weight: 950;
}

.recent-list b {
  grid-area: title;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.recent-list em {
  grid-area: meta;
  color: #728197;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}

.recent-list small {
  grid-area: action;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(7,87,255,.1);
  color: #0757ff;
  font-size: .66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.import-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 22px;
  background: rgba(7,87,255,.06);
}

.import-card b {
  color: #07111f;
  font-size: .95rem;
}

.import-card button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: #0757ff;
  color: #fff;
  font-weight: 950;
}

.hero {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: min(470px, calc(100dvh - 236px));
  padding: 18px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 18%, rgba(7, 87, 255, 0.12), transparent 0 22%, rgba(255,255,255,.88) 23% 44%, transparent 45%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,244,255,.96));
}

.room-card {
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(7,87,255,.12);
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.room-card-head {
  min-height: 62px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.room-card-head > span,
.room-card-head > b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #0757ff, #003fdb);
  color: #fff;
  font-weight: 950;
}

.room-card-head > b {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #07111f;
  font-size: 0.9rem;
}

.room-grid {
  width: 100%;
  min-height: 178px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-self: center;
}

.tile {
  position: relative;
  min-height: 74px;
  display: grid;
  align-content: end;
  padding: 10px 12px;
  border-radius: 22px;
  background:
    linear-gradient(0deg, rgba(3,9,22,.7), rgba(3,9,22,.04)),
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.18), transparent 0 24%, rgba(255,255,255,.06) 25% 48%, transparent 49%),
    linear-gradient(145deg, #08172d, #0d347f 54%, #061329);
  color: #fff;
  overflow: hidden;
}

.tile.is-you {
  background:
    linear-gradient(0deg, rgba(3,9,22,.48), rgba(3,9,22,.02)),
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.25), transparent 0 24%, rgba(255,255,255,.07) 25% 48%, transparent 49%),
    linear-gradient(145deg, #0757ff, #004cff 58%, #0036c9);
}

.tile span {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
}

.tile b { font-size: .9rem; }

.tile em {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(255,255,255,.78);
  font-size: .58rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  color: #5b6b82;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  color: #07111f;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.3rem, 8vw, 4rem);
  line-height: .94;
}

h2 {
  font-size: clamp(1.45rem, 4vw, 2.2rem);
}

p {
  margin: 0;
  color: #44546a;
  font-size: .98rem;
  font-weight: 760;
  line-height: 1.35;
}

.room-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.room-meta span {
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #44546a;
  font-size: 0.72rem;
  font-weight: 900;
}

.auth-screen {
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    linear-gradient(0deg, rgba(3,5,10,.38), rgba(3,5,10,.04)),
    var(--noysey-paper);
}

.auth-panel {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(22px);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #07111f;
  font-size: 1.35rem;
  font-weight: 950;
}

.auth-brand img {
  width: 34px;
  height: 34px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(7,87,255,.08);
}

.auth-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #65758b;
  font-weight: 950;
}

.auth-tabs button.is-active {
  background: #0757ff;
  color: #fff;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form label {
  display: grid;
  gap: 6px;
}

.auth-form label span {
  color: #65758b;
  font-size: .76rem;
  font-weight: 900;
}

.auth-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 16px;
  padding: 0 12px;
  background: #fff;
  color: #07111f;
  font: inherit;
  font-weight: 850;
  box-sizing: border-box;
}

.auth-form output {
  min-height: 38px;
  display: block;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(7,87,255,.08);
  color: #42526a;
  font-size: .78rem;
  font-weight: 850;
}

.auth-back {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #65758b;
  font-weight: 950;
}

.primary-actions {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}

.primary,
.secondary {
  min-height: 54px;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 950;
}

.primary {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(135deg, var(--noysey-blue-2), var(--noysey-blue) 46%, var(--noysey-blue-3));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px rgba(7,87,255,.22);
}

.secondary {
  border: 1px solid rgba(22, 45, 84, 0.12);
  background: rgba(255,255,255,.86);
  color: #07111f;
}

#room-status {
  display: none;
}

.group-row span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #0757ff, #003fdb);
  color: #fff;
  font-weight: 950;
}

.chat-panel,
.messages-panel,
.room-feed,
.invite-panel,
.games-panel,
.analytics-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 28px;
}

.section-head,
.call-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chat-head > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 7px;
}

.chat-back {
  display: none;
}

.chat-head > div button:first-child,
.chat-head > div button:nth-child(2) {
  background: #0757ff;
  color: #fff;
}

.group-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.group-row button {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  grid-template-areas: "avatar title" "avatar meta" "avatar action";
  gap: 3px 10px;
  align-items: center;
  min-height: 96px;
  padding: 11px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  text-align: left;
}

.group-row span { grid-area: avatar; }
.group-row b { grid-area: title; }
.group-row em {
  grid-area: meta;
  color: #728197;
  font-size: .74rem;
  font-style: normal;
  font-weight: 850;
}
.group-row small {
  grid-area: action;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(7,87,255,.1);
  color: #0757ff;
  font-size: .62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.incoming-screen {
  position: relative;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .02) 38%, rgba(0, 0, 0, .34)),
    var(--noysey-paper);
  background-size: cover;
}

.incoming-screen::before {
  content: "";
  position: absolute;
  inset: -26px;
  background: inherit;
  filter: blur(16px);
  transform: scale(1.04);
}

.incoming-card {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(14px, 3dvh, 24px);
  padding: max(74px, calc(env(safe-area-inset-top) + 54px)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 34%, rgba(0,0,0,.38));
  box-shadow: none;
  color: #fff;
}

.incoming-card > *:not(.incoming-self-preview) {
  position: relative;
  z-index: 2;
}

.caller {
  align-self: start;
  justify-self: center;
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.caller > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(7, 17, 31, .52);
  color: #fff;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
}

.caller p,
.caller h2,
.caller em {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.34);
}

.caller p {
  font-size: clamp(1rem, 3.6vw, 1.28rem);
  font-weight: 850;
}

.caller h2 {
  font-size: clamp(2.1rem, 9vw, 4.2rem);
  line-height: .96;
}

.caller em {
  font-style: normal;
  font-weight: 800;
  opacity: .82;
}

.incoming-self-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: end;
  justify-items: start;
  padding: max(74px, calc(env(safe-area-inset-top) + 54px)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background:
    linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.08) 42%, rgba(0,0,0,.36)),
    var(--noysey-video-paper);
  overflow: hidden;
}

.incoming-self-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 24%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.48) 100%),
    linear-gradient(0deg, rgba(0,0,0,.76), rgba(0,0,0,.32) 42%, rgba(0,0,0,.64));
  pointer-events: none;
}

.incoming-self-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .01;
  filter: saturate(.78) brightness(.52);
  transition: opacity .18s ease;
}

.incoming-self-preview.has-live-video video {
  opacity: 1;
}

.incoming-self-preview span,
.incoming-self-preview b {
  display: none;
}

.incoming-self-preview span {
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.incoming-self-preview b {
  font-size: .95rem;
}

.incoming-self-preview button {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 12px));
  right: max(18px, env(safe-area-inset-right));
  z-index: 3;
  width: 58px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(7,17,31,.45);
  color: #fff;
  font-size: .68rem;
  font-weight: 950;
  backdrop-filter: blur(18px);
}

.self-preview nav,
.call-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.call-controls button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  font-weight: 900;
}

.call-controls button.is-on {
  background: #0757ff;
  color: #fff;
  box-shadow: 0 14px 34px rgba(7,87,255,.32);
}

.video-grid article.is-local.is-off {
  background: var(--noysey-video-paper);
}

.video-grid article.is-local.is-muted span::after,
.video-grid article.is-host-muted span::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  background: #ff3b30;
}

.people-summary {
  align-self: end;
  justify-self: center;
  width: min(330px, 100%);
  display: grid;
  gap: 6px;
}

.people-summary p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(7,17,31,.36);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter: blur(18px);
}

.people-summary b {
  color: rgba(255,255,255,.72);
  font-size: .66rem;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.people-summary span {
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incoming-quick-actions {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 10px;
  width: min(300px, 100%);
}

.incoming-quick-actions button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(7,17,31,.42);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}

.incoming-quick-actions button::before {
  content: none;
  display: none;
}

.incoming-decision-actions {
  justify-self: center;
  width: min(270px, 100%);
  display: grid;
  grid-template-columns: repeat(2, 82px);
  justify-content: space-between;
  align-items: center;
}

.incoming-decision-actions button {
  width: 82px;
  height: 82px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: .78rem;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 42px rgba(0,0,0,.28);
}

.answer-call {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, var(--noysey-blue-2), var(--noysey-blue));
  box-shadow: 0 14px 34px rgba(7,87,255,.28);
}

.decline-call {
  background: #ff3b30;
}

.call {
  position: relative;
  align-content: stretch;
  background: #07111f;
}

.call-title {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  z-index: 8;
  padding: 0;
  color: #fff;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease;
}

.screen.call:has(.call-stage.show-controls) .call-title {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.call-title .call-roster-button {
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 28px) auto;
  grid-template-areas:
    "a b c title"
    "a b c meta";
  align-items: center;
  gap: 0 9px;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(18px);
}

.call-title .call-roster-button span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: #0757ff;
  color: #fff;
  font-size: .58rem;
  font-weight: 950;
}

.call-title .call-roster-button span:first-child { margin-left: 0; }
.call-title .call-roster-button span:nth-child(1) { grid-area: a; }
.call-title .call-roster-button span:nth-child(2) { grid-area: b; }
.call-title .call-roster-button span:nth-child(3) { grid-area: c; }

.call-title .call-roster-button b,
.call-title .call-roster-button em {
  display: block;
  margin: 0;
  color: rgba(255,255,255,.74);
  text-align: left;
}

.call-title .call-roster-button b {
  grid-area: title;
  color: #fff;
  font-size: .84rem;
  font-weight: 950;
  line-height: 1;
}

.call-title .call-roster-button em {
  grid-area: meta;
  font-size: .7rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
}

.call-stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  gap: 0;
  min-height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #07111f;
  box-shadow: none;
  overflow: hidden;
}

.view-rail {
  position: absolute;
  top: max(94px, calc(env(safe-area-inset-top) + 84px));
  left: 50%;
  z-index: 8;
  width: fit-content;
  justify-self: center;
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(22,45,84,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.call-layout-picker {
  display: none;
}

.view-rail {
  top: auto;
  bottom: max(102px, calc(env(safe-area-inset-bottom) + 88px));
  max-width: min(560px, calc(100vw - 24px));
  overflow-x: auto;
}

.view-rail button {
  min-width: 42px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #728197;
  font-weight: 950;
}

.view-rail button {
  min-width: max-content;
  padding: 0 13px;
}

.view-rail button.is-active {
  background: #0757ff;
  color: #fff;
}

.health {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
  z-index: 7;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(7,17,31,.62);
  backdrop-filter: blur(18px);
  color: #fff;
}

.health span,
.health em {
  color: rgba(255,255,255,.72);
  font-style: normal;
  font-size: .75rem;
  font-weight: 900;
}

.health b {
  color: #fff;
}

.video-grid {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(circle at 50% 12%, rgba(7, 87, 255, .18), transparent 0 30%),
    linear-gradient(145deg, #02050a, #07111f 52%, #010204);
  overflow: hidden;
  box-sizing: border-box;
}

.daily-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: #02050a;
  color: #fff;
}

.daily-layer.is-hidden {
  display: none;
}

.daily-mount,
.daily-mount iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.daily-layer aside {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px));
  z-index: 2;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(7,17,31,.64);
  box-shadow: 0 22px 58px rgba(0,0,0,.34);
  backdrop-filter: blur(20px);
}

.daily-layer aside b {
  font-size: .88rem;
}

.daily-layer aside em {
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-style: normal;
  font-weight: 760;
}

.daily-layer > button {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 3;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #07111f;
  font-weight: 950;
}

.call-stage.show-controls .video-grid {
  padding-bottom: 74px;
}

.call-stage[data-view="focus"].show-controls .video-grid,
.call-stage[data-view="share"].show-controls .video-grid,
.call-stage[data-view="game"].show-controls .video-grid {
  padding-bottom: 0;
}

.call-stage[data-call-count="1"] .video-grid {
  grid-template-columns: minmax(0, 1fr);
}

.call-stage[data-call-count="1"] .video-grid article {
  min-height: 100dvh;
}

.call-stage[data-remote-count="1"] .video-grid {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

.call-stage[data-remote-count="1"] .video-grid article {
  min-height: 100dvh;
}

.call-stage[data-remote-count="2"] .video-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.call-stage[data-remote-count="3"] .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1.05fr .95fr;
}

.call-stage[data-remote-count="3"] .video-grid article[data-grid-index="1"] {
  grid-column: 1 / -1;
}

.call-stage[data-remote-count="4"] .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.call-stage[data-remote-count="5"] .video-grid,
.call-stage[data-remote-count="6"] .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.call-stage[data-remote-count="5"] .video-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.call-stage[data-remote-count="5"] .video-grid article {
  grid-column: span 2;
}

.call-stage[data-remote-count="5"] .video-grid article[data-grid-index="1"],
.call-stage[data-remote-count="5"] .video-grid article[data-grid-index="2"] {
  grid-column: span 3;
}

.call-stage[data-remote-count="7"] .video-grid,
.call-stage[data-remote-count="8"] .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.call-stage[data-remote-count="7"] .video-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.call-stage[data-remote-count="7"] .video-grid article {
  grid-column: span 2;
}

.call-stage[data-remote-count="7"] .video-grid article[data-grid-index="1"],
.call-stage[data-remote-count="7"] .video-grid article[data-grid-index="2"],
.call-stage[data-remote-count="7"] .video-grid article[data-grid-index="3"],
.call-stage[data-remote-count="7"] .video-grid article[data-grid-index="4"] {
  grid-column: span 3;
}

.call-stage[data-remote-count="9"] .video-grid,
.call-stage[data-remote-count="10"] .video-grid,
.call-stage[data-remote-count="11"] .video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.call-stage[data-remote-count="10"] .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.call-stage[data-remote-count="11"] .video-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.call-stage[data-remote-count="11"] .video-grid article {
  grid-column: span 2;
}

.call-stage[data-remote-count="11"] .video-grid article[data-grid-index="10"],
.call-stage[data-remote-count="11"] .video-grid article[data-grid-index="11"] {
  grid-column: span 3;
}

.call-stage:not([data-call-count="1"]):not([data-view="focus"]):not([data-view="share"]):not([data-view="game"]):not([data-view="pin"]) .video-grid article[data-person="you"] {
  position: absolute;
  left: var(--pip-x, auto);
  right: var(--pip-right, max(16px, env(safe-area-inset-right)));
  top: var(--pip-y, max(78px, calc(env(safe-area-inset-top) + 68px)));
  bottom: auto;
  z-index: 9;
  width: clamp(82px, 22vw, 128px);
  height: clamp(122px, 22dvh, 196px);
  min-height: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.call-stage:not([data-call-count="1"]):not([data-view="focus"]):not([data-view="share"]):not([data-view="game"]):not([data-view="pin"]) .video-grid article[data-person="you"].is-dragging {
  cursor: grabbing;
  box-shadow: 0 32px 76px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.32);
}

.call-stage:not([data-call-count="1"]):not([data-view="focus"]):not([data-view="share"]):not([data-view="game"]):not([data-view="pin"]) .video-grid article[data-person="you"] b {
  max-width: 100%;
  overflow: hidden;
  font-size: .78rem;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.call-stage:not([data-call-count="1"]):not([data-view="focus"]):not([data-view="share"]):not([data-view="game"]):not([data-view="pin"]) .video-grid article[data-person="you"] em {
  display: none;
}

.call-stage[data-view="focus"] .video-grid,
.call-stage[data-view="share"] .video-grid,
.call-stage[data-view="game"] .video-grid {
  position: relative;
  display: block;
}

.call-stage[data-view="focus"] .video-grid article,
.call-stage[data-view="share"] .video-grid article,
.call-stage[data-view="game"] .video-grid article {
  position: absolute;
  inset: 0;
  min-height: 100dvh;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity .18s ease, transform .18s ease;
}

.call-stage[data-view="focus"] .video-grid article.is-featured,
.call-stage[data-view="share"] .video-grid article.share-view,
.call-stage[data-view="game"] .video-grid article.game-view {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.call-stage[data-view="focus"].show-controls .video-grid article.is-featured {
  padding-bottom: max(122px, calc(env(safe-area-inset-bottom) + 106px));
}

.call-stage[data-view="focus"] .video-grid article[data-person="you"]:not(.is-featured) {
  inset: auto auto max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  width: clamp(112px, 23vw, 152px);
  height: clamp(188px, 30vh, 264px);
  min-height: 0;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  box-shadow: 0 22px 54px rgba(0,0,0,.36);
}

.call-stage[data-view="share"] .video-grid article[data-person="you"] {
  inset: auto auto max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  width: clamp(112px, 23vw, 152px);
  height: clamp(188px, 30vh, 264px);
  min-height: 0;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  box-shadow: 0 22px 54px rgba(0,0,0,.36);
}

.call-stage[data-view="game"] .video-grid article[data-person="you"] {
  inset: auto auto max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  width: clamp(112px, 23vw, 152px);
  height: clamp(188px, 30vh, 264px);
  min-height: 0;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  box-shadow: 0 22px 54px rgba(0,0,0,.36);
}

.call-stage[data-view="pin"] .video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.call-stage[data-view="pin"][data-pin-count="1"] .video-grid {
  grid-template-columns: minmax(0, 1fr);
}

.call-stage[data-view="pin"][data-pin-count="2"] .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.call-stage[data-view="pin"][data-pin-count="3"] .video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.call-stage[data-view="pin"][data-pin-count="4"] .video-grid,
.call-stage[data-view="pin"][data-pin-count="5"] .video-grid,
.call-stage[data-view="pin"][data-pin-count="6"] .video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.call-stage[data-view="pin"] .video-grid article:not(.is-pinned) {
  display: none;
}

.call-stage[data-view="pin"] .video-grid article.is-pinned {
  grid-column: auto;
  min-height: 210px;
}

.call-stage[data-view="pin"][data-pin-count="1"] .video-grid article.is-pinned {
  min-height: 100dvh;
}

.call-stage[data-view="pin"].show-controls .video-grid article.is-pinned::after {
  content: "Pinned";
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #07111f;
  font-size: .66rem;
  font-weight: 950;
}

.video-grid article {
  min-height: 0;
  position: relative;
  display: grid;
  align-content: end;
  padding: clamp(10px, 3vw, 22px);
  border-radius: 0;
  background: var(--noysey-video-paper);
  color: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -90px 130px rgba(0,0,0,.34);
}

.video-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.2) 39% 40%, transparent 41% 100%),
    radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.2), transparent 0 32%),
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 16% 72%, rgba(0,0,0,.5));
  opacity: .76;
  pointer-events: none;
}

.video-grid article[data-orientation="portrait"]::before {
  inset: 0;
}

.video-grid article[data-orientation="landscape"]::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(0deg, rgba(2,6,16,.5), rgba(2,6,16,.18)),
    linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.16) 39% 40%, transparent 41% 100%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.16), transparent 0 32%);
}

.video-grid article[data-orientation="landscape"]::after {
  opacity: .1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(0deg, transparent 0 30%, rgba(4,13,31,.5) 31% 36%, rgba(255,255,255,.09) 37% 63%, rgba(4,13,31,.5) 64% 69%, transparent 70% 100%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
}

.video-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 1.5px);
  background-size: 36px 36px, 36px 36px, 12px 12px;
  opacity: .07;
  pointer-events: none;
}

.video-grid video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .18s ease;
  pointer-events: none;
}

.video-grid article.has-live-video video {
  opacity: 1;
}

.video-grid article.has-live-video::before {
  opacity: .22;
}

.video-grid article.has-live-video::after {
  opacity: .02;
}

.video-grid article.is-off video {
  opacity: 0;
}

.video-grid article[data-orientation="landscape"]::after {
  opacity: .1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(0deg, transparent 0 30%, rgba(4,13,31,.5) 31% 36%, rgba(255,255,255,.09) 37% 63%, rgba(4,13,31,.5) 64% 69%, transparent 70% 100%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
}

.video-grid article:nth-child(2) {
  background: var(--noysey-video-paper);
}

.video-grid article:nth-child(3) {
  background: var(--noysey-video-paper);
}

.video-grid article:nth-child(4),
.video-grid article:nth-child(5),
.video-grid article:nth-child(6) {
  background: var(--noysey-video-paper);
}

.video-grid article:nth-child(7),
.video-grid article:nth-child(8),
.video-grid article:nth-child(9) {
  background: var(--noysey-video-paper);
}

.video-grid article:nth-child(10),
.video-grid article:nth-child(11),
.video-grid article:nth-child(12) {
  background: var(--noysey-video-paper);
}

.video-grid article.is-local {
  background: var(--noysey-video-paper);
}

.video-grid article.share-view {
  background:
    linear-gradient(0deg, rgba(7,17,31,.62), rgba(7,17,31,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 72px),
    linear-gradient(135deg, #07111f, #153a89 58%, #050a14);
}

.video-grid article.game-view {
  align-content: stretch;
  justify-items: stretch;
  gap: 16px;
  padding: max(82px, calc(env(safe-area-inset-top) + 64px)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    linear-gradient(0deg, rgba(7,17,31,.68), rgba(7,17,31,.18)),
    radial-gradient(circle at 50% 44%, rgba(7,87,255,.38), transparent 0 18%, rgba(255,255,255,.08) 19% 38%, transparent 39%),
    linear-gradient(135deg, #07111f, #102247 46%, #060b16);
}

.video-grid article.game-view > span {
  position: static;
  align-self: start;
}

.video-grid article.game-view > b,
.video-grid article.game-view > em {
  align-self: start;
}

.table-preview {
  align-self: stretch;
  min-height: min(52dvh, 430px);
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 22px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}

.table-preview i,
.table-preview strong {
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  font-style: normal;
  font-weight: 950;
}

.table-preview i {
  min-height: 58px;
  background: rgba(7,87,255,.72);
}

.table-preview i:first-child {
  grid-column: 2;
}

.table-preview i:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.table-preview strong {
  grid-column: 2;
  grid-row: 2;
  background: rgba(255,255,255,.9);
  color: #07111f;
}

.table-preview i:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.table-preview i:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
}

.video-grid article span {
  position: absolute;
  z-index: 2;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #0757ff;
  font-weight: 950;
  transition: opacity .16s ease;
}

.video-grid article.game-view > span {
  position: static;
  top: auto;
  left: auto;
}

.video-grid article button {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(7,17,31,.46);
  color: #fff;
  font-size: .68rem;
  font-weight: 950;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.call-stage.show-controls .video-grid article button,
.video-grid article.is-host-muted button {
  opacity: 1;
  pointer-events: auto;
}

.video-grid article.is-host-muted {
  background:
    linear-gradient(0deg, rgba(7,17,31,.42), rgba(7,17,31,.42)),
    radial-gradient(circle at 55% 30%, rgba(255,255,255,.12), transparent 0 22%, rgba(255,255,255,.04) 23% 42%, transparent 43%),
    linear-gradient(145deg, #08172d, #123a88);
}

.video-grid article em {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.72);
  font-style: normal;
  font-weight: 850;
  transition: opacity .16s ease;
}

.video-grid article b {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 18px rgba(0,0,0,.36);
  transition: opacity .16s ease;
}

.call-stage:not(.show-controls) .video-grid article > span,
.call-stage:not(.show-controls) .video-grid article > b,
.call-stage:not(.show-controls) .video-grid article > em,
.call-stage:not(.show-controls) .video-grid article > button {
  opacity: 0;
  pointer-events: none;
}

.call-stage[data-view="share"] .video-grid article.share-view > span,
.call-stage[data-view="share"] .video-grid article.share-view > b,
.call-stage[data-view="share"] .video-grid article.share-view > em,
.call-stage[data-view="game"] .video-grid article.game-view > span,
.call-stage[data-view="game"] .video-grid article.game-view > b,
.call-stage[data-view="game"] .video-grid article.game-view > em {
  opacity: 1;
  pointer-events: auto;
}

.waiting-strip {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(164px, calc(env(safe-area-inset-bottom) + 148px));
  z-index: 7;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  text-align: center;
  backdrop-filter: blur(18px);
}

.waiting-strip b {
  color: #07111f;
  font-size: .9rem;
}

.waiting-strip span {
  color: #728197;
  font-size: .78rem;
  font-weight: 850;
}

.call-controls {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 8;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(7,17,31,.58);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .16s ease, transform .16s ease;
}

.call-stage.show-controls .call-controls,
.call-stage.show-controls .view-rail {
  opacity: 1;
  pointer-events: auto;
}

.call-stage.show-controls .call-controls {
  transform: translateY(0);
}

.call-stage.show-controls .view-rail {
  transform: translateY(0) translateX(-50%);
}

.call-stage.sheet-open .call-controls,
.call-stage.sheet-open .view-rail {
  opacity: 0;
  pointer-events: none;
}

.call-stage.sheet-open .call-controls {
  transform: translateY(12px);
}

.call-stage.sheet-open .view-rail {
  transform: translateY(12px) translateX(-50%);
}

.call-stage.sheet-open .call-sheet {
  bottom: max(18px, env(safe-area-inset-bottom));
}

.health,
.waiting-strip,
.call-stage:not(.show-controls) .health,
.call-stage:not(.show-controls) .waiting-strip,
.call-stage:not(.show-controls) .view-rail {
  opacity: 0;
  pointer-events: none;
}

.call-sheet {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(110px, calc(env(safe-area-inset-bottom) + 96px));
  z-index: 12;
  max-height: min(520px, calc(100% - 132px));
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 70px rgba(7,17,31,.22);
}

.call-sheet.is-hidden {
  display: none;
}

.call-sheet-panel {
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}

.call-sheet-panel[data-sheet-panel="more"],
.call-sheet-panel[data-sheet-panel="moments"],
.call-sheet-panel[data-sheet-panel="games"],
.call-sheet-panel[data-sheet-panel="invite"] {
  overflow: auto;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-head h3 {
  margin: 0;
  color: #07111f;
  font-size: 1.15rem;
}

.sheet-head button {
  min-height: 38px;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 999px;
  padding: 0 13px;
  background: #fff;
  color: #07111f;
  font-weight: 950;
}

.call-chat-feed {
  min-height: 0;
  max-height: 230px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 10px;
  border-radius: 20px;
  background: rgba(239,245,255,.8);
}

.call-chat-feed article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
}

.call-chat-feed article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #0757ff;
  color: #fff;
  font-size: .62rem;
  font-weight: 950;
}

.call-chat-feed article > div {
  width: fit-content;
  max-width: min(360px, 100%);
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 17px 17px 17px 6px;
  background: #fff;
}

.call-chat-feed article.is-you {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.call-chat-feed article.is-you > span {
  grid-column: 2;
  background: #07111f;
}

.call-chat-feed article.is-you > div {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  border-radius: 17px 17px 6px 17px;
  background: #0757ff;
}

.call-chat-feed article.is-you b,
.call-chat-feed article.is-you p {
  color: #fff;
}

.call-chat-feed b {
  font-size: .7rem;
}

.call-chat-feed p {
  font-size: .82rem;
  line-height: 1.22;
}

.live-game-list {
  display: grid;
  gap: 8px;
}

.live-game-list button {
  min-height: 74px;
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 18px;
  background: rgba(247,250,255,.9);
  color: #07111f;
  text-align: left;
}

.live-game-list em {
  color: #728197;
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}

.table-setup {
  min-height: 0;
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
}

.table-player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.table-player-grid button {
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "avatar name"
    "avatar seat";
  align-items: center;
  gap: 2px 9px;
  padding: 10px;
  border: 1px solid rgba(7,87,255,.18);
  border-radius: 18px;
  background: rgba(247,250,255,.92);
  text-align: left;
}

.table-player-grid span,
.watcher-row span {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #0757ff;
  color: #fff;
  font-weight: 950;
}

.table-player-grid span {
  grid-area: avatar;
  width: 38px;
  height: 38px;
  font-size: .68rem;
}

.table-player-grid b {
  grid-area: name;
  color: #07111f;
  font-size: .84rem;
  line-height: 1;
}

.table-player-grid em {
  grid-area: seat;
  color: #728197;
  font-style: normal;
  font-size: .7rem;
  font-weight: 900;
}

.watcher-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(22,45,84,.08);
  border-radius: 18px;
  background: rgba(247,250,255,.92);
}

.watcher-row span {
  min-height: 30px;
  padding: 0 10px;
  font-size: .68rem;
}

.watcher-row em {
  flex-basis: 100%;
  color: #728197;
  font-size: .73rem;
  font-style: normal;
  font-weight: 850;
}

.scoreboard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(22,45,84,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
}

.scoreboard-head,
.score-row {
  display: grid;
  gap: 10px;
}

.scoreboard-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.scoreboard h4 {
  margin: 0;
  color: #07111f;
  font-size: .96rem;
  line-height: 1.05;
}

.scoreboard output {
  color: #728197;
  font-size: .72rem;
  font-weight: 900;
}

.score-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.score-row article {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(247,250,255,.95);
}

.score-row span {
  color: #44546a;
  font-size: .7rem;
  font-weight: 900;
}

.score-row b {
  color: #07111f;
  font-size: 1.5rem;
  line-height: 1;
}

.score-row menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
}

.score-row button {
  min-height: 34px;
  border-radius: 12px;
  font-size: 1rem;
}

.roster-list,
.more-actions {
  min-height: 0;
  display: grid;
  gap: 8px;
}

.capacity-note {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(7,87,255,.08);
}

.capacity-note b {
  color: #07111f;
  font-size: .82rem;
}

.capacity-note em {
  color: #65758b;
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
}

.roster-list {
  overflow: auto;
  padding-right: 2px;
}

.roster-list article {
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar name action"
    "avatar status action";
  align-items: center;
  gap: 2px 10px;
  padding: 8px;
  border: 1px solid rgba(22,45,84,.08);
  border-radius: 18px;
  background: rgba(247,250,255,.9);
}

.roster-list span {
  grid-area: avatar;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #0757ff;
  color: #fff;
  font-size: .68rem;
  font-weight: 950;
}

.roster-list b {
  grid-area: name;
  color: #07111f;
  font-size: .92rem;
  line-height: 1;
}

.roster-list em {
  grid-area: status;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(7,87,255,.1);
  color: #0757ff;
  font-size: .66rem;
  font-style: normal;
  font-weight: 950;
}

.roster-list em.is-waiting {
  background: rgba(111,126,148,.14);
  color: #5f6f84;
}

.roster-list em.is-ringing {
  background: rgba(7,87,255,.12);
  color: #0757ff;
}

.roster-actions {
  grid-area: action;
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: 6px;
}

.roster-list button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: #07111f;
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
}

.roster-list button[data-pin-person] {
  background: #0757ff;
}

.call-invite-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(247,250,255,.94);
}

.call-invite-panel label {
  display: grid;
  gap: 6px;
}

.call-invite-panel label span {
  color: #65758b;
  font-size: .72rem;
  font-weight: 900;
}

.call-invite-panel input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 16px;
  padding: 0 12px;
  background: #fff;
  color: #07111f;
  font: inherit;
  font-weight: 850;
  box-sizing: border-box;
}

.call-invite-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.call-invite-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: #07111f;
  color: #fff;
  font-weight: 950;
}

.call-invite-actions button.primary {
  background: #0757ff;
}

.call-invite-panel output {
  min-height: 38px;
  display: block;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(7,87,255,.08);
  color: #42526a;
  font-size: .76rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.more-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.more-actions button {
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta";
  align-items: center;
  gap: 2px 10px;
  border: 1px solid rgba(7,87,255,.12);
  border-radius: 20px;
  background: rgba(247,250,255,.96);
  color: #07111f;
  padding: 10px;
  font-weight: 950;
  text-align: left;
}

.more-actions span {
  grid-area: icon;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #0757ff;
  color: #fff;
  font-size: .64rem;
  font-weight: 950;
}

.more-actions b {
  grid-area: title;
  color: #07111f;
  font-size: .84rem;
  line-height: 1;
}

.more-actions em {
  grid-area: meta;
  color: #728197;
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
}

.moment-lane {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.moment-lane article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 12px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 22px;
  background: rgba(247,250,255,.96);
}

.moment-lane b {
  color: #07111f;
  font-size: .95rem;
  line-height: 1.12;
}

.pov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.pov-grid button {
  min-height: 42px;
  border: 1px solid rgba(7,87,255,.18);
  border-radius: 999px;
  background: #fff;
  color: #0757ff;
  font-size: .75rem;
  font-weight: 950;
}

.freeze-preview {
  position: relative;
  min-height: 126px;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(0deg, rgba(7,17,31,.72), rgba(7,17,31,.06)),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.18), transparent 0 22%, rgba(255,255,255,.08) 23% 42%, transparent 43%),
    linear-gradient(145deg, #1c2940, #1553b8 58%, #07111f);
  color: #fff;
  overflow: hidden;
}

.freeze-preview span {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #0757ff;
  font-size: .66rem;
  font-weight: 950;
}

.freeze-preview strong {
  font-size: 1.1rem;
  line-height: 1;
}

.freeze-preview i {
  position: absolute;
  right: 18px;
  bottom: 28px;
  width: 74px;
  height: 38px;
  border: 4px solid rgba(255,255,255,.88);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 999px;
  transform: rotate(-16deg);
}

.messages-screen {
  justify-content: center;
}

.messages-panel {
  width: min(760px, 100%);
  min-height: min(660px, calc(100dvh - 170px));
  justify-self: center;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border: 1px solid rgba(22,45,84,.1);
  background: rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 22px 70px rgba(7,17,31,.08);
  overflow: hidden;
}

.messages-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.messages-head h2 {
  justify-self: center;
  color: #07111f;
  font-size: 1.7rem;
}

.messages-head button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(7,17,31,.06);
  color: #0757ff;
  font-size: .86rem;
  font-weight: 950;
}

.messages-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(22,45,84,.08);
  border-radius: 18px;
  background: #f0f3f8;
}

.messages-search span {
  color: #7b8797;
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.messages-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #07111f;
  font-size: 1rem;
  font-weight: 850;
  outline: none;
}

.pinned-threads {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 0 6px;
}

.pinned-threads button {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #07111f;
}

.pinned-threads span {
  width: min(78px, 15vw);
  height: min(78px, 15vw);
  min-width: 58px;
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 42%),
    linear-gradient(135deg, #dce7ff, #a9c4ff);
  color: #0757ff;
  font-size: .94rem;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 14px 32px rgba(7,87,255,.13);
}

.pinned-threads b {
  max-width: 100%;
  overflow: hidden;
  color: #59677a;
  font-size: .78rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-threads em {
  position: absolute;
  top: 0;
  right: calc(50% - 38px);
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #0757ff;
  color: #fff;
  font-size: .68rem;
  font-style: normal;
  font-weight: 950;
}

.message-thread-list {
  min-height: 0;
  display: grid;
  align-content: start;
  overflow: auto;
  padding-top: 4px;
}

.message-thread-list button {
  min-height: 78px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar name time"
    "avatar text time";
  gap: 4px 12px;
  align-items: center;
  border: 0;
  border-top: 1px solid rgba(22,45,84,.08);
  padding: 12px 2px;
  background: transparent;
  color: #07111f;
  text-align: left;
}

.message-thread-list span {
  grid-area: avatar;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 44%),
    linear-gradient(135deg, #2f73ff, #0757ff);
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
}

.message-thread-list b {
  grid-area: name;
  overflow: hidden;
  color: #07111f;
  font-size: 1rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-list em {
  grid-area: text;
  overflow: hidden;
  color: #7b8797;
  font-size: .9rem;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-list small {
  grid-area: time;
  align-self: start;
  color: #8a96a8;
  font-size: .82rem;
  font-weight: 850;
}

.chat {
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(220px, 270px);
  align-items: stretch;
}

.message-sidebar {
  min-height: min(610px, calc(100dvh - 170px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(22,45,84,.1);
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 22px 70px rgba(7,17,31,.08);
  overflow: hidden;
}

.message-sidebar-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.message-sidebar-head h2 {
  justify-self: center;
  font-size: 1.35rem;
}

.message-sidebar-head button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(7,17,31,.06);
  color: #0757ff;
  font-size: .78rem;
  font-weight: 950;
}

.message-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 9px 12px;
  border: 1px solid rgba(22,45,84,.08);
  border-radius: 16px;
  background: rgba(239,245,255,.86);
}

.message-search span {
  color: #66758a;
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.message-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #07111f;
  font-size: .92rem;
  font-weight: 850;
  outline: none;
}

.thread-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow: auto;
}

.thread-list button {
  min-height: 72px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar name time"
    "avatar text time";
  gap: 4px 10px;
  align-items: center;
  border: 0;
  border-radius: 18px;
  padding: 10px;
  background: transparent;
  color: #07111f;
  text-align: left;
}

.thread-list button.is-active {
  background: #0757ff;
  box-shadow: 0 16px 36px rgba(7,87,255,.2);
}

.thread-list span {
  grid-area: avatar;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, #2f73ff, #0757ff);
  color: #fff;
  font-size: .78rem;
  font-weight: 950;
}

.thread-list b {
  grid-area: name;
  overflow: hidden;
  color: inherit;
  font-size: .92rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-list em {
  grid-area: text;
  overflow: hidden;
  color: #6a788c;
  font-size: .76rem;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-list small {
  grid-area: time;
  align-self: start;
  color: #8a96a8;
  font-size: .66rem;
  font-weight: 900;
}

.thread-list button.is-active b,
.thread-list button.is-active em,
.thread-list button.is-active small {
  color: #fff;
}

.thread-list button.is-active span {
  background: rgba(255,255,255,.22);
}

.chat-panel {
  min-height: min(610px, calc(100dvh - 170px));
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border: 1px solid rgba(22,45,84,.1);
  background: rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 22px 70px rgba(7,17,31,.08);
}

.message-scroll {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
  padding: 0;
}

.schedule-card {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(7,87,255,.12), rgba(255,255,255,.82)),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(22,45,84,.08);
}

.schedule-card span {
  color: #0757ff;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.schedule-card b {
  color: #07111f;
  font-size: .95rem;
}

.schedule-card em {
  color: #5b6b82;
  font-size: .78rem;
  font-style: normal;
  font-weight: 820;
}

.chat-feed {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: visible;
  padding: 12px;
  border: 1px solid rgba(22,45,84,.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(238,244,255,.78));
}

.chat-feed article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: end;
}

.chat-feed article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #0757ff;
  color: #fff;
  font-size: .68rem;
  font-weight: 950;
}

.chat-feed article > div {
  width: fit-content;
  max-width: min(390px, 100%);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(22,45,84,.08);
  border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,.94);
}

.chat-feed article.is-you {
  grid-template-columns: minmax(0, 1fr) 38px;
}

.chat-feed article.is-you > span {
  grid-column: 2;
  background: #07111f;
}

.chat-feed article.is-you > div {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  border-radius: 18px 18px 6px 18px;
  background: #0757ff;
}

.chat-feed article.is-you b,
.chat-feed article.is-you p {
  color: #fff;
}

.chat-feed article.is-event > span {
  background: #07111f;
}

.chat-feed article.is-event > div {
  border-color: rgba(7,87,255,.22);
  background: #eaf1ff;
}

.chat-feed article.is-event p::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 999px;
  background: #0757ff;
}

.chat-feed b {
  font-size: .74rem;
}

.chat-feed p {
  font-size: .86rem;
  line-height: 1.24;
}

.chat-toolbelt {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 0;
}

.chat-toolbelt button {
  min-height: 34px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 999px;
  padding: 0 12px;
  background: #f4f8ff;
  color: #0757ff;
  font-size: .72rem;
  font-weight: 950;
  white-space: nowrap;
}

.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: #fff;
}

.composer-add,
.composer-audio {
  border: 0;
  border-radius: 999px;
  background: rgba(7,87,255,.1);
  color: #0757ff;
  font-weight: 950;
}

.composer-add {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.45rem;
  line-height: 1;
}

.composer-audio {
  min-height: 44px;
  padding: 0 13px;
  font-size: .72rem;
}

.composer input,
.invite-panel input {
  min-height: 46px;
  min-width: 0;
  border: 0;
  border-radius: 18px;
  padding: 0 10px;
  background: transparent;
  color: #07111f;
  font-weight: 850;
  outline: none;
}

.composer button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: #0757ff;
  color: #fff;
  font-weight: 950;
}

.room-feed {
  align-self: start;
}

#room-feed {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(7,87,255,.04);
}

#room-feed span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #728197;
  font-weight: 850;
}

#room-feed em {
  color: #0757ff;
  font-style: normal;
}

.invite-panel {
  width: min(520px, 100%);
  justify-self: center;
}

.select-people-list {
  display: grid;
  gap: 8px;
}

.select-people-list button {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  color: #07111f;
  text-align: left;
}

.select-people-list button.is-selected {
  border-color: rgba(7,87,255,.32);
  background: rgba(7,87,255,.08);
}

.select-people-list em {
  color: #728197;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.invite-panel label {
  color: #44546a;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.invite-panel input {
  border: 1px solid rgba(22,45,84,.12);
  background: #fff;
}

.invite-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.invite-actions button {
  min-height: 48px;
}

.invite-link-output {
  display: block;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid rgba(7,87,255,.12);
  border-radius: 16px;
  background: rgba(7,87,255,.06);
  color: #44546a;
  font-size: .78rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-recommendations,
.noysey-contacts {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.contact-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.contact-section-head h3 {
  margin: 1px 0 0;
  color: #07111f;
  font-size: 1rem;
  letter-spacing: 0;
}

.contact-list {
  display: grid;
  gap: 8px;
}

.contact-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
}

.contact-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #07111f;
  color: #fff;
  font-size: .76rem;
  font-weight: 950;
}

.contact-card.is-favorite > span {
  background: #0757ff;
}

.contact-card b,
.contact-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card b {
  color: #07111f;
  font-size: .88rem;
}

.contact-card em {
  color: #66758d;
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
}

.contact-card menu {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.contact-card button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: .72rem;
}

@media (max-width: 560px) {
  .contact-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .contact-card menu {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (min-width: 760px) and (max-height: 760px) {
  .app[data-screen="invite"] {
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .app[data-screen="invite"] .topbar {
    min-height: 48px;
  }

  .app[data-screen="invite"] .screen.invite {
    padding-bottom: 0;
  }

  .app[data-screen="invite"] .invite-panel {
    gap: 8px;
    padding: 12px 14px;
    border-radius: 24px;
  }

  .app[data-screen="invite"] .invite-panel h2 {
    font-size: 1.65rem;
  }

  .app[data-screen="invite"] .invite-panel p {
    font-size: .88rem;
    line-height: 1.25;
  }

  .app[data-screen="invite"] .select-people-list {
    gap: 7px;
  }

  .app[data-screen="invite"] .select-people-list button {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 16px;
  }

  .app[data-screen="invite"] .invite-panel input {
    min-height: 40px;
  }

  .app[data-screen="invite"] .invite-actions button {
    min-height: 42px;
  }

  .app[data-screen="invite"] .invite-link-output {
    min-height: 38px;
    padding: 9px 10px;
  }
}

.guest-join-screen {
  min-height: calc(100dvh - 120px);
  justify-content: center;
}

.guest-join-panel {
  width: min(520px, 100%);
  min-height: min(690px, calc(100dvh - 150px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  justify-self: center;
  padding: 18px;
  border: 1px solid rgba(7,87,255,.12);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.9)),
    var(--noysey-paper);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 24px 80px rgba(7,17,31,.12);
  overflow: hidden;
}

.guest-brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: #07111f;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 28px rgba(7,87,255,.08);
}

.guest-brand img {
  width: 26px;
  height: 26px;
}

.guest-preview {
  position: relative;
  min-height: 330px;
  display: grid;
  align-content: end;
  padding: 18px;
  border-radius: 30px;
  background:
    linear-gradient(0deg, rgba(7,17,31,.76), rgba(7,17,31,.08) 58%, rgba(7,17,31,.2)),
    var(--noysey-video-paper);
  color: #fff;
  overflow: hidden;
}

.guest-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
}

.guest-preview > div {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
}

.guest-preview h2,
.guest-preview em {
  margin: 0;
}

.guest-preview h2 {
  color: #fff;
  font-size: clamp(2.2rem, 9vw, 4.2rem);
  line-height: .95;
}

.guest-preview em {
  max-width: 32ch;
  color: rgba(255,255,255,.76);
  font-size: .86rem;
  font-style: normal;
  font-weight: 820;
}

.guest-join-form {
  display: grid;
  gap: 10px;
}

.guest-join-form label {
  color: #44546a;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.guest-join-form input {
  min-height: 54px;
  border: 1px solid rgba(22,45,84,.12);
  border-radius: 18px;
  background: #fff;
  color: #07111f;
  font-size: 1rem;
  font-weight: 850;
  padding: 0 14px;
  outline: none;
}

.guest-actions,
.guest-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guest-actions button,
.guest-secondary-actions button {
  min-height: 48px;
  border: 1px solid rgba(7,87,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #0757ff;
  font-weight: 950;
}

.guest-actions .primary {
  border-color: rgba(7,87,255,.32);
  background: linear-gradient(180deg, #2f73ff, #0757ff);
  color: #fff;
}

.guest-secondary-actions button {
  min-height: 42px;
  background: rgba(7,17,31,.04);
  color: #526178;
  font-size: .82rem;
}

.games-panel {
  width: min(620px, 100%);
  justify-self: center;
}

.games-panel button {
  min-height: 108px;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(7,87,255,.18);
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  text-align: left;
}

.games-panel span {
  color: #0757ff;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.games-panel em {
  color: #728197;
  font-style: normal;
}

.games-panel small {
  width: fit-content;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(7,87,255,.09);
  color: #0757ff;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.analytics {
  width: min(1120px, 100%);
  justify-self: center;
  padding-bottom: 88px;
}

.analytics-panel {
  gap: 18px;
  padding: 18px;
}

.analytics-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.analytics-head h2 {
  margin-top: 4px;
}

.analytics-head button,
.analytics-split button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: #07111f;
  color: #fff;
  font-weight: 950;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.analytics-grid article {
  min-height: 128px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 14px;
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(7,87,255,.1), rgba(7,17,31,.04)),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(22,45,84,.08);
}

.analytics-grid span,
.analytics-grid em,
.funnel-list b,
.funnel-list em,
.analytics-events span,
.analytics-events em,
.analytics-history span,
.analytics-history em,
.quality-grid em,
.analytics-note span {
  color: #5b6b82;
  font-size: .76rem;
  font-style: normal;
  font-weight: 850;
}

.analytics-grid b {
  color: #07111f;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1;
}

.setup-status {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(22,45,84,.08);
}

.setup-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.setup-status-grid article {
  min-height: 92px;
  display: grid;
  align-content: space-between;
  gap: 5px;
  padding: 11px;
  border-radius: 18px;
  background: rgba(247,250,255,.92);
  box-shadow: inset 0 0 0 1px rgba(7,87,255,.08);
}

.setup-status-grid span,
.setup-status-grid em {
  color: #5b6b82;
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
}

.setup-status-grid b {
  color: #07111f;
  font-size: .96rem;
  line-height: 1.08;
}

.analytics-split {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.analytics-split > article,
.analytics-note {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(22,45,84,.08);
}

.funnel-list,
.analytics-events,
.analytics-history,
.quality-grid {
  display: grid;
  gap: 8px;
}

.funnel-list span,
.analytics-events article,
.analytics-history article,
.quality-grid span {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title value"
    "meta value";
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(7,87,255,.055);
}

.funnel-list b,
.analytics-events b,
.analytics-history b {
  grid-area: title;
  color: #07111f;
}

.funnel-list em {
  grid-area: value;
  color: #0757ff;
  font-size: 1rem;
  font-weight: 950;
}

.analytics-events span {
  grid-area: value;
  color: #0757ff;
  font-weight: 950;
}

.analytics-events em {
  grid-area: meta;
}

.analytics-history em {
  grid-area: meta;
}

.analytics-history span {
  grid-area: value;
  color: #0757ff;
  font-weight: 950;
}

.quality-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quality-grid span {
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "meta";
}

.quality-grid b {
  grid-area: title;
  color: #07111f;
  font-size: 1.35rem;
}

.quality-grid em {
  grid-area: meta;
}

.analytics-note {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  background: rgba(7,17,31,.94);
}

.analytics-note b {
  color: #fff;
}

.analytics-note span {
  color: rgba(255,255,255,.68);
}

.bottom-nav {
  width: min(520px, 100%);
  justify-self: center;
  min-height: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 28px;
}

.bottom-nav button {
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #728197;
  font-size: .72rem;
  font-weight: 950;
}

.bottom-nav button:hover,
.topbar button:hover,
.section-head button:hover,
.call-title button:hover {
  filter: brightness(1.03);
}

.bottom-nav button span {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.bottom-nav button:nth-child(3) span {
  border-radius: 50%;
  box-shadow: -8px 0 0 -5px currentColor, 8px 0 0 -5px currentColor;
}

.bottom-nav button:nth-child(4) span {
  border-radius: 5px;
  transform: rotate(45deg);
}

.bottom-nav button.is-active {
  background: #0757ff;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 28px rgba(7,87,255,.24);
}

@media (max-width: 640px) {
  .app {
    padding: max(12px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
    gap: 10px;
  }

  .topbar {
    grid-template-columns: 86px 1fr 86px;
    min-height: 54px;
  }

  .topbar img {
    width: 174px;
  }

  .topbar button {
    min-height: 38px;
    font-size: .76rem;
  }

  .app[data-screen="messages"] {
    grid-template-rows: minmax(0, 1fr) auto;
    padding: max(28px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom));
    background: #fff;
  }

  .app[data-screen="messages"] .topbar {
    display: none;
  }

  .app[data-screen="messages"] .screens,
  .app[data-screen="messages"] .screen.messages-screen {
    min-height: 0;
    overflow: hidden;
  }

  .app[data-screen="messages"] .screen.messages-screen {
    padding: 0;
  }

  .app[data-screen="messages"] .messages-panel {
    width: 100%;
    min-height: 0;
    height: 100%;
    gap: 12px;
    padding: 8px 16px 74px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .app[data-screen="messages"] .messages-head {
    min-height: 46px;
  }

  .app[data-screen="messages"] .messages-head h2 {
    font-size: 1.24rem;
  }

  .app[data-screen="messages"] .messages-head button {
    min-height: 38px;
    padding: 0 4px;
    background: transparent;
    color: #0757ff;
    font-size: .96rem;
  }

  .app[data-screen="messages"] .messages-search {
    border: 0;
    border-radius: 14px;
    padding: 9px 12px;
    background: #eff1f4;
  }

  .app[data-screen="messages"] .messages-search span {
    display: none;
  }

  .app[data-screen="messages"] .messages-search input {
    min-height: 26px;
    font-size: 1rem;
  }

  .app[data-screen="messages"] .pinned-threads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 18px 2px 8px;
  }

  .app[data-screen="messages"] .pinned-threads span {
    width: 82px;
    height: 82px;
  }

  .app[data-screen="messages"] .pinned-threads b {
    color: #717780;
    font-size: .82rem;
  }

  .app[data-screen="messages"] .message-thread-list {
    overflow: auto;
    padding-bottom: 14px;
  }

  .app[data-screen="messages"] .message-thread-list button {
    min-height: 76px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 11px 0;
  }

  .app[data-screen="messages"] .message-thread-list span {
    width: 48px;
    height: 48px;
  }

  .app[data-screen="messages"] .message-thread-list b {
    font-size: 1rem;
  }

  .app[data-screen="messages"] .message-thread-list em {
    font-size: .88rem;
  }

  .device-notification {
    top: max(8px, env(safe-area-inset-top));
    width: min(354px, calc(100vw - 20px));
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "avatar copy"
      "actions actions";
    gap: 7px 9px;
    padding: 8px;
    border-radius: 22px;
  }

  .device-notification > span {
    grid-area: avatar;
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .device-notification > div {
    grid-area: copy;
    min-width: 0;
  }

  .device-notification nav {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .device-notification button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.68rem;
  }

  .device-notification b {
    font-size: 0.82rem;
  }

  .device-notification em {
    font-size: 0.68rem;
  }

  .hero {
    min-height: min(354px, calc(100dvh - 322px));
    gap: 9px;
    padding: 12px;
    border-radius: 28px;
  }

  .recent-list button {
    min-height: 70px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .recent-list span {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .room-card {
    gap: 9px;
    padding: 10px;
    border-radius: 24px;
  }

  .room-card-head {
    min-height: 50px;
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    gap: 8px;
  }

  .room-card-head > span {
    width: 40px;
    height: 40px;
    border-radius: 15px;
  }

  .room-card-head > b {
    width: 36px;
    height: 36px;
  }

  .room-card-head .eyebrow {
    font-size: 0.58rem;
  }

  .room-grid {
    min-height: 142px;
    gap: 7px;
  }

  .tile {
    min-height: 66px;
    padding: 9px;
    border-radius: 17px;
  }

  .tile b {
    font-size: 0.82rem;
  }

  .tile em {
    font-size: 0.52rem;
  }

  h1 {
    font-size: clamp(1.56rem, 8vw, 2.08rem);
  }

  p {
    font-size: .82rem;
    line-height: 1.25;
  }

  .primary-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .primary-actions .primary {
    grid-column: 1 / -1;
  }

  .primary,
  .secondary {
    min-height: 46px;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  .room-meta {
    gap: 5px;
    margin-top: 6px;
  }

  .room-meta span {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.66rem;
  }

  .group-row span {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .group-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .group-row button {
    min-height: 78px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar title action"
      "avatar meta action";
  }

  .chat {
    grid-template-columns: 1fr;
  }

  .message-sidebar {
    display: none;
  }

  .room-feed {
    display: none;
  }

  .chat-panel {
    min-height: min(620px, calc(100dvh - 150px));
  }

  .app[data-screen="chat"] {
    grid-template-rows: minmax(0, 1fr) auto;
    padding: max(28px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
    background: #fff;
  }

  .app[data-screen="chat"] .topbar {
    display: none;
  }

  .app[data-screen="chat"] .screens,
  .app[data-screen="chat"] .screen.chat {
    min-height: 0;
    overflow: hidden;
  }

  .app[data-screen="chat"] .screen.chat {
    padding: 0;
  }

  .app[data-screen="chat"] .chat-panel {
    min-height: 0;
    height: 100%;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .app[data-screen="chat"] .chat-head {
    position: relative;
    min-height: 72px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid rgba(22,45,84,.08);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
  }

  .app[data-screen="chat"] .chat-back {
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 1;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    padding: 0 10px;
    background: transparent;
    color: #0757ff;
    font-size: .86rem;
    font-weight: 900;
  }

  .app[data-screen="chat"] .chat-head .eyebrow {
    justify-self: center;
    position: relative;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    padding-top: 34px;
    color: #07111f;
    font-size: .68rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .app[data-screen="chat"] .chat-head .eyebrow::before {
    content: "TC";
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--noysey-blue-2), var(--noysey-blue));
    color: #fff;
    font-size: .62rem;
    font-weight: 950;
  }

  .app[data-screen="chat"] .chat-head > div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .app[data-screen="chat"] .chat-head button {
    min-height: 34px;
    padding: 0 7px;
    border: 1px solid rgba(22,45,84,.1);
    border-radius: 999px;
    background: #fff;
    color: #07111f;
    font-size: 0.7rem;
    box-shadow: 0 6px 16px rgba(7,17,31,.06);
  }

  .app[data-screen="chat"] .chat-head > div button:first-child,
  .app[data-screen="chat"] .chat-head > div button:nth-child(2) {
    background:
      linear-gradient(180deg, rgba(255,255,255,.2), transparent 44%),
      linear-gradient(135deg, var(--noysey-blue-2), var(--noysey-blue));
    color: #fff;
  }

  .app[data-screen="chat"] .message-scroll {
    gap: 12px;
    padding: 12px 14px 14px;
    background:
      radial-gradient(circle at 50% 0, rgba(7,87,255,.08), transparent 0 30%),
      #fff;
  }

  .app[data-screen="chat"] .schedule-card {
    width: 100%;
    min-height: 72px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,245,255,.92));
  }

  .app[data-screen="chat"] .chat-feed {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .app[data-screen="chat"] .chat-feed article > div {
    border: 0;
    background: #edf0f4;
    box-shadow: none;
  }

  .app[data-screen="chat"] .chat-feed article.is-event > div {
    background: #eaf1ff;
    box-shadow: inset 0 0 0 1px rgba(7,87,255,.18);
  }

  .app[data-screen="chat"] .chat-feed article.is-you > div {
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%),
      var(--noysey-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(7,87,255,.18);
  }

  .app[data-screen="chat"] .chat-toolbelt {
    display: none;
  }

  .app[data-screen="chat"] .composer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 0 10px 8px;
    border: 1px solid rgba(22,45,84,.1);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 34px rgba(7,17,31,.1);
  }

  .app[data-screen="chat"] .composer-audio {
    display: none;
  }

  .analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-status-grid {
    grid-template-columns: 1fr;
  }

  .analytics-split {
    grid-template-columns: 1fr;
  }

  .analytics-note {
    grid-template-columns: 1fr;
  }

  .call-title {
    align-items: start;
  }

  .call-title > div:last-child {
    display: none;
  }

  .call-stage {
    gap: 0;
    padding: 0;
  }

  .health {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .health b {
    font-size: 1rem;
  }

  .health em {
    display: none;
  }

  .call-layout-picker {
    padding: 4px;
  }

  .call-layout-picker button {
    min-width: 38px;
    min-height: 32px;
  }

  .video-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .call-stage[data-call-count="1"] .video-grid article {
    min-height: 100dvh;
  }

  .call-stage[data-remote-count="1"] .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-stage[data-remote-count="1"] .video-grid article {
    min-height: 100dvh;
  }

  .call-stage[data-remote-count="2"] .video-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="3"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.05fr .95fr;
  }

  .call-stage[data-remote-count="3"] .video-grid article[data-grid-index="1"] {
    grid-column: 1 / -1;
  }

  .call-stage:not([data-call-count="1"]):not([data-view="focus"]):not([data-view="share"]):not([data-view="game"]):not([data-view="pin"]) .video-grid article[data-person="you"] {
    top: max(72px, calc(env(safe-area-inset-top) + 60px));
    right: max(12px, env(safe-area-inset-right));
    width: 82px;
    height: 124px;
    padding: 10px;
    border-radius: 24px;
  }

  .call-stage[data-remote-count="4"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid,
  .call-stage[data-remote-count="6"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid article {
    grid-column: span 2;
  }

  .call-stage[data-remote-count="5"] .video-grid article[data-grid-index="1"],
  .call-stage[data-remote-count="5"] .video-grid article[data-grid-index="2"] {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="7"] .video-grid,
  .call-stage[data-remote-count="8"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="7"] .video-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="7"] .video-grid article {
    grid-column: span 2;
  }

  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="1"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="2"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="3"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="4"] {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="9"] .video-grid,
  .call-stage[data-remote-count="10"] .video-grid,
  .call-stage[data-remote-count="11"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="10"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="11"] .video-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="11"] .video-grid article {
    grid-column: span 2;
  }

  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="10"],
  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="11"] {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="9"] .video-grid article,
  .call-stage[data-remote-count="10"] .video-grid article,
  .call-stage[data-remote-count="11"] .video-grid article {
    padding: 8px;
  }

  .call-stage[data-remote-count="9"] .video-grid article span,
  .call-stage[data-remote-count="10"] .video-grid article span,
  .call-stage[data-remote-count="11"] .video-grid article span {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    font-size: .58rem;
  }

  .call-stage[data-remote-count="9"] .video-grid article b,
  .call-stage[data-remote-count="10"] .video-grid article b,
  .call-stage[data-remote-count="11"] .video-grid article b {
    font-size: .66rem;
  }

  .call-stage[data-remote-count="9"] .video-grid article em,
  .call-stage[data-remote-count="10"] .video-grid article em,
  .call-stage[data-remote-count="11"] .video-grid article em {
    font-size: .58rem;
  }

  .call-stage[data-view="pin"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-view="pin"][data-pin-count="1"] .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-stage[data-view="pin"][data-pin-count="2"] .video-grid,
  .call-stage[data-view="pin"][data-pin-count="3"] .video-grid,
  .call-stage[data-view="pin"][data-pin-count="4"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-view="pin"][data-pin-count="5"] .video-grid,
  .call-stage[data-view="pin"][data-pin-count="6"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-view="pin"] .video-grid article.is-pinned {
    min-height: 132px;
    padding: 16px;
  }

  .call-stage[data-view="pin"] .video-grid article.is-pinned span {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .call-stage[data-view="pin"] .video-grid article.is-pinned b {
    font-size: .86rem;
  }

  .call-stage[data-view="pin"] .video-grid article.is-pinned em {
    font-size: .72rem;
  }

  .call-stage[data-view="pin"].show-controls .video-grid article.is-pinned::after {
    display: none;
  }

  .video-grid article {
    min-height: 0;
    border-radius: 0;
    padding: 16px;
  }

  .video-grid article span {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 0.8rem;
  }

  .video-grid article b {
    font-size: 0.86rem;
  }

  .video-grid article em {
    font-size: 0.72rem;
  }

  .call-controls button {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    border-radius: 999px;
    background: rgba(20, 25, 31, .76);
    color: #fff;
    font-size: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
  }

  .call-controls {
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(74px, env(safe-area-inset-bottom));
    width: 56px;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .call-controls button::before {
    color: #fff;
    font-size: .68rem;
    line-height: 1;
  }

  .call-controls button[data-control-icon="mic"]::before { content: "Mic"; font-size: .7rem; }
  .call-controls button[data-control-icon="cam"]::before { content: "Cam"; font-size: .7rem; }
  .call-controls button[data-control-icon="more"]::before { content: "..."; font-size: 1.25rem; letter-spacing: .06em; }

  .view-rail {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: auto;
    justify-content: space-between;
    gap: 2px;
    transform: translateY(12px);
  }

  .view-rail button {
    min-width: 0;
    flex: 1 1 0;
    padding: 0 6px;
    font-size: .76rem;
  }

  .call-stage.show-controls .view-rail {
    transform: translateY(0);
  }

  .call-stage.sheet-open .view-rail {
    transform: translateY(12px);
  }

  .call-layout-picker {
    display: none;
  }

  .health {
    right: max(94px, env(safe-area-inset-right));
    bottom: max(66px, env(safe-area-inset-bottom));
  }

  .waiting-strip {
    right: max(94px, env(safe-area-inset-right));
    bottom: max(126px, calc(env(safe-area-inset-bottom) + 110px));
    left: max(14px, env(safe-area-inset-left));
  }

  .call-stage[data-view="focus"] .waiting-strip,
  .call-stage[data-view="share"] .waiting-strip {
    display: none;
  }

  .call-sheet {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 86px));
    max-height: min(468px, calc(100dvh - 138px));
    border-radius: 28px;
  }

  .call-stage.sheet-open .call-sheet {
    bottom: max(14px, env(safe-area-inset-bottom));
    max-height: min(560px, calc(100dvh - 46px));
  }

  .more-actions {
    grid-template-columns: 1fr;
  }

  .moment-lane {
    grid-template-columns: 1fr;
  }

  .moment-lane article {
    min-height: 0;
  }

  .table-player-grid {
    grid-template-columns: 1fr;
  }

  .video-grid article.game-view {
    padding: max(72px, calc(env(safe-area-inset-top) + 52px)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .table-preview {
    min-height: min(44dvh, 360px);
    border-radius: 26px;
  }
}

@media (min-width: 1024px) and (min-height: 680px) {
  .call-stage[data-remote-count="1"] .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-stage[data-remote-count="2"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .call-stage[data-remote-count="3"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .call-stage[data-remote-count="3"] .video-grid article[data-grid-index="1"] {
    grid-column: auto;
  }

  .call-stage[data-remote-count="4"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid,
  .call-stage[data-remote-count="6"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid article {
    grid-column: span 2;
  }

  .call-stage[data-remote-count="5"] .video-grid article[data-grid-index="1"],
  .call-stage[data-remote-count="5"] .video-grid article[data-grid-index="2"] {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="7"] .video-grid,
  .call-stage[data-remote-count="8"] .video-grid,
  .call-stage[data-remote-count="9"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="7"] .video-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="7"] .video-grid article {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="5"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="6"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="7"] {
    grid-column: span 4;
  }

  .call-stage[data-remote-count="8"] .video-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="9"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="10"] .video-grid,
  .call-stage[data-remote-count="11"] .video-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="10"] .video-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="11"] .video-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="11"] .video-grid article {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="9"],
  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="10"],
  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="11"] {
    grid-column: span 4;
  }

  .chat {
    width: min(1080px, 100%);
    justify-self: center;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .call-stage[data-remote-count="1"] .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-stage[data-remote-count="2"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .call-stage[data-remote-count="3"] .video-grid,
  .call-stage[data-remote-count="4"] .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="3"] .video-grid article[data-grid-index="1"] {
    grid-column: auto;
  }

  .call-stage[data-remote-count="5"] .video-grid,
  .call-stage[data-remote-count="6"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="5"] .video-grid article {
    grid-column: span 2;
  }

  .call-stage[data-remote-count="5"] .video-grid article[data-grid-index="1"],
  .call-stage[data-remote-count="5"] .video-grid article[data-grid-index="2"] {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="7"] .video-grid,
  .call-stage[data-remote-count="8"] .video-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="7"] .video-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="7"] .video-grid article {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="5"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="6"],
  .call-stage[data-remote-count="7"] .video-grid article[data-grid-index="7"] {
    grid-column: span 4;
  }

  .call-stage[data-remote-count="8"] .video-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="9"] .video-grid,
  .call-stage[data-remote-count="10"] .video-grid,
  .call-stage[data-remote-count="11"] .video-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="9"] .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="10"] .video-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="11"] .video-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-stage[data-remote-count="11"] .video-grid article {
    grid-column: span 3;
  }

  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="9"],
  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="10"],
  .call-stage[data-remote-count="11"] .video-grid article[data-grid-index="11"] {
    grid-column: span 4;
  }

  .app {
    gap: 8px;
    padding: 6px 8px;
  }

  .topbar {
    min-height: 48px;
  }

  .hero {
    min-height: 168px;
  }

  .room-grid,
  .groups {
    display: none;
  }

  h1 {
    font-size: 2rem;
  }

  .bottom-nav {
    min-height: 54px;
  }

  .call-stage {
    gap: 0;
    padding: 0;
  }

  .video-grid article {
    min-height: 0;
  }

  .chat-panel {
    min-height: calc(100dvh - 126px);
  }
}

/* First-run entry: full-bleed media, restrained copy, two decisive actions. */
.entry-screen {
  position: relative;
  min-height: 100dvh;
  background: #03050a;
  color: #fff;
}

.entry-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.04) 34%, rgba(0,0,0,.54) 66%, rgba(0,0,0,.96) 100%),
    radial-gradient(circle at 72% 26%, transparent 0 16%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}

.entry-media {
  position: absolute;
  inset: 0;
  display: block;
  background: #05070d;
}

.entry-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.03) contrast(1.04) brightness(.86);
  animation: entryPhotoCycle 28s infinite;
}

.entry-photo-latina-couple {
  background-image: url("/assets/entry/noysey-couple-latina-v1.png");
  background-position: 48% 50%;
}

.entry-photo-black-couple {
  background-image: url("/assets/entry/noysey-couple-black-v1.png");
  background-position: 50% 50%;
  animation-delay: 7s;
}

.entry-photo-family-call {
  background-image: url("/assets/entry/noysey-two-location-family-v1.png");
  background-position: 50% 43%;
  animation-delay: 14s;
}

.entry-photo-game-night {
  background-image: url("/assets/entry/noysey-game-night-v1.png");
  background-position: 50% 42%;
  animation-delay: 21s;
}

@keyframes entryPhotoCycle {
  0%, 20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

.entry-call-preview {
  position: absolute;
  top: max(86px, calc(env(safe-area-inset-top) + 72px));
  right: max(20px, env(safe-area-inset-right));
  z-index: 3;
  display: grid;
  gap: 9px;
  width: 154px;
  color: #fff;
}

.entry-call-status {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  background: rgba(5,7,13,.42);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}

.entry-call-status span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #26f29b;
  box-shadow: 0 0 0 5px rgba(38,242,155,.14);
}

.entry-call-status b,
.entry-call-status em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-call-status b {
  font-size: .77rem;
  font-weight: 940;
}

.entry-call-status em {
  grid-column: 2;
  color: rgba(255,255,255,.74);
  font-size: .65rem;
  font-style: normal;
  font-weight: 760;
}

.entry-call-frame {
  position: relative;
  height: 190px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.44);
  border-radius: 28px;
  background: #090c12;
  box-shadow: 0 24px 54px rgba(0,0,0,.34);
}

.entry-remote-video {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%),
    url("/assets/entry/noysey-couple-latina-v1.png");
  background-size: 390%;
  background-position: 73% 31%;
}

.entry-remote-video span,
.entry-local-video span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  max-width: calc(100% - 16px);
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: .65rem;
  font-weight: 860;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-local-video {
  position: absolute;
  right: 8px;
  bottom: 42px;
  width: 48px;
  height: 66px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.58);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.3) 0 13%, transparent 14%),
    linear-gradient(145deg, #26344c 0%, #0d1420 58%, #05070d 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}

.entry-call-controls {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.entry-call-controls i {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
}

.entry-call-controls i:nth-child(2) {
  background: #ff3b30;
}

.entry-content {
  position: relative;
  z-index: 4;
  min-height: 100dvh;
  width: min(680px, 100%);
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 24px;
  padding: max(74px, calc(env(safe-area-inset-top) + 44px)) max(28px, env(safe-area-inset-right)) max(42px, calc(env(safe-area-inset-bottom) + 30px)) max(28px, env(safe-area-inset-left));
}

.entry-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 940;
  text-shadow: 0 4px 24px rgba(0,0,0,.58);
}

.entry-brand img {
  width: 34px;
  height: 34px;
  display: block;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.44));
}

.entry-content h1 {
  max-width: 10ch;
  margin: 0 0 12px;
  color: #fff;
  font-size: 5.8rem;
  font-weight: 940;
  line-height: .88;
  letter-spacing: 0;
  text-wrap: balance;
}

.entry-content p {
  max-width: 18.5em;
  color: rgba(255,255,255,.88);
  font-size: 1.42rem;
  font-weight: 760;
  line-height: 1.15;
  text-shadow: 0 2px 28px rgba(0,0,0,.55);
}

.entry-content nav {
  width: min(360px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.entry-content button {
  min-height: 62px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0;
}

.entry-primary {
  border: 0;
  background: #fff;
  color: #03050a;
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
}

.entry-secondary {
  border: 1.5px solid rgba(255,255,255,.48);
  background: rgba(5,7,13,.12);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
}

@media (min-width: 760px) {
  .entry-call-preview {
    top: max(116px, calc(env(safe-area-inset-top) + 88px));
    right: max(54px, env(safe-area-inset-right));
    width: 178px;
  }

  .entry-call-frame {
    height: 236px;
  }

  .entry-content {
    padding-left: max(54px, env(safe-area-inset-left));
    padding-bottom: max(54px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .entry-content {
    gap: 22px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }

  .entry-brand {
    font-size: 1rem;
  }

  .entry-brand img {
    width: 32px;
    height: 32px;
  }

  .entry-content h1 {
    max-width: 8ch;
    font-size: 4.65rem;
  }

  .entry-content nav {
    gap: 12px;
  }

  .entry-content button {
    min-height: 58px;
  }
}

@media (max-width: 390px) {
  .entry-call-preview {
    width: 148px;
  }

  .entry-call-frame {
    height: 174px;
  }

  .entry-content h1 {
    font-size: 4.18rem;
  }

  .entry-content p {
    font-size: 1.16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-photo {
    animation: none;
  }

  .entry-photo-latina-couple {
    opacity: 1;
  }
}

/* Noysey home should read as a calling app, not a dashboard. */
.app[data-screen="home"] {
  width: 100%;
  max-width: none;
  grid-template-rows: minmax(0, 1fr);
  background: var(--appearance-shell-bg);
  color: var(--appearance-text);
}

.app[data-screen="home"] .topbar {
  display: none;
}

.app[data-screen="home"] .bottom-nav {
  display: none;
}

.app[data-screen="home"] .screens {
  overflow: auto;
}

.app[data-screen="home"] .screen.home {
  min-height: 100%;
  width: 100%;
  align-self: stretch;
  justify-self: stretch;
  align-content: start;
  justify-content: center;
  grid-template-columns: minmax(0, 620px);
  gap: 22px;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--appearance-home-bg);
}

.app[data-screen="home"] .home-panel,
.app[data-screen="home"] .groups,
.app[data-screen="home"] .import-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app[data-screen="home"] .home-panel {
  width: 100%;
  display: grid;
  gap: 22px;
  padding: 0;
}

.app[data-screen="home"] .account-strip {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--appearance-line);
  border-radius: 18px;
  background: var(--appearance-soft);
}

.app[data-screen="home"] .account-strip div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.app[data-screen="home"] .account-strip b,
.app[data-screen="home"] .account-strip em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app[data-screen="home"] .account-strip b {
  color: var(--appearance-text);
  font-size: .88rem;
}

.app[data-screen="home"] .account-strip em {
  color: var(--appearance-muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.app[data-screen="home"] .account-strip button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--appearance-text);
  color: var(--appearance-bg);
  font-size: .72rem;
  font-weight: 950;
}

.app[data-signed-in="false"] .account-strip button {
  display: none;
}

.app[data-screen="home"] .home-title {
  min-height: 56px;
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  align-items: center;
}

.app[data-screen="home"] .home-title h1 {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: center;
  margin: 0;
  color: var(--appearance-text);
  font-size: clamp(1.08rem, 4vw, 1.32rem);
  font-weight: 920;
}

.app[data-screen="home"] .home-title h1 img {
  width: 32px;
  height: 32px;
  display: block;
}

.app[data-screen="home"] .home-title button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  background: var(--appearance-soft);
  color: var(--appearance-text);
  font-size: .9rem;
  font-weight: 760;
  box-shadow: inset 0 0 0 1px var(--appearance-line);
}

.app[data-screen="home"] .home-title button:last-child {
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  justify-self: end;
  overflow: hidden;
  color: transparent;
  line-height: 0;
}

.app[data-screen="home"] .home-title button:last-child::before {
  content: "";
  width: 5px;
  height: 5px;
  display: block;
  margin: 0;
  border-radius: 999px;
  background: var(--appearance-menu-icon);
  box-shadow:
    -8px 0 0 var(--appearance-menu-icon),
    8px 0 0 var(--appearance-menu-icon);
}

.app[data-screen="home"] .favorites {
  gap: 0;
}

.app[data-screen="home"] .favorites .section-head {
  display: none;
}

.app[data-screen="home"] .favorite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 20px);
}

.app[data-screen="home"] .favorite-card {
  position: relative;
  min-height: clamp(208px, 29vw, 286px);
  align-content: stretch;
  justify-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--noysey-blue-2) 18%, transparent), transparent 56%),
    var(--appearance-card-bg);
  color: var(--appearance-tile-text);
  text-align: left;
  box-shadow:
    inset 0 0 0 1px var(--appearance-card-line),
    inset 0 1px 0 rgba(255,255,255,.11),
    0 16px 34px var(--appearance-card-glow),
    0 24px 54px var(--appearance-card-lift);
  transition:
    transform var(--noysey-motion-med) var(--noysey-ease),
    filter var(--noysey-motion-med) ease,
    box-shadow var(--noysey-motion-med) ease;
}

.app[data-screen="home"] .favorite-card:hover {
  transform: translateY(-2px);
  filter: saturate(1.04);
  box-shadow:
    inset 0 0 0 1px var(--appearance-card-line),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 42px var(--appearance-card-glow),
    0 30px 64px var(--appearance-card-lift);
}

.app[data-screen="home"] .favorite-card:active {
  transform: translateY(0) scale(.985);
}

.app[data-screen="home"] .favorite-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0 22%, rgba(0,0,0,0) 38%, rgba(0,0,0,.68) 100%),
    var(--cover-art);
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  transition:
    transform 520ms var(--noysey-ease-out),
    filter 520ms ease;
}

.app[data-screen="home"] .favorite-card:hover::before {
  transform: scale(1.035);
}

.app[data-screen="home"] .favorite-card.no-cover::before {
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.13), transparent 0 21%),
    radial-gradient(circle at 50% 52%, transparent 0 35%, rgba(255,255,255,.16) 36% 37%, transparent 38%),
    linear-gradient(145deg, rgba(52,104,229,.46), rgba(6,22,56,.1) 44%, rgba(0,0,0,.28)),
    linear-gradient(180deg, rgba(255,255,255,.08) 0 20%, rgba(0,0,0,0) 42%, rgba(0,0,0,.58) 100%),
    #0b2257;
}

.app[data-screen="home"] .favorite-card.no-cover::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(199,215,255,.2);
  border-radius: 24px;
  pointer-events: none;
}

.app[data-screen="home"] .favorite-card.has-custom-art::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0 22%, rgba(0,0,0,.02) 40%, rgba(0,0,0,.7) 100%),
    var(--cover-art);
  background-size: cover;
  background-position: center;
}

.app[data-screen="home"] .favorite-card.has-custom-art::after {
  content: none;
}

.app[data-screen="home"] .favorite-card.no-cover span {
  left: 50%;
  right: auto;
  top: 50%;
  width: clamp(76px, 12vw, 108px);
  height: clamp(76px, 12vw, 108px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 48%),
    rgba(181,205,255,.18);
  color: var(--appearance-tile-text);
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.app[data-screen="home"] .favorite-card::after {
  content: none;
}

.app[data-screen="home"] .favorite-card span {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.86);
  font-size: .72rem;
  line-height: 1;
  font-weight: 850;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}

.app[data-screen="home"] .favorite-card b,
.app[data-screen="home"] .favorite-card em {
  position: absolute;
  left: 18px;
  z-index: 1;
  max-width: calc(100% - 72px);
  color: var(--appearance-tile-text);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.app[data-screen="home"] .favorite-card b {
  top: 18px;
  font-size: clamp(1rem, 3.8vw, 1.2rem);
  font-weight: 860;
}

.app[data-screen="home"] .favorite-card em {
  bottom: 22px;
  color: var(--appearance-tile-muted);
  font-size: .86rem;
  font-style: normal;
  font-weight: 760;
}

.app[data-screen="home"] .favorite-card i {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(16px);
  transition:
    transform var(--noysey-motion-med) var(--noysey-ease),
    background var(--noysey-motion-med) ease,
    box-shadow var(--noysey-motion-med) ease;
}

.app[data-screen="home"] .favorite-card:hover i {
  transform: scale(1.04);
  background: rgba(7,87,255,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 12px 26px rgba(7,87,255,.26);
}

.app[data-screen="home"] .favorite-card i::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 17px;
  height: 13px;
  border-radius: 3px;
  background: #fff;
}

.app[data-screen="home"] .favorite-card i::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 17px;
  width: 0;
  height: 0;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  border-left: 8px solid #fff;
}

.app[data-screen="home"] .home-edit-bar {
  display: none;
}

.app[data-screen="home"][data-home-edit="true"] .home-edit-bar {
  width: min(520px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--appearance-card-bg) 78%, transparent);
  box-shadow:
    inset 0 0 0 1px var(--appearance-line),
    0 18px 46px var(--appearance-shadow);
  backdrop-filter: blur(22px);
}

.app[data-screen="home"][data-home-edit="true"] .home-edit-bar button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--appearance-soft);
  color: var(--appearance-tile-text);
  font-size: .74rem;
  font-weight: 850;
}

.app[data-screen="home"][data-home-edit="true"] .home-edit-bar .confirm-edit {
  background: #0757ff;
  color: var(--appearance-tile-text);
}

.app[data-screen="home"][data-home-edit="true"] .home-edit-bar .delete-edit {
  background: rgba(255,59,48,.9);
  color: #fff;
}

.app[data-screen="home"][data-home-edit="true"] .favorite-card {
  cursor: default;
}

.app[data-screen="home"][data-home-edit="true"] .favorite-card::after {
  content: "";
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,.84);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

.app[data-screen="home"][data-home-edit="true"] .favorite-card b {
  max-width: calc(100% - 68px);
}

.app[data-screen="home"][data-home-edit="true"] .favorite-card i {
  opacity: .34;
}

.app[data-screen="home"][data-home-edit="true"] .favorite-card.is-selected::after {
  content: "\2713";
  display: grid;
  place-items: center;
  border-color: #fff;
  background: #0757ff;
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
}

.app[data-screen="home"] .favorite-card.is-removed {
  display: none !important;
}

.app[data-screen="home"] .favorite-card.cover-crew {
  --cover-art: url("assets/covers/crew-cover-v1.png");
}

.app[data-screen="home"] .favorite-card.cover-family {
  --cover-art: url("assets/covers/family-cover-v1.png");
}

.app[data-screen="home"] .favorite-card.cover-danny {
  --cover-art: url("assets/covers/danny-cover-v2.png");
}

.app[data-screen="home"] .favorite-card.cover-lisa {
  --cover-art: url("assets/covers/lisa-cover-v1.png");
}

.app[data-screen="home"] .favorite-card.cover-danny::before {
  background-position: center, center 23%;
}

.app[data-screen="home"] .favorite-card.cover-lisa::before {
  background-position: center, center 22%;
}

.app[data-screen="home"] .no-favorites {
  display: none;
  gap: 16px;
}

.app[data-screen="home"][data-home-mode="starter"] .favorite-grid {
  display: none;
}

.app[data-screen="home"][data-home-mode="starter"] .no-favorites {
  display: grid;
}

.app[data-screen="home"] .favorite-card {
  display: grid;
}

.app[data-screen="home"][data-favorite-count="0"] .favorite-grid,
.app[data-screen="home"][data-favorite-count="0"] .favorites .section-head {
  display: none;
}

.app[data-screen="home"][data-favorite-count="0"] .no-favorites {
  display: grid;
}

.app[data-screen="home"][data-favorite-count="1"] .favorite-card:nth-child(n+2),
.app[data-screen="home"][data-favorite-count="2"] .favorite-card:nth-child(n+3),
.app[data-screen="home"][data-favorite-count="3"] .favorite-card:nth-child(n+4),
.app[data-screen="home"][data-favorite-count="4"] .favorite-card:nth-child(n+5),
.app[data-screen="home"][data-favorite-count="5"] .favorite-card:nth-child(n+6) {
  display: none;
}

.app[data-screen="home"][data-favorite-count="1"] .favorite-grid {
  grid-template-columns: minmax(0, .74fr);
  justify-content: center;
}

.app[data-screen="home"][data-favorite-count="3"] .favorite-card:nth-child(3),
.app[data-screen="home"][data-favorite-count="5"] .favorite-card:nth-child(5) {
  grid-column: 1 / -1;
  width: calc((100% - clamp(14px, 3vw, 20px)) / 2);
  justify-self: center;
}

.app[data-screen="home"] .no-favorites > div:first-child {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.app[data-screen="home"] .no-favorites b {
  color: var(--appearance-text);
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1;
}

.app[data-screen="home"] .no-favorites em {
  max-width: 380px;
  color: var(--appearance-muted);
  font-size: .88rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.32;
}

.app[data-screen="home"] .fallback-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.app[data-screen="home"] .fallback-card {
  position: relative;
  min-height: 210px;
  display: grid;
  align-content: end;
  gap: 5px;
  overflow: hidden;
  padding: 16px;
  border: 0;
  border-radius: 28px;
  background: var(--appearance-card-bg);
  color: var(--appearance-tile-text);
  text-align: left;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.34);
}

.app[data-screen="home"] .fallback-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(66,112,232,.24), transparent 44%),
    linear-gradient(145deg, rgba(58,111,255,.34), rgba(4,18,46,.12) 52%, rgba(0,0,0,.2)),
    #0b2257;
}

.app[data-screen="home"] .fallback-card span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: var(--appearance-tile-text);
  font-size: 1.28rem;
  font-weight: 950;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

.app[data-screen="home"] .fallback-card b,
.app[data-screen="home"] .fallback-card em {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}

.app[data-screen="home"] .fallback-card b {
  color: #fff;
  font-size: 1rem;
}

.app[data-screen="home"] .fallback-card em {
  color: var(--appearance-tile-muted);
  font-size: .78rem;
}

.app[data-screen="home"] .home-actions {
  width: min(420px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding-top: 2px;
}

.app[data-screen="home"][data-home-edit="true"] .home-actions {
  display: none;
}

.app[data-screen="home"] .home-actions .primary {
  grid-column: 1 / -1;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  padding: 0 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% -30%, rgba(255,255,255,.42), transparent 0 48%),
    linear-gradient(135deg, #2f73ff, #0757ff 46%, #063fb8);
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 16px 38px rgba(7,87,255,.34),
    0 2px 0 rgba(255,255,255,.08);
  transition:
    transform var(--noysey-motion-med) var(--noysey-ease),
    filter var(--noysey-motion-med) ease,
    box-shadow var(--noysey-motion-med) ease;
}

.app[data-screen="home"] .home-actions .primary:hover {
  filter: saturate(1.07) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 19px 46px rgba(7,87,255,.42),
    0 2px 0 rgba(255,255,255,.08);
}

.app[data-screen="home"] .home-actions .primary::before {
  content: "";
  width: 22px;
  height: 14px;
  flex: 0 0 auto;
  margin-right: 8px;
  border-radius: 3px;
  background: #fff;
  clip-path: polygon(0 18%, 64% 18%, 64% 32%, 100% 12%, 100% 88%, 64% 68%, 64% 82%, 0 82%);
}

.app[data-screen="home"] .home-actions .primary::after {
  content: none;
}

.app[data-screen="home"] .home-actions .message-action {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%),
    linear-gradient(135deg, #1747a8, #0a2f84);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 34px rgba(7,87,255,.2);
}

.app[data-screen="home"] .home-actions .message-action::before {
  width: 16px;
  height: 13px;
  border-radius: 8px;
  background: #fff;
}

.app[data-screen="home"] .home-actions .secondary {
  min-height: 46px;
  padding: 0 6px;
  border: 1px solid rgba(126,166,255,.16);
  background: var(--appearance-secondary-bg);
  color: var(--appearance-secondary-text);
  font-size: .78rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 26px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.app[data-screen="home"] .home-actions .secondary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.app[data-screen="home"] .home-actions .secondary.is-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, var(--noysey-blue-2), var(--noysey-blue));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 14px 32px rgba(7,87,255,.26);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .screen.is-active {
    animation: none;
  }
}

.app[data-screen="home"] .recents,
.app[data-screen="home"] .import-card,
.app[data-screen="home"] .groups {
  width: 100%;
}

.app[data-screen="home"] .recents,
.app[data-screen="home"] .groups {
  display: none;
}

.app[data-screen="home"][data-home-mode="recents"] .favorites,
.app[data-screen="home"][data-home-mode="groups"] .favorites {
  display: none;
}

.app[data-screen="home"][data-home-mode="recents"] .recents,
.app[data-screen="home"][data-home-mode="groups"] .groups {
  display: grid;
}

.app[data-screen="home"] .section-head .eyebrow,
.app[data-screen="home"] .section-head button {
  color: var(--appearance-muted);
}

.app[data-screen="home"] .section-head button {
  border: 0;
  background: var(--appearance-soft);
}

.app[data-screen="home"] .recent-list button {
  border-color: var(--appearance-line);
  color: var(--appearance-text);
}

.app[data-screen="home"] .recent-list span {
  background: var(--appearance-soft-strong);
}

.app[data-screen="home"] .recent-list b {
  color: var(--appearance-text);
}

.app[data-screen="home"] .recent-list em {
  color: var(--appearance-muted);
}

.app[data-screen="home"] .recent-list small {
  background: var(--appearance-recent-pill-bg);
  color: var(--appearance-recent-pill-text);
}

.app[data-screen="home"] .import-card {
  display: none;
}

.app[data-screen="home"] .import-card b {
  color: var(--appearance-text);
}

.app[data-screen="home"] .import-card button {
  background: var(--appearance-soft);
}

.app[data-screen="profile-customize"] {
  width: 100%;
  max-width: none;
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  background: #05070d;
  color: #fff;
}

.app[data-screen="profile-customize"] .topbar,
.app[data-screen="profile-customize"] .bottom-nav {
  display: none;
}

.app[data-screen="profile-customize"] .screens,
.app[data-screen="profile-customize"] .screen.profile-customize {
  min-height: 100dvh;
}

.screen.profile-customize {
  align-content: stretch;
  justify-content: center;
  grid-template-columns: minmax(0, 520px);
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.02) 45%, rgba(0,0,0,.24)),
    var(--noysey-paper);
}

.profile-customize-panel {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: max(48px, calc(env(safe-area-inset-top) + 22px)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}

.profile-customize-top {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 12px;
}

.profile-customize-top > button {
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 850;
}

.profile-customize-top nav {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(214px, 100%);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
}

.profile-customize-top nav button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.76);
  font-weight: 820;
}

.profile-customize-top nav button.is-active {
  background: rgba(255,255,255,.22);
  color: #fff;
}

.profile-preview {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.poster-preview {
  width: min(320px, 72vw);
  aspect-ratio: 9 / 14;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 42px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 36%, rgba(0,0,0,.34)),
    var(--noysey-paper);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 26px 76px rgba(0,0,0,.42);
}

.app[data-profile-mode="avatar"] .poster-preview {
  width: min(290px, 72vw);
  aspect-ratio: 1;
  border-radius: 999px;
}

.app[data-profile-mode="avatar"] .poster-preview b {
  display: none;
}

.app[data-profile-color="cobalt"] .poster-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 36%, rgba(0,0,0,.34)),
    linear-gradient(145deg, #4f8cff, #003fdb);
}

.app[data-profile-color="graphite"] .poster-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 36%, rgba(0,0,0,.34)),
    linear-gradient(145deg, #7c8799, #111722);
}

.app[data-profile-color="copper"] .poster-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 36%, rgba(0,0,0,.34)),
    linear-gradient(145deg, #ecd2ba, #6a2608);
}

.app[data-profile-color="ice"] .poster-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 36%, rgba(0,0,0,.14)),
    linear-gradient(145deg, #ffffff, #91b9ff);
}

.poster-preview span {
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 3.2rem;
  font-weight: 820;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -18px 36px rgba(0,0,0,.22),
    0 20px 42px rgba(0,0,0,.22);
}

.poster-preview.has-photo span {
  background: rgba(0,0,0,.28);
  font-size: 1.4rem;
  opacity: .76;
}

.poster-preview b {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(2rem, 12vw, 3.8rem);
  line-height: 1;
  text-align: center;
}

.profile-preview > button {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(18,18,24,.62);
  color: #fff;
  font-weight: 900;
  backdrop-filter: blur(18px);
}

.customize-options {
  display: grid;
  gap: 18px;
  overflow: auto;
  padding-bottom: 10px;
}

.customize-options article {
  display: grid;
  gap: 10px;
}

.customize-options h3 {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 1.08rem;
}

.option-row,
.color-row,
.appearance-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.photo-rule-actions {
  display: grid;
  gap: 10px;
}

.photo-rule-actions button {
  min-height: 62px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    rgba(9,18,38,.62);
  color: #fff;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 30px rgba(0,0,0,.18);
}

.photo-rule-actions span {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 52%),
    linear-gradient(145deg, var(--noysey-blue-2), var(--noysey-blue-3));
  font-size: .78rem;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.photo-rule-actions b,
.photo-rule-actions em {
  min-width: 0;
}

.photo-rule-actions b {
  font-size: .9rem;
  font-weight: 900;
}

.photo-rule-actions em {
  color: rgba(255,255,255,.64);
  font-size: .74rem;
  font-style: normal;
  font-weight: 720;
}

.option-row button,
.color-row button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 28px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.option-row button span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
}

.photo-swatch:nth-child(2) span {
  background: linear-gradient(145deg, #4d657f, #161b24);
}

.photo-swatch:nth-child(3) span {
  background: linear-gradient(145deg, #bca06e, #2a1410);
}

.photo-swatch:nth-child(4) span {
  background: linear-gradient(145deg, #c8d7ff, #12347e);
}

.option-row [data-profile-option="mono-gold"] span {
  background: linear-gradient(145deg, #fff1a1, #d99100);
}

.option-row [data-profile-option="mono-blue"] span {
  background: linear-gradient(145deg, #9ee7ff, #003fdb);
}

.option-row [data-profile-option="mono-red"] span {
  background: linear-gradient(145deg, #f59aa4, #7c0008);
}

.color-row [data-profile-color="paper"] { background: var(--noysey-paper); }
.color-row [data-profile-color="cobalt"] { background: linear-gradient(145deg, #4f8cff, #003fdb); }
.color-row [data-profile-color="graphite"] { background: linear-gradient(145deg, #7c8799, #111722); }
.color-row [data-profile-color="copper"] { background: linear-gradient(145deg, #ecd2ba, #6a2608); }
.color-row [data-profile-color="ice"] { background: linear-gradient(145deg, #ffffff, #91b9ff); }

.color-row button.is-active {
  outline: 3px solid rgba(255,255,255,.82);
  outline-offset: 3px;
}

.appearance-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.appearance-row button {
  min-height: 74px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 14px 32px rgba(0,0,0,.16);
}

.appearance-row button span {
  width: 44px;
  height: 30px;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 8px 18px rgba(0,0,0,.2);
}

.appearance-row [data-appearance="blue"] span {
  background: linear-gradient(135deg, #0757ff, #06142f);
}

.appearance-row [data-appearance="white"] span {
  background: linear-gradient(135deg, #ffffff, #dce8ff);
}

.appearance-row [data-appearance="black"] span {
  background: linear-gradient(135deg, #1a1d24, #000000);
}

.appearance-row button.is-active {
  border-color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.22);
}

.sharing-toggle {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 12px 8px 20px;
  border-radius: 999px;
  background: rgba(18,18,24,.54);
  color: #fff;
  font-weight: 780;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
}

.sharing-toggle input {
  width: 54px;
  height: 32px;
  accent-color: #0757ff;
}

@media (min-width: 900px) {
  .bottom-nav {
    display: none;
  }

  .app {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app[data-screen="home"] {
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
  }

  .app[data-screen="home"] .bottom-nav {
    display: none;
  }

  .app[data-screen="home"] .screen.home {
    grid-template-columns: minmax(0, 1160px);
    align-items: center;
    align-content: center;
    min-height: 100dvh;
    padding: 40px 72px;
  }

  .app[data-screen="home"][data-home-edit="true"] .screen.home {
    align-content: start;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .app[data-screen="home"] .home-panel {
    gap: 26px;
  }

  .app[data-screen="home"] .home-title {
    grid-template-columns: 92px 1fr 92px;
  }

  .app[data-screen="home"] .home-title h1 img {
    width: 36px;
    height: 36px;
  }

  .app[data-screen="home"] .favorite-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .app[data-screen="home"][data-favorite-count="1"] .favorite-grid {
    grid-template-columns: minmax(0, 320px);
  }

  .app[data-screen="home"][data-favorite-count="2"] .favorite-grid {
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
  }

  .app[data-screen="home"] .favorite-card {
    grid-column: span 3;
    min-height: clamp(190px, 25dvh, 244px);
  }

  .app[data-screen="home"] .favorite-card:nth-child(1),
  .app[data-screen="home"] .favorite-card:nth-child(2) {
    grid-column: span 6;
    min-height: clamp(252px, 34dvh, 330px);
  }

  .app[data-screen="home"][data-favorite-count="1"] .favorite-card:nth-child(1) {
    grid-column: 4 / span 6;
    min-height: clamp(320px, 48dvh, 430px);
  }

  .app[data-screen="home"][data-favorite-count="2"] .favorite-card:nth-child(1),
  .app[data-screen="home"][data-favorite-count="2"] .favorite-card:nth-child(2),
  .app[data-screen="home"][data-favorite-count="3"] .favorite-card,
  .app[data-screen="home"][data-favorite-count="4"] .favorite-card {
    grid-column: span 6;
  }

  .app[data-screen="home"][data-favorite-count="3"] .favorite-card:nth-child(3) {
    grid-column: 4 / span 6;
    width: auto;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card:nth-child(5) {
    grid-column: 5 / span 4;
    width: auto;
    justify-self: stretch;
  }

  .app[data-screen="home"] .home-actions {
    width: min(640px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
  }

  .app[data-screen="home"] .home-actions .primary,
  .app[data-screen="home"] .home-actions .secondary {
    min-height: 50px;
  }

  .app[data-screen="home"] .group-row {
    grid-template-columns: 1fr;
  }

  .app[data-screen="home"] .group-row button {
    border: 0;
    background: rgba(255,255,255,.08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }

  .app[data-screen="home"] .group-row b {
    color: #fff;
  }

  .app[data-screen="home"] .group-row em {
    color: rgba(255,255,255,.58);
  }
}

@media (max-width: 640px) {
  .app[data-screen="home"] {
    padding: 0;
  }

  .app[data-screen="home"] .screen.home {
    grid-template-columns: minmax(0, 1fr);
    padding: max(42px, calc(env(safe-area-inset-top) + 16px)) 22px max(18px, env(safe-area-inset-bottom));
  }

  .app[data-screen="home"] .home-panel {
    gap: 16px;
  }

  .app[data-screen="home"] .home-title {
    grid-template-columns: 68px 1fr 68px;
  }

  .app[data-screen="home"] .favorite-grid {
    gap: 14px 16px;
  }

  .app[data-screen="home"] .favorite-card {
    min-height: min(32dvh, 232px);
    border-radius: 28px;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card:nth-child(-n+2),
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card:nth-child(-n+2) {
    min-height: min(29dvh, 198px);
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card {
    min-height: 158px;
    border-radius: 24px;
  }

  .app[data-screen="home"] .home-actions {
    gap: 8px;
    padding-top: 0;
  }

  .app[data-screen="home"] .home-actions .primary {
    min-height: 50px;
  }

  .app[data-screen="home"] .home-actions .secondary {
    min-height: 44px;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card b,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card b {
    top: 14px;
    left: 14px;
    max-width: calc(100% - 54px);
    font-size: .98rem;
    line-height: 1.05;
  }

  .app[data-screen="home"][data-home-edit="true"] .favorite-card b {
    max-width: calc(100% - 56px);
  }

  .app[data-screen="home"][data-home-edit="true"] .favorite-card::after {
    inset: 10px 10px auto auto;
    width: 28px;
    height: 28px;
  }

  .poster-preview {
    width: min(268px, 64vw);
    aspect-ratio: 9 / 12.4;
    border-radius: 34px;
  }

  .app[data-profile-mode="avatar"] .poster-preview {
    width: min(240px, 60vw);
  }

  .poster-preview span {
    width: 118px;
    height: 118px;
    font-size: 2.7rem;
  }

  .profile-customize-panel {
    gap: 14px;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card em,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card em {
    bottom: 16px;
    left: 14px;
    font-size: .76rem;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card span,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card span {
    width: 30px;
    height: 30px;
    right: 11px;
    top: 11px;
    font-size: .66rem;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card.no-cover span,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card.no-cover span {
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    font-size: 1rem;
    transform: translate(-50%, -50%);
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card i,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card i {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card i::before,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card i::before {
    left: 10px;
    top: 13px;
    width: 14px;
    height: 11px;
  }

  .app[data-screen="home"][data-favorite-count="5"] .favorite-card i::after,
  .app[data-screen="home"][data-favorite-count="6"] .favorite-card i::after {
    left: 23px;
    top: 14px;
    border-top-width: 4.5px;
    border-bottom-width: 4.5px;
    border-left-width: 7px;
  }

  .app[data-screen="home"] .import-card {
    display: none;
  }

  .app[data-screen="home"] .fallback-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .app[data-screen="home"] .fallback-card {
    min-height: 128px;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon meta";
    align-content: center;
    align-items: center;
    gap: 4px 14px;
  }

  .app[data-screen="home"] .fallback-card span {
    grid-area: icon;
    position: relative;
    top: auto;
    left: auto;
    width: 74px;
    height: 74px;
    transform: none;
  }

  .app[data-screen="home"] .fallback-card b {
    grid-area: title;
    font-size: 1.08rem;
  }

  .app[data-screen="home"] .fallback-card em {
    grid-area: meta;
    font-size: .86rem;
  }
}