*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

* {
  margin: 0;
}

@font-face {
  font-family: "Geist";
  src: url("GeistVF.woff2") format("woff2");
}

html {
  --roomy-color-brand-10: #002019;
  --roomy-color-brand-20: #00382d;
  --roomy-color-brand-30: #005142;
  --roomy-color-brand-40: #006b58;
  --roomy-color-brand-80: #00e0bb;
  --roomy-color-brand-90: #48fdd6;
  --roomy-color-brand-100: white;

  --roomy-color-red-20: #690100;
  --roomy-color-red-40: #c00100;
  --roomy-color-red-80: #ffb4a8;
  --roomy-color-red-100: white;

  --roomy-color-pink-20: #65002e;
  --roomy-color-pink-40: #ba005b;
  --roomy-color-pink-80: #ffb1c4;
  --roomy-color-pink-100: white;

  --roomy-color-magenta-20: #5b005b;
  --roomy-color-magenta-40: #a900a9;
  --roomy-color-magenta-80: #ffabf3;
  --roomy-color-magenta-100: white;

  --roomy-color-indigo-20: #42008a;
  --roomy-color-indigo-40: #7d00fa;
  --roomy-color-indigo-80: #d5baff;
  --roomy-color-indigo-100: white;

  --roomy-color-blue-20: #0001ac;
  --roomy-color-blue-40: #343dff;
  --roomy-color-blue-80: #bec2ff;
  --roomy-color-blue-100: white;

  --roomy-color-light-blue-20: #002f66;
  --roomy-color-light-blue-40: #005cbc;
  --roomy-color-light-blue-80: #abc7ff;
  --roomy-color-light-blue-100: white;

  --roomy-color-aqua-20: #003737;
  --roomy-color-aqua-40: #006a6a;
  --roomy-color-aqua-80: #00dddd;
  --roomy-color-aqua-100: white;

  --roomy-color-green-20: #003917;
  --roomy-color-green-40: #006d32;
  --roomy-color-green-80: #00e471;
  --roomy-color-green-100: white;

  --roomy-color-lime-20: #013a00;
  --roomy-color-lime-40: #026e00;
  --roomy-color-lime-80: #02e600;
  --roomy-color-lime-100: white;

  --roomy-color-chartreuse-20: #173800;
  --roomy-color-chartreuse-40: #326b00;
  --roomy-color-chartreuse-80: #6fe000;
  --roomy-color-chartreuse-100: white;

  --roomy-color-yellow-20: #323200;
  --roomy-color-yellow-40: #626200;
  --roomy-color-yellow-80: #cdcd00;
  --roomy-color-yellow-100: white;

  --roomy-color-orange-20: #512400;
  --roomy-color-orange-40: #974900;
  --roomy-color-orange-80: #ffb688;
  --roomy-color-orange-100: white;

  --roomy-color-neutral-10: #191c1b;
  --roomy-color-neutral-10-12: #191c1b1f;
  --roomy-color-neutral-10-24: #191c1b3d;
  --roomy-color-neutral-30: #444846;
  --roomy-color-neutral-90: #e1e3e0;
  --roomy-color-neutral-90-12: #e1e3e01f;
  --roomy-color-neutral-90-24: #e1e3e03d;
  --roomy-color-neutral-99: #fbfdfa;

  --roomy-color-neutral-variant-50: #6f7975;
  --roomy-color-neutral-variant-50-12: #6f79751f;
  --roomy-color-neutral-variant-50-24: #6f79753d;
  --roomy-color-neutral-variant-60: #89938f;
  --roomy-color-neutral-variant-60-12: #89938f1f;
  --roomy-color-neutral-variant-60-24: #89938f3d;

  font-size: 16px;

  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

html.canary {
  --roomy-color-brand-10: #2b1700;
  --roomy-color-brand-20: #472a00;
  --roomy-color-brand-30: #663e00;
  --roomy-color-brand-40: #865300;
  --roomy-color-brand-80: #ffb961;
  --roomy-color-brand-90: #ffddb8;
  --roomy-color-brand-100: white;

  --roomy-color-neutral-10: #1f1b16;
  --roomy-color-neutral-30: #4c4640;
  --roomy-color-neutral-90: #ebe1d9;
  --roomy-color-neutral-99: #fffbff;

  --roomy-color-neutral-variant-50: #827568;
  --roomy-color-neutral-variant-60: #9c8e81;
}

html.unbranded {
  --roomy-color-brand-10: #001a41;
  --roomy-color-brand-20: #002e68;
  --roomy-color-brand-30: #004493;
  --roomy-color-brand-40: #005bc0;
  --roomy-color-brand-80: #adc6ff;
  --roomy-color-brand-90: #d8e2ff;
  --roomy-color-brand-100: white;

  --roomy-color-neutral-10: #1b1b1f;
  --roomy-color-neutral-30: #46464a;
  --roomy-color-neutral-90: #e3e2e6;
  --roomy-color-neutral-99: #fefbff;

  --roomy-color-neutral-variant-50: #74777f;
  --roomy-color-neutral-variant-60: #8e9099;
}

html {
  --roomy-color-brand: var(--roomy-color-brand-40);
  --roomy-color-on-brand: var(--roomy-color-brand-100);
  --roomy-color-brand-container: var(--roomy-color-brand-90);
  --roomy-color-on-brand-container: var(--roomy-color-brand-10);

  --roomy-color-inverse-brand: var(--roomy-color-brand-80);

  --roomy-color-red: var(--roomy-color-red-40);
  --roomy-color-on-red: var(--roomy-color-red-100);
  --roomy-color-red-container: var(--roomy-color-red-90);
  --roomy-color-on-red-container: var(--roomy-color-red-10);

  --roomy-color-pink: var(--roomy-color-pink-40);
  --roomy-color-on-pink: var(--roomy-color-pink-100);
  --roomy-color-pink-container: var(--roomy-color-pink-90);
  --roomy-color-on-pink-container: var(--roomy-color-pink-10);

  --roomy-color-magenta: var(--roomy-color-magenta-40);
  --roomy-color-on-magenta: var(--roomy-color-magenta-100);
  --roomy-color-magenta-container: var(--roomy-color-magenta-90);
  --roomy-color-on-magenta-container: var(--roomy-color-magenta-10);

  --roomy-color-indigo: var(--roomy-color-indigo-40);
  --roomy-color-on-indigo: var(--roomy-color-indigo-100);
  --roomy-color-indigo-container: var(--roomy-color-indigo-90);
  --roomy-color-on-indigo-container: var(--roomy-color-indigo-10);

  --roomy-color-blue: var(--roomy-color-blue-40);
  --roomy-color-on-blue: var(--roomy-color-blue-100);
  --roomy-color-blue-container: var(--roomy-color-blue-90);
  --roomy-color-on-blue-container: var(--roomy-color-blue-10);

  --roomy-color-light-blue: var(--roomy-color-light-blue-40);
  --roomy-color-on-light-blue: var(--roomy-color-light-blue-100);
  --roomy-color-light-blue-container: var(--roomy-color-light-blue-90);
  --roomy-color-on-light-blue-container: var(--roomy-color-light-blue-10);

  --roomy-color-indigo: var(--roomy-color-blue-40);
  --roomy-color-on-blue: var(--roomy-color-blue-100);
  --roomy-color-blue-container: var(--roomy-color-blue-90);
  --roomy-color-on-blue-container: var(--roomy-color-blue-10);

  --roomy-color-aqua: var(--roomy-color-aqua-40);
  --roomy-color-on-aqua: var(--roomy-color-aqua-100);
  --roomy-color-aqua-container: var(--roomy-color-aqua-90);
  --roomy-color-on-aqua-container: var(--roomy-color-aqua-10);

  --roomy-color-green: var(--roomy-color-green-40);
  --roomy-color-on-green: var(--roomy-color-green-100);
  --roomy-color-green-container: var(--roomy-color-green-90);
  --roomy-color-on-green-container: var(--roomy-color-green-10);

  --roomy-color-lime: var(--roomy-color-lime-40);
  --roomy-color-on-lime: var(--roomy-color-lime-100);
  --roomy-color-lime-container: var(--roomy-color-lime-90);
  --roomy-color-on-lime-container: var(--roomy-color-lime-10);

  --roomy-color-chartreuse: var(--roomy-color-chartreuse-40);
  --roomy-color-on-chartreuse: var(--roomy-color-chartreuse-100);
  --roomy-color-chartreuse-container: var(--roomy-color-chartreuse-90);
  --roomy-color-on-chartreuse-container: var(--roomy-color-chartreuse-10);

  --roomy-color-yellow: var(--roomy-color-yellow-40);
  --roomy-color-on-yellow: var(--roomy-color-yellow-100);
  --roomy-color-yellow-container: var(--roomy-color-yellow-90);
  --roomy-color-on-yellow-container: var(--roomy-color-yellow-10);

  --roomy-color-orange: var(--roomy-color-orange-40);
  --roomy-color-on-orange: var(--roomy-color-orange-100);
  --roomy-color-orange-container: var(--roomy-color-orange-90);
  --roomy-color-on-orange-container: var(--roomy-color-orange-10);

  --roomy-color-background: var(--roomy-color-neutral-99);
  --roomy-color-on-background: var(--roomy-color-neutral-10);

  --roomy-color-card: var(--roomy-color-neutral-90);
  --roomy-color-on-card: var(--roomy-color-neutral-10);

  --roomy-color-inverse-on-background: var(--roomy-color-neutral-90);

  --roomy-color-outline: var(--roomy-color-neutral-variant-50);
  --roomy-color-neutral-container: var(--roomy-color-neutral-90);
}

@media (prefers-color-scheme: dark) {
  html {
    --roomy-color-brand: var(--roomy-color-brand-80);
    --roomy-color-on-brand: var(--roomy-color-brand-20);
    --roomy-color-brand-container: var(--roomy-color-brand-30);
    --roomy-color-on-brand-container: var(--roomy-color-brand-90);

    --roomy-color-inverse-brand: var(--roomy-color-brand-40);

    --roomy-color-red: var(--roomy-color-red-80);
    --roomy-color-on-red: var(--roomy-color-red-20);
    --roomy-color-red-container: var(--roomy-color-red-30);
    --roomy-color-on-red-container: var(--roomy-color-red-90);

    --roomy-color-pink: var(--roomy-color-pink-80);
    --roomy-color-on-pink: var(--roomy-color-pink-20);
    --roomy-color-pink-container: var(--roomy-color-pink-30);
    --roomy-color-on-pink-container: var(--roomy-color-pink-90);

    --roomy-color-magenta: var(--roomy-color-magenta-80);
    --roomy-color-on-magenta: var(--roomy-color-magenta-20);
    --roomy-color-magenta-container: var(--roomy-color-magenta-30);
    --roomy-color-on-magenta-container: var(--roomy-color-magenta-90);

    --roomy-color-indigo: var(--roomy-color-indigo-80);
    --roomy-color-on-indigo: var(--roomy-color-indigo-20);
    --roomy-color-indigo-container: var(--roomy-color-indigo-30);
    --roomy-color-on-indigo-container: var(--roomy-color-indigo-90);

    --roomy-color-blue: var(--roomy-color-blue-80);
    --roomy-color-on-blue: var(--roomy-color-blue-20);
    --roomy-color-blue-container: var(--roomy-color-blue-30);
    --roomy-color-on-blue-container: var(--roomy-color-blue-90);

    --roomy-color-light-blue: var(--roomy-color-light-blue-80);
    --roomy-color-on-light-blue: var(--roomy-color-light-blue-20);
    --roomy-color-light-blue-container: var(--roomy-color-light-blue-30);
    --roomy-color-on-light-blue-container: var(--roomy-color-light-blue-90);

    --roomy-color-aqua: var(--roomy-color-aqua-80);
    --roomy-color-on-aqua: var(--roomy-color-aqua-20);
    --roomy-color-aqua-container: var(--roomy-color-aqua-30);
    --roomy-color-on-aqua-container: var(--roomy-color-aqua-90);

    --roomy-color-green: var(--roomy-color-green-80);
    --roomy-color-on-green: var(--roomy-color-green-20);
    --roomy-color-green-container: var(--roomy-color-green-30);
    --roomy-color-on-green-container: var(--roomy-color-green-90);

    --roomy-color-lime: var(--roomy-color-lime-80);
    --roomy-color-on-lime: var(--roomy-color-lime-20);
    --roomy-color-lime-container: var(--roomy-color-lime-30);
    --roomy-color-on-lime-container: var(--roomy-color-lime-90);

    --roomy-color-chartreuse: var(--roomy-color-chartreuse-80);
    --roomy-color-on-chartreuse: var(--roomy-color-chartreuse-20);
    --roomy-color-chartreuse-container: var(--roomy-color-chartreuse-30);
    --roomy-color-on-chartreuse-container: var(--roomy-color-chartreuse-90);

    --roomy-color-yellow: var(--roomy-color-yellow-80);
    --roomy-color-on-yellow: var(--roomy-color-yellow-20);
    --roomy-color-yellow-container: var(--roomy-color-yellow-30);
    --roomy-color-on-yellow-container: var(--roomy-color-yellow-90);

    --roomy-color-orange: var(--roomy-color-orange-80);
    --roomy-color-on-orange: var(--roomy-color-orange-20);
    --roomy-color-orange-container: var(--roomy-color-orange-30);
    --roomy-color-on-orange-container: var(--roomy-color-orange-90);

    --roomy-color-background: var(--roomy-color-neutral-10);
    --roomy-color-on-background: var(--roomy-color-neutral-90);

    --roomy-color-inverse-on-background: var(--roomy-color-neutral-10);

    --roomy-color-card: var(--roomy-color-neutral-30);
    --roomy-color-on-card: var(--roomy-color-neutral-90);

    --roomy-color-outline: var(--roomy-color-neutral-variant-60);
    --roomy-color-outline-12: var(--roomy-color-neutral-variant-60-12);
    --roomy-color-outline-24: var(--roomy-color-neutral-variant-60-24);
    --roomy-color-neutral-container: var(--roomy-color-neutral-30);
  }
}

body {
  --roomy-body-padding: 0;
  background: var(--roomy-color-background);
  color: var(--roomy-color-on-background);
  font-family: "Geist";
  font-size: 14px;
  font-weight: 84;
  line-height: 21px;
  margin: 0 auto;
  overflow-wrap: break-word;
  overflow-x: hidden;
  padding: var(--roomy-body-padding);
  pointer-events: auto;
  word-break: break-word;
}

/*Tooltips*/
roomy-tooltip {
  display: block;
  position: absolute;
  padding: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--roomy-color-background);
  background: var(--roomy-color-on-background);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 300ms var(--easing);
  pointer-events: none;
}

/*Icons*/
roomy-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

roomy-field {
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  background: var(--roomy-color-card);
  border: none;
  border-radius: 20px;
  color: var(--roomy-color-on-card);
  height: 56px;
  padding: 0 16px;
  width: 100%;
}
textarea {
  background: var(--roomy-color-card);
  border: none;
  border-radius: 20px;
  color: var(--roomy-color-on-card);
  min-height: 56px;
  padding: 16px;
  width: 100%;
  transition: height 200ms var(--easing);
}

/* Buttons*/
button,
input[type="submit"] {
  align-items: center;
  background: none;
  border: none;
  border-radius: 100px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: color 200ms var(--easing);
  white-space: nowrap;
}
button.small,
input.small[type="submit"] {
  height: 32px;
  font-weight: 106;
  font-size: 12px;
  line-height: 12px;
  padding: 0 14px;
}
button.filled.brand,
input.filled.brand[type="submit"] {
  background-color: var(--roomy-color-brand);
  color: var(--roomy-color-on-brand);
}
button.filled.secondary,
input.filled.secondary[type="submit"] {
  background-color: var(--roomy-color-card);
  color: var(--roomy-color-on-card);
}
button.text.secondary,
input.text.secondary[type="submit"] {
  color: var(--roomy-color-outline);
}
button.text.secondary:hover,
input.text.secondary[type="submit"]:hover {
  color: var(--roomy-color-on-background);
}
button.text.brand,
input.text.brand[type="submit"] {
  color: var(--roomy-color-brand);
}
button.text.inverse-brand,
input.text.inverse-brand[type="submit"] {
  color: var(--roomy-color-inverse-brand);
}
button.text.secondary:active,
input.text.secondary[type="submit"]:active {
  color: var(--roomy-color-on-background);
}
button.pronounced,
input.pronounced[type="submit"] {
  flex: 1;
}
button::after,
input[type="submit"]::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--easing);
}
button:hover::after,
input[type="submit"]:hover::after {
  opacity: 0.12;
}
button:active::after,
input[type="submit"]:active::after {
  opacity: 0.24;
}
button.filled.brand::after,
input.brand[type="submit"]::after {
  background-color: var(--roomy-color-on-brand);
}
button.filled.secondary::after,
input.filled.secondary[type="submit"]::after {
  background-color: var(--roomy-color-on-card);
}
button.text.brand::after,
input.text.brand[type="submit"]::after {
  background-color: var(--roomy-color-brand);
}
button.text.inverse-brand::after,
input.text.inverse-brand[type="submit"]::after {
  background-color: var(--roomy-color-inverse-brand);
}
button.text.secondary::after,
input.text.secondary[type="submit"]::after {
  background-color: var(--roomy-color-on-background);
}
button.small roomy-icon {
  width: 16px;
  height: 16px;
}

/*Tabs*/
roomy-tab-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 40px;
}
roomy-tab-group a {
  align-items: center;
  background: none;
  border: none;
  border-radius: 100px;
  box-sizing: border-box;
  color: var(--roomy-color-on-background);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  gap: 8px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: color 200ms var(--easing);
  white-space: nowrap;
}
roomy-tab-group a::after {
  background-color: var(--roomy-color-on-background);
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--easing);
}
roomy-tab-group a:active::after,
roomy-tab-group a.active::after {
  opacity: 0.24;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
h1 {
  font-size: 32px;
  font-weight: 146;
  line-height: 48px;
}
h2 {
  font-size: 24px;
  font-weight: 146;
  line-height: 36px;
}
h3 {
  font-size: 18px;
  font-weight: 106;
  line-height: 27px;
}
strong {
  font-weight: 146;
}

a {
  color: var(--roomy-color-brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/*Tables*/
roomy-table-block {
  display: block;
  width: fit-content;
  border: 1px solid var(--roomy-color-outline);
  border-radius: 16px;
  overflow: hidden;
}
table {
  border-spacing: 0;
  border-collapse: separate;
}
table th {
  font-size: 14px;
  font-weight: 106;
  line-height: 20px;
  background-color: var(--roomy-color-inverse-on-background);
  padding-block: 18.5px;
  padding-inline: 16px;
  text-align: left;
}
table td {
  font-size: 14px;
  line-height: 20px;
  border-top: 1px solid var(--roomy-color-outline);
  padding: 16px;
}

/*Snackbar*/
roomy-snackbar {
  align-items: center;
  background-color: var(--roomy-color-on-background);
  border-radius: 4px;
  bottom: 104px;
  color: var(--roomy-color-background);
  display: flex;
  font-size: 14px;
  line-height: 20px;
  min-height: 48px;
  opacity: 0;
  padding: 0 16px;
  position: fixed;
  transform: translate3d(0, 8px, 0);
  transform-origin: center;
  transition: opacity 200ms var(--easing) 0ms, transform 200ms var(--easing),
    background-color 200ms var(--easing), color 200ms var(--easing);
}
@media (min-width: 768px) {
  roomy-snackbar {
    bottom: 24px;
  }
}
roomy-snackbar[data-position="start"] {
  left: 24px;
}
roomy-snackbar[data-position="center"] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
roomy-snackbar[data-position="end"] {
  right: 24px;
}
roomy-snackbar > span {
  margin: 12px 0;
  padding: 0 8px;
}

/*Avatars*/
roomy-avatar {
  display: block;
  border-radius: 50%;
  position: relative;
}
roomy-avatar img {
  border-radius: 50%;
}
roomy-avatar .default {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
roomy-avatar .default.brand {
  background-color: var(--roomy-color-brand);
  color: var(--roomy-color-on-brand);
}
roomy-avatar .default.red {
  background-color: var(--roomy-color-red);
  color: var(--roomy-color-on-red);
}
roomy-avatar .default.pink {
  background-color: var(--roomy-color-pink);
  color: var(--roomy-color-on-pink);
}
roomy-avatar .default.magenta {
  background-color: var(--roomy-color-magenta);
  color: var(--roomy-color-on-magenta);
}
roomy-avatar .default.indigo {
  background-color: var(--roomy-color-indigo);
  color: var(--roomy-color-on-indigo);
}
roomy-avatar .default.blue {
  background-color: var(--roomy-color-blue);
  color: var(--roomy-color-on-blue);
}
roomy-avatar .default.light-blue {
  background-color: var(--roomy-color-grlight-blueeen);
  color: var(--roomy-color-on-light-blue);
}
roomy-avatar .default.aqua {
  background-color: var(--roomy-color-aqua);
  color: var(--roomy-color-on-aqua);
}
roomy-avatar .default.green {
  background-color: var(--roomy-color-green);
  color: var(--roomy-color-on-green);
}
roomy-avatar .default.lime {
  background-color: var(--roomy-color-lime);
  color: var(--roomy-color-on-lime);
}
roomy-avatar .default.chartreuse {
  background-color: var(--roomy-color-chartreuse);
  color: var(--roomy-color-on-chartreuse);
}
roomy-avatar .default.yellow {
  background-color: var(--roomy-color-yellow);
  color: var(--roomy-color-on-yellow);
}
roomy-avatar .default.orange {
  background-color: var(--roomy-color-orange);
  color: var(--roomy-color-on-orange);
}

roomy-avatar .customize {
  align-items: center;
  background-color: var(--roomy-color-background);
  color: var(--roomy-color-on-background);
  bottom: 0;
  border-radius: 50%;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: -8px;
  width: 32px;
}
roomy-avatar .customize roomy-icon {
  width: 16px;
  height: 16px;
}

/*Player*/
video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/*Drag and Drop*/
roomy-drag-and-drop {
  display: block;
  border: 2px dashed var(--roomy-color-outline);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
roomy-drag-and-drop span {
  font-size: 18px;
}
#file-list {
  list-style-type: none;
}

roomy-app {
  --roomy-navbar-height: 48px;
  --roomy-header-large-height: 56px;
  --roomy-bottom-padding: 52px;
  --page-y-padding: var(--roomy-navbar-height);
}

@media (min-width: 768px) {
  roomy-app {
    --roomy-navbar-height: 56px;
  }
}

roomy-navbar {
  align-items: center;
  background-color: var(--roomy-color-background);
  border-bottom: 1px solid var(--roomy-color-outline);
  display: flex;
  flex-direction: row;
  height: 48px;
  justify-content: space-between;
  margin-left: 16px;
  margin-right: 16px;
  padding-left: 12.81px;
  padding-right: 6px;
  position: fixed;
  width: calc(100% - 32px);
  z-index: 2;
}
@media (min-width: 768px) {
  roomy-navbar {
    height: 56px;
  }
}
@media (min-width: 1416px) {
  roomy-navbar {
    margin-left: 24px;
    margin-right: 24px;
  }
}

#roomy-logo {
  display: flex;
  text-decoration: none;
  align-items: center;
  margin-right: 36px;
}

#roomy-logo svg:first-of-type {
  display: none;
}
#roomy-logo svg:nth-of-type(2) {
  display: block;
  margin-left: 2.19px;
}
@media (min-width: 960px) {
  #roomy-logo svg:first-of-type {
    display: block;
  }
  #roomy-logo svg:nth-of-type(2) {
    display: none;
  }
}

roomy-navbar roomy-tab-group {
  background-color: var(--roomy-color-card);
  justify-content: space-around;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  padding: 12px 0 16px;
  overflow: hidden;
  box-sizing: border-box;
  position: fixed;
  z-index: 2;
}
roomy-navbar roomy-tab-group a {
  height: 56px;
  width: 80px;
  flex-direction: column;
}
roomy-navbar roomy-tab-group a::after {
  content: none;
}
roomy-navbar roomy-tab-group a roomy-icon {
  align-items: center;
  border-radius: 16px;
  display: flex;
  height: 32px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 56px;
}
roomy-navbar roomy-tab-group a roomy-icon svg {
  width: 24px;
  height: 24px;
}
roomy-navbar roomy-tab-group a span {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 106;
  line-height: 16px;
}
@media (min-width: 768px) {
  roomy-navbar roomy-tab-group {
    background: none;
    justify-content: unset;
    position: unset;
    width: auto;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
  }
  roomy-navbar roomy-tab-group a {
    flex-direction: row;
    height: 40px;
    padding: 0 12px;
    width: auto;
  }
  roomy-navbar roomy-tab-group a::after {
    content: "";
  }
  roomy-navbar roomy-tab-group a roomy-icon {
    border-radius: 0;
    height: auto;
    position: unset;
    width: auto;
  }
  roomy-navbar roomy-tab-group a roomy-icon svg {
    width: 24px;
    height: 24px;
  }
  roomy-navbar roomy-tab-group a span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 106;
    line-height: 38px;
  }
}

roomy-content {
  box-sizing: content-box;
  column-gap: 16px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 48px;
}
@media (min-width: 768px) {
  roomy-content {
    column-gap: 24px;
    grid-template-columns: repeat(8, 1fr) repeat(4, minmax(67px, 1fr));
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 56px;
  }
}
@media (min-width: 1200px) {
  roomy-content {
    grid-template-columns: repeat(10, 1fr) repeat(4, minmax(61px, 1fr));
    margin-left: 24px;
    margin-right: 24px;
    padding-left: 0;
  }
}
@media (min-width: 1416px) {
  roomy-content {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    margin: auto;
    padding-top: 56px;
    max-width: 1352px;
  }
}
@media (min-width: 1920px) {
  roomy-content {
    grid-template-columns: repeat(18, minmax(0, 1fr));
    max-width: 1524px;
  }
}

roomy-nav-rail {
  justify-content: flex-end;
  grid-row-start: 1;
  grid-row-end: auto;
  visibility: hidden;
  display: none;
  grid-column-start: 1;
  grid-column-end: 1;
  width: 100%;
}
@media (min-width: 960px) {
  roomy-nav-rail {
    grid-column-start: 1;
    grid-column-end: 4;
  }
}
@media (min-width: 1200px) {
  roomy-nav-rail {
    display: flex;
    visibility: visible;
    position: relative;
    border-right: 1px solid var(--roomy-color-outline);
    isolation: isolate;
  }
}

roomy-nav-rail-section {
  display: flex;
  flex-direction: column;
  width: 40px;
  border-radius: 20px;
}

.roomy-nav-rail-item {
  background: none;
  border: none;
  color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
}
.roomy-nav-rail-item:hover {
  background: var(--roomy-color-on-background-12);
}
.roomy-nav-rail-item:active,
.roomy-nav-rail-item.selected {
  background: var(--roomy-color-on-background-24);
}
.roomy-nav-rail-item roomy-icon,
.roomy-nav-rail-item img {
  width: 24px;
  height: 24px;
}
.roomy-nav-rail-item img {
  border-radius: 12px;
  overflow: hidden;
}

roomy-main {
  grid-column-end: 1;
  grid-column-start: 1;
  grid-row-end: auto;
  padding-bottom: 48px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  width: 100%;
}
@media (min-width: 768px) {
  roomy-main {
    grid-column-end: 9;
  }
}
@media (min-width: 1200px) {
  roomy-main {
    grid-column-end: 11;
    grid-column-start: 4;
  }
}
@media (min-width: 1416px) {
  roomy-main {
    grid-column-end: 13;
  }
}
@media (min-width: 1920px) {
  roomy-main {
    grid-column-end: 14;
    grid-column-start: 5;
  }
}

/*Sidebar*/
roomy-sidebar {
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  roomy-sidebar {
    position: sticky;
    top: var(--roomy-navbar-height);
    max-height: calc(100vh - var(--roomy-navbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    grid-column-start: 9;
    grid-column-end: 13;
  }
}
@media (min-width: 1200px) {
  roomy-sidebar {
    grid-column-start: 11;
    grid-column-end: 15;
  }
}
@media (min-width: 1416px) {
  roomy-sidebar {
    grid-column-start: 13;
    grid-column-end: 17;
  }
}
@media (min-width: 1920px) {
  roomy-sidebar {
    grid-column-start: 15;
    grid-column-end: 19;
  }
}
roomy-sidebar roomy-card {
  display: none;
  margin-top: 16px;
}
@media (min-width: 768px) {
  roomy-sidebar roomy-card {
    display: block;
  }
}

roomy-post-source-header button.small {
  min-width: 70px;
}
roomy-post-source-info h2 {
  font-size: 14px;
}
roomy-post-source-info span {
  -moz-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--roomy-color-outline);
  display: -webkit-box;
  margin-bottom: 8px;
  overflow: hidden;
  text-align: left;
}

/*Cards*/
roomy-card {
  display: block;
  color: var(--roomy-color-on-card);
  background-color: var(--roomy-color-card);
  border-radius: 16px;
  padding: 16px;
}
roomy-card.outline {
  background: none;
  border: 1px solid var(--roomy-color-outline);
}
roomy-card-layout {
  display: block;
  gap: 16px;
  column-count: 2;
}

/*Posts*/
roomy-post:not(.detailed) {
  display: block;
  padding-top: 16px;
}
roomy-post.detailed {
  display: block;
  padding-top: 8px;
}
@media (min-width: 768px) {
  roomy-post:not(.detailed) {
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 48px;
    box-sizing: border-box;
  }
  roomy-post.detailed {
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 48px;
    box-sizing: border-box;
  }
}

roomy-post:not(.detailed) roomy-post-stats {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2px;
}
roomy-post.detailed roomy-post-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 4px;
}
@media (min-width: 768px) {
  roomy-post:not(.detailed) roomy-post-stats {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
  roomy-post.detailed roomy-post-stats {
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
}
roomy-post:not(.detailed) roomy-post-stats > span {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}
roomy-post.detailed roomy-post-stats > span {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}
@media (min-width: 768px) {
  roomy-post:not(.detailed) roomy-post-stats > span {
    gap: 12px;
  }
}
roomy-post:not(.detailed) roomy-post-stats > span > a {
  display: block;
  border-radius: 16px;
}
roomy-post.detailed roomy-post-stats > span > a {
  display: block;
  border-radius: 16px;
}
roomy-post:not(.detailed) roomy-post-stats roomy-avatar,
roomy-post:not(.detailed) roomy-post-stats roomy-avatar img {
  width: 24px;
  height: 24px;
}
roomy-post.detailed roomy-post-stats roomy-avatar,
roomy-post.detailed roomy-post-stats roomy-avatar img {
  width: 24px;
  height: 24px;
}
@media (min-width: 768px) {
  roomy-post:not(.detailed) roomy-post-stats roomy-avatar,
  roomy-post:not(.detailed) roomy-post-stats roomy-avatar img {
    width: 32px;
    height: 32px;
  }
  roomy-post.detailed roomy-post-stats roomy-avatar,
  roomy-post.detailed roomy-post-stats roomy-avatar img {
    width: 32px;
    height: 32px;
  }
}
roomy-post:not(.detailed) roomy-post-stats > span > div {
  display: flex;
  gap: 0;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}
roomy-post.detailed roomy-post-stats > span > div {
  display: flex;
  gap: 0;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
}
roomy-post:not(.detailed) roomy-post-stats > span > div > span {
  display: flex;
  flex: none;
  flex-direction: row;
  gap: 4px;
  flex-wrap: nowrap;
}
roomy-post.detailed roomy-post-stats > span > div > span {
  display: flex;
  flex: none;
  flex-direction: row;
  gap: 4px;
  flex-wrap: nowrap;
}
roomy-post:not(.detailed)
  roomy-post-stats
  > span
  > div
  > span
  > a:first-of-type {
  display: flex;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
}
roomy-post.detailed roomy-post-stats > span > div > span > a:first-of-type {
  display: flex;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--roomy-color-outline);
  text-decoration: none;
}
roomy-post:not(.detailed)
  roomy-post-stats
  > span
  > div
  > span
  > a:first-of-type:hover {
  text-decoration: underline;
}
roomy-post.detailed
  roomy-post-stats
  > span
  > div
  > span
  > a:first-of-type:hover {
  text-decoration: none;
}
roomy-post:not(.detailed) roomy-post-stats > span > div > span > a:hover {
  text-decoration: none;
}

roomy-post:not(.detailed) roomy-post-stat {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--roomy-color-outline);
  font-weight: 84;
  font-size: 12px;
  line-height: 16px;
}
roomy-post.detailed roomy-post-stat {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--roomy-color-outline);
  font-weight: 84;
  font-size: 12px;
  line-height: 16px;
}
roomy-post:not(.detailed)
  roomy-post-stats
  > span
  > div
  > span
  > a:first-of-type
  roomy-post-stat {
  color: var(--roomy-color-on-background);
  font-weight: 146;
}
roomy-post:not(.detailed) roomy-post-stat-divider {
  display: flex;
  align-items: center;
  width: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 84;
  color: var(--roomy-color-outline);
}
roomy-post.detailed roomy-post-stat-divider {
  display: flex;
  align-items: center;
  width: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 84;
  color: var(--roomy-color-outline);
}

roomy-post:not(.detailed) roomy-post-title {
  display: block;
  width: 100%;
}
roomy-post.detailed roomy-post-title {
  display: block;
  font-weight: 106;
  color: var(--roomy-color-on-background);
  margin: none;
  font-size: 18px;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  roomy-post.detailed roomy-post-title {
    font-size: 24px;
    margin-bottom: 16px;
  }
}

roomy-post.detailed roomy-post-media {
  display: block;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
roomy-post.detailed roomy-post-media:not(:has(+ roomy-post-actions)) {
  margin-bottom: 16px;
}
roomy-post.detailed roomy-post-media img {
  display: block;
  width: 100%;
}

roomy-post:not(.detailed) roomy-post-description {
  display: block;
  font-size: 14px;
  line-height: 20px;
  margin-left: 32px;
  margin-right: 4px;
  width: 100%;
}
roomy-post.detailed roomy-post-description {
  display: block;
  font-size: 14px;
  line-height: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  roomy-post:not(.detailed) roomy-post-description {
    margin-left: 44px;
    margin-right: 12px;
  }
}

roomy-post:not(.detailed) roomy-post-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: start;
  height: 48px;
  margin-left: 24px;
}
roomy-post.detailed roomy-post-actions {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 48px;
  justify-content: start;
  gap: 12px;
  margin-top: 16px;
  overflow: hidden;
}
@media (min-width: 768px) {
  roomy-post:not(.detailed) roomy-post-actions {
    margin-left: 36px;
  }
}
roomy-post:not(.detailed) roomy-post-actions button {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  font-size: 12px;
  font-weight: 106;
  gap: 6px;
  height: 32px;
  justify-content: center;
  line-height: 16px;
  padding-left: 6px;
  padding-right: 6px;
}
roomy-post.detailed roomy-post-actions button {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  font-size: 12px;
  font-weight: 106;
  gap: 6px;
  height: 32px;
  justify-content: center;
  line-height: 16px;
  padding-left: 4px;
  padding-right: 4px;
}
roomy-post.detailed roomy-post-actions button span {
  display: none;
}
@media (min-width: 960px) {
  roomy-post.detailed roomy-post-actions button {
    padding-left: 12px;
    padding-right: 12px;
  }
  roomy-post.detailed roomy-post-actions button span {
    display: inline;
  }
}
roomy-post:not(.detailed) roomy-post-actions button span {
  display: none;
}
@media (min-width: 960px) {
  roomy-post:not(.detailed) roomy-post-actions button {
    padding-left: 12px;
    padding-right: 12px;
  }
  roomy-post:not(.detailed) roomy-post-actions button span {
    display: inline;
  }
}
roomy-post:not(.detailed) roomy-post-actions roomy-icon {
  width: 20px;
  height: 20px;
  isolation: isolate;
}
roomy-post.detailed roomy-post-actions roomy-icon {
  width: 24px;
  height: 24px;
  isolation: isolate;
}

/*Profile*/
.profile-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.profile-header > div {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.profile-header roomy-avatar {
  width: 64px;
  height: 64px;
}
.profile-header .names {
  display: flex;
  flex-direction: column;
}
.profile-header h1 {
  font-size: 24px;
  font-weight: 146;
  line-height: 28px;
}
.profile-header .names span {
  color: var(--roomy-color-outline);
  font-size: 14px;
  font-weight: 106;
  line-height: 20px;
}

/*Upload*/
roomy-file-upload {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-direction: column;
}
roomy-file-upload form {
  display: flex;
  gap: 16px;
  flex-direction: column;
}

roomy-progress-bar {
  width: 100%;
  height: 20px;
  margin-top: 5px;
}