/* src/styles.css */
:root {
  background: #101018;
  color: #e8e9f0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.reference-shell {
  background: #101018;
  display: flex;
  min-height: 100vh;
}
.left-sidebar {
  background: #181725;
  border-right: 1px solid #2b293a;
  display: flex;
  flex: 0 0 230px;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px 12px;
}
.everhit-mark {
  align-items: center;
  background: #6843e7;
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  margin: 0 7px 25px;
  text-decoration: none;
  width: 38px;
}
.everhit-mark svg {
  stroke-width: 2.7;
}
.mobile-brand,
.auth-brand {
  text-decoration: none;
}
.reference-nav {
  display: grid;
  gap: 2px;
}
.left-nav-item,
.repository-row,
.new-repository {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #b4b3c0;
  display: flex;
  font-size: 13px;
  gap: 10px;
  min-height: 32px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}
.left-nav-item:hover,
.repository-row:hover {
  background: #242235;
  color: #fafaff;
}
.left-nav-item.current {
  color: #f0eff9;
}
.left-nav-item.current svg {
  color: #a68cff;
}
.left-divider {
  background: #302e40;
  height: 1px;
  margin: 15px 0 18px;
}
.left-label {
  color: #9c9aa8;
  font-size: 12px;
  margin: 0 10px 8px;
}
.repository-heading {
  align-items: center;
  color: #878595;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  margin: 26px 7px 8px 10px;
  text-transform: uppercase;
}
.repository-heading button {
  background: transparent;
  border: 0;
  color: #aaa9b8;
  display: grid;
  padding: 3px;
  place-items: center;
}
.repository-list {
  display: grid;
  gap: 3px;
}
.repository-row {
  justify-content: space-between;
}
.repository-row.selected {
  background: #38225d;
  color: #f5f0ff;
}
.repository-row i {
  background: #f1eaff;
  border-radius: 50%;
  box-shadow: 0 0 10px #ba9cff;
  height: 7px;
  width: 7px;
}
.empty-sidebar {
  color: #777484;
  font-size: 12px;
  margin: 7px 10px;
}
.new-repository {
  border: 1px dashed #454157;
  color: #ada9bd;
  font-size: 12px;
  justify-content: center;
  margin-top: 14px;
}
.new-repository:hover {
  border-color: #8f72ee;
  color: #eee9ff;
}
.repository-row.current {
  color: #f0eff9;
  font-weight: 700;
}
.theme-light .repository-row.current {
  color: #3e288b;
}
.reference-main {
  min-width: 0;
  width: calc(100% - 230px);
}
.reference-topbar {
  align-items: center;
  border-bottom: 1px solid #292837;
  display: flex;
  height: 57px;
  justify-content: flex-end;
  padding: 0 20px;
}
.top-search {
  align-items: center;
  background: #1b1b26;
  border: 1px solid #2d2d3b;
  border-radius: 5px;
  color: #777684;
  display: flex;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  width: 184px;
}
.top-search input {
  background: none;
  border: 0;
  color: #ecebf3;
  font-size: 11px;
  min-width: 0;
  outline: 0;
  width: 100%;
}
.top-buttons {
  display: flex;
  gap: 8px;
  margin-left: 15px;
}
.top-buttons button {
  align-items: center;
  background: transparent;
  border: 1px solid #343342;
  border-radius: 5px;
  color: #a9a8b5;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.top-buttons button:hover {
  color: #fff;
}
.mobile-navigation {
  display: none;
}
.theme-light {
  background: #f5f7fb;
  color: #222533;
}
.theme-light .left-sidebar,
.theme-light .reference-topbar {
  background: #ffffff;
  border-color: #dce1eb;
}
.theme-light .left-sidebar {
  border-right-color: #dce1eb;
}
.theme-light .reference-main {
  background: #f5f7fb;
}
.theme-light .left-nav-item,
.theme-light .repository-row,
.theme-light .new-repository,
.theme-light .top-buttons button,
.theme-light .project-tab {
  color: #5d6474;
}
.theme-light .left-nav-item:hover,
.theme-light .repository-row:hover,
.theme-light .left-nav-item.current,
.theme-light .repository-row.selected {
  background: #ece9ff;
  color: #3e288b;
}
.theme-light .left-divider,
.theme-light .project-tabs {
  border-color: #dce1eb;
  background: #ffffff;
}
.theme-light .left-divider {
  background: #dce1eb;
}
.theme-light .left-label,
.theme-light .repository-heading,
.theme-light .empty-sidebar {
  color: #747b8b;
}
.theme-light .top-search,
.theme-light .file-search,
.theme-light .commit-input input,
.theme-light .projects-search,
.theme-light .studio-select select {
  background: #ffffff;
  border-color: #d5dae5;
  color: #303442;
}
.theme-light .top-search input {
  color: #303442;
}
.theme-light .top-buttons button {
  border-color: #d5dae5;
}
.theme-light .top-buttons button:hover {
  background: #f0eff8;
  color: #30256e;
}
.theme-light .platform-error {
  background: #fff0ed;
  border-color: #efc3ba;
  color: #8d3128;
}
.theme-light .preview-card,
.theme-light .versions-card,
.theme-light .settings-card,
.theme-light .home-panel,
.theme-light .home-project-section,
.theme-light .issues-list,
.theme-light .projects-list,
.theme-light .plugin-card,
.theme-light .platform-modal {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .preview-toolbar,
.theme-light .track-label,
.theme-light .track-mix,
.theme-light .asset-timeline,
.theme-light .real-commits article,
.theme-light .issue-row,
.theme-light .project-list-row,
.theme-light .home-project-card,
.theme-light .home-public-card {
  background-color: #f8f9fc;
  border-color: #dfe3ec;
}
.theme-light .asset-timeline {
  background-image:
    linear-gradient(#e1e5ed 1px, transparent 1px),
    linear-gradient(
      90deg,
      #e2e6ee 1px,
      transparent 1px);
}
.theme-light .preview-toolbar,
.theme-light .track-label,
.theme-light .track-mix,
.theme-light .measure-ruler {
  color: #697080;
  border-color: #dfe3ec;
}
.theme-light .asset-waveform i {
  background: #342c52;
}
.theme-light .reference-main h1,
.theme-light .reference-main h2,
.theme-light .reference-main h3,
.theme-light .reference-main strong,
.theme-light .right-sidebar h2 {
  color: #242735;
}
.theme-light .reference-main p,
.theme-light .reference-main small,
.theme-light .reference-main time,
.theme-light .reference-main dt,
.theme-light .reference-main .side-empty,
.theme-light .reference-main .settings-empty {
  color: #687080;
}
.theme-light .reference-main dd,
.theme-light .reference-main .version-summary,
.theme-light .reference-main .issue-row footer span {
  color: #4e5566;
}
.theme-light .right-sidebar section,
.theme-light .issues-toolbar,
.theme-light .issue-row,
.theme-light .settings-card > header,
.theme-light .settings-plugin-list article,
.theme-light .collaborator-list article,
.theme-light .home-panel header,
.theme-light .home-project-section > header,
.theme-light .home-activity-list > button {
  border-color: #dfe3ec;
}
.theme-light .project-details input,
.theme-light .project-details textarea,
.theme-light .collaborator-modal input,
.theme-light .collaborator-search input,
.theme-light .plugin-add select,
.theme-light .platform-modal input,
.theme-light .platform-modal textarea,
.theme-light .platform-modal select {
  background: #ffffff;
  border-color: #cfd6e2;
  color: #292d3a;
}
.theme-light .settings-action,
.theme-light .projects-create-button,
.theme-light .project-daw-button,
.theme-light .issue-ping-button,
.theme-light .commit-input button {
  background: #f3f1fb;
  border-color: #d3cbed;
  color: #4b388d;
}
.theme-light .settings-action:hover,
.theme-light .projects-create-button:hover,
.theme-light .project-daw-button:hover,
.theme-light .issue-ping-button:hover,
.theme-light .commit-input button:hover {
  background: #e9e5f9;
  border-color: #967ee1;
}
.theme-light .empty-repository,
.theme-light .projects-empty,
.theme-light .marketplace-empty {
  border-color: #cfd6e2;
}
.theme-light .plugin-cover {
  background: #eef0f5;
  border-color: #dfe3ec;
}
.theme-light .mobile-navigation {
  background: #ffffff;
  border-color: #dce1eb;
}
.theme-light .mobile-navigation button {
  color: #707789;
}
.theme-light .mobile-navigation button.current {
  color: #5b37bd;
}
.theme-light .visibility-badge,
.theme-light .project-visibility,
.theme-light .plugin-studios span {
  background: #f1f3f8;
  border-color: #d6dce7;
  color: #596071;
}
.theme-light .profile-summary > span,
.theme-light .collaborator-avatar,
.theme-light .preview-collaborators li > span,
.theme-light .project-list-icon,
.theme-light .home-project-card > span,
.theme-light .home-public-icon {
  background: #eeeafd;
  border-color: #d4c9f5;
  color: #633fc5;
}
.project-tabs {
  border-bottom: 1px solid #2a2938;
  display: flex;
  gap: 30px;
  height: 46px;
  padding: 0 37px;
}
.project-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #aaa9b6;
  font-size: 12px;
  padding: 0 1px;
}
.project-tab.active {
  border-color: #7e55ff;
  color: #fff;
  font-weight: 700;
}
.platform-error {
  align-items: center;
  background: #442321;
  border-bottom: 1px solid #6b3a36;
  color: #ffc8c1;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 9px 38px;
}
.platform-error button {
  background: none;
  border: 0;
  color: inherit;
}
.project-content {
  margin: 0 auto;
  max-width: 1320px;
  padding: 27px 34px 38px;
}
.title-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.title-row h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.title-row p {
  color: #9694a3;
  font-size: 12px;
  margin: 6px 0 0;
}
.title-actions {
  display: flex;
  gap: 14px;
}
.file-search {
  align-items: center;
  background: #171722;
  border: 1px solid #3a3949;
  border-radius: 5px;
  color: #aaa9b6;
  display: flex;
  font-size: 11px;
  gap: 63px;
  height: 35px;
  justify-content: space-between;
  padding: 0 10px;
  width: 190px;
}
.daw-button {
  align-items: center;
  background: #7448ec;
  border: 1px solid #906cff;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 7px;
  height: 35px;
  justify-content: center;
  padding: 0 16px;
}
.daw-button:hover {
  background: #8660f3;
}
.project-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 196px;
}
.preview-card,
.versions-card {
  background: #181824;
  border: 1px solid #2a2939;
  border-radius: 6px;
  overflow: hidden;
}
.preview-toolbar {
  align-items: center;
  background: #1f1f2c;
  border-bottom: 1px solid #2a2939;
  color: #aaa9b9;
  display: flex;
  font-size: 11px;
  gap: 10px;
  height: 35px;
  padding: 0 11px;
}
.preview-play {
  align-items: center;
  background: transparent;
  border: 2px solid #e5e2f1;
  border-radius: 50%;
  color: #e5e2f1;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding-left: 2px;
  width: 24px;
}
.measure-ruler {
  border-bottom: 1px solid #2a2939;
  color: #6f6d7d;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  padding: 8px 70px 8px 49px;
}
.asset-timeline {
  background-color: #171722;
  background-image:
    linear-gradient(#232230 1px, transparent 1px),
    linear-gradient(
      90deg,
      #242330 1px,
      transparent 1px);
  background-size: 100% 47px, 8.333% 100%;
}
.asset-track {
  display: flex;
  height: 47px;
  position: relative;
}
.track-label {
  align-items: center;
  background: #1d1c29;
  border-bottom: 1px solid #2a2939;
  color: #aaa8b6;
  display: flex;
  flex: 0 0 48px;
  justify-content: center;
}
.track-label span {
  display: none;
}
.asset-clip {
  border: 0;
  border-radius: 3px;
  color: #14101f;
  height: 36px;
  overflow: hidden;
  padding: 0 7px;
  position: absolute;
  top: 5px;
}
.asset-clip strong {
  font-size: 9px;
  left: 7px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  position: absolute;
  text-align: left;
  text-overflow: ellipsis;
  top: 4px;
  white-space: nowrap;
}
.asset-clip.mint {
  background: #3fbd8b;
}
.asset-clip.blue {
  background: #5291db;
}
.asset-clip.gold {
  background: #d5aa32;
}
.asset-clip.coral {
  background: #d96a62;
}
.asset-clip.violet {
  background: #8050bf;
}
.asset-waveform {
  align-items: center;
  bottom: 4px;
  display: flex;
  gap: 1px;
  left: 7px;
  opacity: .46;
  position: absolute;
  right: 7px;
}
.asset-waveform i {
  background: #1c1530;
  flex: 1;
  min-height: 2px;
}
.track-mix {
  align-items: center;
  background: #1d1c29;
  border-bottom: 1px solid #2a2939;
  color: #747181;
  display: flex;
  font-size: 8px;
  gap: 5px;
  justify-content: center;
  margin-left: auto;
  width: 70px;
}
.track-mix i {
  background: #a885fa;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}
.preview-toolbar-controls {
  align-items: center;
  display: flex;
  gap: 6px;
}
.preview-play:disabled {
  border-color: #615f70;
  color: #615f70;
}
.preview-stop {
  align-items: center;
  background: transparent;
  border: 0;
  color: #aaa8b7;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 18px;
}
.preview-stop:hover {
  color: #f2eff8;
}
.asset-clip.playable {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.asset-clip.playable:focus-visible {
  outline: 2px solid #f5f2ff;
  outline-offset: 1px;
}
.preview-error {
  background: #3c2426;
  border-top: 1px solid #63393d;
  color: #ffc6c6;
  font-size: 10px;
  margin: 0;
  padding: 7px 11px;
}
.track-context-menu {
  background: #211f2d;
  border: 1px solid #4b475a;
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
  padding: 4px;
  position: fixed;
  width: 192px;
  z-index: 20;
}
.track-context-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #e3e0ea;
  display: flex;
  font-size: 12px;
  gap: 8px;
  min-height: 31px;
  padding: 0 8px;
  text-align: left;
  width: 100%;
}
.track-context-menu button:hover {
  background: #363144;
}
.track-context-menu svg {
  color: #ad8df5;
}
.empty-preview {
  align-items: center;
  color: #8a8899;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 235px;
  padding: 26px;
  text-align: center;
}
.empty-preview svg {
  color: #7b5cdb;
}
.empty-preview strong {
  color: #d7d4e1;
  font-size: 13px;
}
.empty-preview span {
  font-size: 11px;
  max-width: 340px;
}
.empty-preview button {
  align-items: center;
  background: #272439;
  border: 1px solid #4b426d;
  border-radius: 4px;
  color: #e8e1ff;
  display: flex;
  font-size: 11px;
  gap: 6px;
  margin-top: 5px;
  padding: 7px 10px;
}
.synced-arrangement-preview {
  min-height: 235px;
}
.synced-asset-timeline {
  min-height: 188px;
  max-height: 282px;
  overflow-y: auto;
  scrollbar-color: #625187 #171722;
  scrollbar-width: thin;
}
.synced-track {
  display: flex;
  min-height: 47px;
  position: relative;
}
.synced-track-label {
  align-items: center;
  background: #1d1c29;
  border-bottom: 1px solid #2a2939;
  color: #aaa8b6;
  display: flex;
  flex: 0 0 148px;
  font-size: 10px;
  gap: 7px;
  min-width: 0;
  padding: 0 11px;
}
.synced-track-label svg {
  color: #af8cf8;
  flex: 0 0 auto;
}
.synced-track-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.synced-track-lane {
  border-bottom: 1px solid #2a2939;
  flex: 1;
  min-width: 0;
  position: relative;
}
.synced-clip {
  border-radius: 3px;
  color: #17111f;
  height: 35px;
  overflow: hidden;
  padding: 0 8px;
  position: absolute;
  top: 6px;
}
.synced-clip strong {
  display: block;
  font-size: 9px;
  line-height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.synced-clip.has-effects strong {
  line-height: 17px;
  padding-top: 2px;
}
.synced-clip.has-effects small {
  align-items: center;
  display: flex;
  font-size: 8px;
  gap: 3px;
  line-height: 12px;
  min-width: 0;
  opacity: .82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.synced-clip.has-effects small svg {
  flex: 0 0 auto;
}
.synced-clip.mint {
  background: #3fbd8b;
}
.synced-clip.blue {
  background: #5291db;
}
.synced-clip.violet {
  background: #8050bf;
  color: #f5f0ff;
}
.uploaded-synced-track .synced-track-label {
  box-shadow: inset 3px 0 0 #9a78ee;
}
.synced-track-empty {
  color: #767283;
  font-size: 10px;
  left: 12px;
  position: absolute;
  top: 17px;
}
.synced-preview-footer {
  align-items: center;
  background: #1d1c29;
  border-top: 1px solid #2a2939;
  color: #aaa6b6;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
}
.synced-preview-footer span {
  color: #d8d3e5;
  font-weight: 700;
}
.synced-preview-footer small {
  color: #898596;
  font-size: 10px;
}
.theme-light .synced-track-label,
.theme-light .synced-preview-footer {
  background: #f8f9fc;
  border-color: #dfe3ec;
  color: #596171;
}
.theme-light .synced-track-lane {
  border-color: #dfe3ec;
}
.theme-light .synced-preview-footer span {
  color: #303442;
}
.theme-light .synced-track-empty {
  color: #747b8b;
}
.theme-light .synced-asset-timeline {
  scrollbar-color: #8f77d5 #f8f9fc;
}
.synced-track-effects {
  align-items: center;
  background: #252137;
  border-bottom: 1px solid #2a2939;
  color: #c8b8fa;
  display: flex;
  flex: 0 0 128px;
  font-size: 9px;
  gap: 4px;
  min-width: 0;
  padding: 0 7px;
}
.synced-track-effects svg {
  color: #aa86f5;
  flex: 0 0 auto;
}
.synced-track-effects span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.effect-manifest-card {
  background: #191923;
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  margin-top: 18px;
  overflow: hidden;
}
.effect-manifest-card > header {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 12px;
}
.effect-manifest-card > header span {
  align-items: center;
  color: #e0dcec;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
}
.effect-manifest-card > header svg {
  color: #a98aff;
}
.effect-manifest-card > header small {
  color: #9994a6;
  font-size: 10px;
}
.effect-manifest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.effect-manifest-list article {
  border-bottom: 1px solid #292837;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 11px 12px;
}
.effect-manifest-list article:nth-child(odd) {
  border-right: 1px solid #292837;
}
.effect-manifest-list article > div {
  min-width: 0;
}
.effect-manifest-list strong {
  color: #e3dfec;
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.effect-manifest-list small {
  color: #9b92b3;
  display: block;
  font-size: 10px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.effect-manifest-list dl {
  display: grid;
  gap: 3px;
  margin: 0;
}
.effect-manifest-list dl div {
  display: flex;
  font-size: 9px;
  gap: 7px;
  justify-content: space-between;
  max-width: 150px;
}
.effect-manifest-list dt {
  color: #8f899b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.effect-manifest-list dd {
  color: #c8b9f4;
  margin: 0;
  white-space: nowrap;
}
.effect-no-parameters {
  color: #8f899b;
  font-size: 10px;
}
.theme-light .synced-track-effects {
  background: #f2effb;
  border-color: #dfe3ec;
  color: #5d469d;
}
.theme-light .effect-manifest-card {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .effect-manifest-card > header,
.theme-light .effect-manifest-list article {
  border-color: #dfe3ec;
}
.theme-light .effect-manifest-list strong {
  color: #303442;
}
.theme-light .effect-manifest-list small,
.theme-light .effect-manifest-list dt,
.theme-light .effect-no-parameters,
.theme-light .effect-manifest-card > header small {
  color: #687080;
}
.theme-light .effect-manifest-list dd {
  color: #5d469d;
}
.versions-card {
  margin-top: 18px;
  padding: 12px;
}
.commit-input {
  align-items: center;
  background: #15141e;
  border: 1px solid #2f2d40;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 6px 6px 6px 12px;
  transition: border-color .15s ease;
}
.commit-input:focus-within {
  border-color: #7247e9;
  box-shadow: 0 0 0 3px rgba(114, 71, 233, .18);
}
.commit-input input {
  background: transparent;
  border: 0;
  color: #f0eef5;
  font-size: 12px;
  height: 33px;
  min-width: 0;
  outline: 0;
  padding: 0 4px;
  width: 280px;
}
.commit-input > div {
  display: flex;
  gap: 6px;
}
.commit-input button {
  align-items: center;
  background: #201f2c;
  border: 1px solid #393749;
  border-radius: 6px;
  color: #c5c2d0;
  display: inline-flex;
  height: 33px;
  justify-content: center;
  padding: 0 12px;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}
.commit-input button:hover:not(:disabled) {
  border-color: #6f57b8;
  color: #f1ecff;
}
.commit-input .save-button {
  background: #7247e9;
  border-color: #906bfa;
  color: #fff;
  font-weight: 600;
  gap: 6px;
}
.commit-input .save-button:hover:not(:disabled) {
  background: #8660f3;
}
.version-summary {
  color: #aaa8b6;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  padding: 15px 2px 9px;
}
.real-commits article {
  align-items: center;
  background: #20202c;
  border-top: 1px solid #2b2a38;
  color: #aaa9b7;
  display: flex;
  font-size: 11px;
  gap: 9px;
  padding: 9px;
}
.real-commits article > div {
  flex: 1;
}
.real-commits strong {
  color: #dddbe5;
  display: block;
}
.real-commits p {
  color: #8f8c9d;
  margin: 3px 0 0;
}
.real-commits time {
  color: #7d7a8b;
  font-size: 10px;
  white-space: nowrap;
}
.empty-versions {
  color: #858292;
  font-size: 11px;
  margin: 0;
  padding: 14px 2px 4px;
}
.right-sidebar {
  color: #b8b5c1;
  padding-top: 4px;
}
.right-sidebar section {
  border-bottom: 1px solid #2b2a38;
  padding: 0 0 17px;
}
.right-sidebar section + section {
  padding-top: 17px;
}
.right-sidebar h2 {
  color: #dddbe5;
  font-size: 12px;
  margin: 0 0 10px;
}
.side-empty {
  color: #858292;
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}
.right-sidebar dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.right-sidebar dl div {
  display: flex;
  font-size: 11px;
  justify-content: space-between;
}
.right-sidebar dt {
  color: #898695;
}
.right-sidebar dd {
  color: #c4c1cc;
  margin: 0;
}
.preview-collaborators ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.preview-collaborators li {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.preview-collaborators li > span {
  align-items: center;
  background: #37304f;
  border-radius: 50%;
  color: #e8e1ff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 750;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.preview-collaborators li > div {
  display: grid;
  min-width: 0;
}
.preview-collaborators strong {
  color: #dedbe7;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-collaborators small {
  color: #8f8b9b;
  font-size: 10px;
  text-transform: capitalize;
}
.profile-summary {
  align-items: center;
  display: flex;
  gap: 9px;
  min-width: 0;
}
.profile-summary img,
.profile-summary > span {
  background: #2d2940;
  border: 1px solid #494160;
  border-radius: 50%;
  color: #b397ff;
  display: grid;
  flex: 0 0 auto;
  height: 35px;
  object-fit: cover;
  place-items: center;
  width: 35px;
}
.profile-summary > div {
  min-width: 0;
}
.profile-summary strong {
  color: #e5e2ed;
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-summary p {
  color: #8d8999;
  display: -webkit-box;
  font-size: 10px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4;
  margin: 3px 0 0;
  overflow: hidden;
}
.profile-panel > button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #aa8ef4;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
}
.profile-panel > button:hover {
  color: #ded4ff;
}
.profile-photo-picker {
  align-items: center;
  border: 1px dashed #535063 !important;
  color: #aaa5b7 !important;
  cursor: pointer;
  justify-content: center;
  min-height: 94px;
  padding: 10px;
  text-align: center;
}
.profile-photo-picker img {
  border-radius: 50%;
  height: 45px;
  object-fit: cover;
  width: 45px;
}
.profile-photo-picker span {
  color: #ded9eb;
  font-size: 11px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-photo-picker small {
  color: #8f8a9b;
  font-size: 10px;
}
.profile-photo-picker input {
  display: none;
}
.empty-repository {
  align-items: center;
  border: 1px dashed #353347;
  border-radius: 6px;
  color: #8e8b9c;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 380px;
  padding: 35px;
  text-align: center;
}
.empty-repository svg {
  color: #7d5dde;
}
.empty-repository h2 {
  color: #e5e1ec;
  font-size: 17px;
  margin: 0;
}
.empty-repository p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  max-width: 350px;
}
.settings-page {
  max-width: 1050px;
}
.settings-heading {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  justify-content: space-between;
  margin-bottom: 17px;
  padding-bottom: 17px;
}
.settings-heading p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 4px;
}
.settings-heading h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.visibility-badge {
  background: #292735;
  border: 1px solid #454253;
  border-radius: 4px;
  color: #aaa6b6;
  font-size: 10px;
  padding: 5px 8px;
}
.visibility-badge.public {
  background: #1f382e;
  border-color: #35694f;
  color: #a6e8c4;
}
.settings-card {
  background: #191923;
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  overflow: hidden;
}
.settings-card > header {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  justify-content: space-between;
  min-height: 47px;
  padding: 10px 14px;
}
.settings-card h2 {
  color: #e5e2ec;
  font-size: 13px;
  margin: 0;
}
.settings-card header p {
  color: #898696;
  font-size: 10px;
  margin: 4px 0 0;
}
.project-details form {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.project-details label,
.collaborator-modal label {
  color: #b7b3c2;
  display: grid;
  font-size: 11px;
  gap: 6px;
}
.project-details input,
.project-details textarea {
  background: #242231;
  border: 1px solid #3b384a;
  border-radius: 4px;
  color: #eeeaf5;
  outline-color: #8b68f4;
  padding: 9px;
  width: 100%;
}
.project-details textarea {
  min-height: 75px;
  resize: vertical;
}
.project-details .daw-button {
  justify-self: start;
}
.collaborators-card,
.plugins-card {
  margin-top: 15px;
}
.settings-action {
  align-items: center;
  background: #272439;
  border: 1px solid #4b426d;
  border-radius: 4px;
  color: #e8e1ff;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
}
.settings-action:hover {
  border-color: #8764ed;
}
.collaborator-list {
  display: grid;
}
.collaborator-list article {
  align-items: center;
  border-bottom: 1px solid #2b2a38;
  display: grid;
  gap: 10px;
  grid-template-columns: 29px minmax(0, 1fr) auto 28px;
  min-height: 62px;
  padding: 9px 14px;
}
.collaborator-list article:last-child {
  border-bottom: 0;
}
.collaborator-avatar {
  align-items: center;
  background: #37304f;
  border-radius: 50%;
  color: #e8e1ff;
  display: inline-flex;
  font-size: 11px;
  height: 29px;
  justify-content: center;
  width: 29px;
}
.collaborator-copy {
  min-width: 0;
}
.collaborator-copy strong {
  color: #e4e1eb;
  display: block;
  font-size: 12px;
}
.collaborator-copy small {
  color: #a68bf0;
  font-size: 10px;
  text-transform: capitalize;
}
.collaborator-copy p {
  color: #807d8d;
  font-size: 10px;
  margin: 3px 0 0;
}
.contribution {
  display: grid;
  justify-items: end;
}
.contribution strong {
  color: #e5e1ee;
  font-size: 14px;
}
.contribution span {
  color: #777484;
  font-size: 9px;
}
.remove-collaborator,
.settings-plugin-list button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #918d9d;
  display: inline-flex;
  justify-content: center;
  padding: 5px;
}
.remove-collaborator:hover,
.settings-plugin-list button:hover {
  color: #ffb9b9;
}
.settings-empty {
  color: #858292;
  font-size: 11px;
  margin: 0;
  padding: 18px 14px;
}
.plugin-add {
  display: flex;
  gap: 8px;
}
.plugin-add select {
  background: #242231;
  border: 1px solid #3b384a;
  border-radius: 4px;
  color: #e5e1ed;
  font-size: 11px;
  max-width: 230px;
  outline-color: #8b68f4;
  padding: 0 8px;
}
.settings-plugin-list {
  display: grid;
}
.settings-plugin-list article {
  align-items: center;
  border-bottom: 1px solid #2b2a38;
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 9px 14px;
}
.settings-plugin-list article:last-child {
  border-bottom: 0;
}
.settings-plugin-list strong {
  color: #e5e2ed;
  display: block;
  font-size: 12px;
}
.settings-plugin-list span {
  color: #9a96a7;
  font-size: 10px;
}
.settings-loading {
  color: #8b8798;
  font-size: 12px;
  padding: 30px 0;
}
.collaborator-modal {
  max-width: 480px;
}
.collaborator-modal form {
  display: grid;
  gap: 11px;
}
.collaborator-search {
  grid-template-columns: minmax(0, 1fr) auto;
}
.collaborator-search label {
  min-width: 0;
}
.collaborator-search input,
.collaborator-modal input {
  background: #242231;
  border: 1px solid #3b384a;
  border-radius: 4px;
  color: #eeeaf5;
  outline-color: #8b68f4;
  padding: 9px;
  width: 100%;
}
.collaborator-search .projects-create-button {
  align-self: end;
}
.collaborator-results {
  border: 1px solid #3a3848;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
}
.collaborator-results button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #302e3d;
  color: #e6e3ec;
  display: flex;
  justify-content: space-between;
  min-height: 43px;
  padding: 7px 9px;
  text-align: left;
  width: 100%;
}
.collaborator-results button:last-child {
  border-bottom: 0;
}
.collaborator-results button:hover {
  background: #292637;
}
.collaborator-results span {
  display: grid;
  gap: 2px;
}
.collaborator-results strong {
  font-size: 11px;
}
.collaborator-results small {
  color: #8d8999;
  font-size: 10px;
}
.collaborator-divider {
  border-top: 1px solid #363444;
  color: #8b8798;
  font-size: 10px;
  margin-top: 2px;
  padding-top: 12px;
  text-transform: uppercase;
}
.home-page {
  max-width: 1180px;
}
.home-title-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}
.home-title-row h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.home-title-row p {
  color: #9290a0;
  font-size: 11px;
  margin: 5px 0 0;
}
.home-activity-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-panel,
.home-project-section {
  background: #191923;
  border: 1px solid #2d2c3b;
  border-radius: 6px;
}
.home-panel {
  min-height: 188px;
}
.home-panel header,
.home-project-section > header {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  height: 43px;
  justify-content: space-between;
  padding: 0 14px;
}
.home-panel h2,
.home-project-section h2 {
  color: #e4e1eb;
  font-size: 13px;
  margin: 0;
}
.home-panel header button,
.home-project-section > header button {
  background: transparent;
  border: 0;
  color: #a58af2;
  font-size: 11px;
  padding: 5px 0;
}
.home-panel header button:hover,
.home-project-section > header button:hover {
  color: #d9ceff;
}
.home-activity-list {
  display: grid;
}
.home-activity-list > button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #292837;
  color: inherit;
  display: flex;
  gap: 9px;
  min-height: 35px;
  padding: 7px 12px;
  text-align: left;
  width: 100%;
}
.home-activity-list > button:last-child {
  border-bottom: 0;
}
.home-activity-list > button:hover {
  background: #20202d;
}
.home-activity-list svg {
  color: #75d29f;
  flex: 0 0 auto;
}
.home-activity-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.home-activity-list strong {
  color: #dcd9e5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-activity-list small {
  color: #827f90;
  font-size: 10px;
}
.home-activity-list time {
  color: #747180;
  font-size: 9px;
  margin-left: auto;
  white-space: nowrap;
}
.home-panel-empty {
  align-items: center;
  color: #858292;
  display: flex;
  font-size: 11px;
  justify-content: center;
  margin: 0;
  min-height: 141px;
}
.home-project-section {
  margin-top: 16px;
  overflow: hidden;
}
.home-project-row {
  display: grid;
  gap: 1px;
  grid-auto-columns: minmax(210px, 1fr);
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  overflow-x: auto;
}
.home-project-card {
  background: #191923;
  border: 0;
  border-right: 1px solid #2a2937;
  color: inherit;
  display: grid;
  gap: 6px;
  min-height: 139px;
  padding: 14px;
  text-align: left;
}
.home-project-card:hover {
  background: #20202d;
}
.home-project-card > span,
.home-public-icon {
  align-items: center;
  background: #292541;
  border: 1px solid #433b63;
  border-radius: 4px;
  color: #aa90f2;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.home-project-card strong,
.home-public-card strong {
  color: #e5e2ec;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-project-card small,
.home-public-card small {
  color: #9692a3;
  font-size: 10px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-project-card footer,
.home-public-card footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.home-project-card em,
.home-public-card em {
  color: #777484;
  font-size: 9px;
  font-style: normal;
}
.home-empty-projects,
.home-public-empty {
  align-items: center;
  color: #8f8b9c;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 139px;
  padding: 20px;
}
.home-empty-projects svg,
.home-public-empty svg {
  color: #7d5dde;
}
.home-empty-projects strong,
.home-public-empty strong {
  color: #d9d6e2;
  font-size: 12px;
}
.home-empty-projects button {
  align-items: center;
  background: #272439;
  border: 1px solid #4b426d;
  border-radius: 4px;
  color: #e8e1ff;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  padding: 7px 10px;
}
.home-recommended-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-public-card {
  align-items: flex-start;
  background: #191923;
  border: 0;
  border-right: 1px solid #2a2937;
  color: inherit;
  display: flex;
  gap: 10px;
  min-height: 99px;
  padding: 13px;
  text-align: left;
}
.home-public-card:last-child {
  border-right: 0;
}
.home-public-card:hover {
  background: #20202d;
}
.home-public-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.issues-page {
  max-width: 1000px;
}
.issues-title-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}
.issues-title-row h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.issues-toolbar {
  border-bottom: 1px solid #2c2b3a;
  display: flex;
  min-height: 42px;
}
.issue-filters {
  align-items: stretch;
  display: flex;
  gap: 18px;
}
.issue-filters button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #9794a5;
  font-size: 12px;
  padding: 0 3px;
}
.issue-filters button:hover {
  color: #e2deeb;
}
.issue-filters button.active {
  border-color: #7e55ff;
  color: #f5f1ff;
  font-weight: 700;
}
.issue-filters span {
  color: #777484;
  font-size: 11px;
  margin-left: 4px;
}
.issues-list {
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  margin-top: 13px;
  overflow: hidden;
}
.issue-row {
  align-items: flex-start;
  background: #191923;
  border-bottom: 1px solid #2a2937;
  display: flex;
  gap: 11px;
  padding: 15px 16px;
}
.issue-row:last-child {
  border-bottom: 0;
}
.issue-row > svg {
  color: #5bcf91;
  flex: 0 0 auto;
  margin-top: 1px;
}
.issue-row > div {
  min-width: 0;
}
.issue-row strong {
  color: #e7e4ed;
  display: block;
  font-size: 13px;
  line-height: 1.35;
}
.issue-row p {
  color: #9a97a7;
  font-size: 12px;
  line-height: 1.45;
  margin: 5px 0 0;
  white-space: pre-wrap;
}
.issue-row footer {
  color: #7f7c8d;
  display: flex;
  font-size: 10px;
  gap: 12px;
  margin-top: 8px;
}
.issue-row footer span {
  color: #aaa6b7;
}
.issues-empty {
  align-items: center;
  color: #858292;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 240px;
  padding: 28px;
  text-align: center;
}
.issues-empty svg {
  color: #7960d5;
}
.issues-empty strong {
  color: #d9d6e2;
  font-size: 13px;
}
.issues-empty button {
  align-items: center;
  background: #272439;
  border: 1px solid #4b426d;
  border-radius: 4px;
  color: #e8e1ff;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  margin-top: 5px;
  padding: 7px 10px;
}
.issue-ping-button {
  align-items: center;
  background: transparent;
  border: 1px solid #454158;
  border-radius: 4px;
  color: #bca8fa;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  gap: 5px;
  margin-left: 8px;
  min-height: 28px;
  padding: 0 8px;
}
.issue-ping-button:hover {
  background: #292539;
  border-color: #8060e2;
  color: #e2d9ff;
}
.ping-issue-title {
  color: #c5c1ce;
  font-size: 12px;
  line-height: 1.45;
  margin: -5px 0 3px;
}
.issue-take-button,
.issue-finish-button {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  margin-left: auto;
  min-height: 28px;
  padding: 0 9px;
}
.issue-take-button {
  background: transparent;
  border: 1px solid #454158;
  color: #c0aefa;
}
.issue-take-button:hover:not(:disabled) {
  background: #292539;
  border-color: #8060e2;
  color: #e2d9ff;
}
.issue-take-button:disabled {
  color: #726f80;
}
.issue-finish-button {
  background: #1f382e;
  border: 1px solid #35694f;
  color: #a6e8c4;
}
.issue-finish-button:hover {
  background: #26473a;
  border-color: #45805f;
}
.issue-row footer .issue-status {
  border: 1px solid;
  border-radius: 999px;
  font-weight: 700;
  padding: 2px 7px;
}
.issue-row footer .issue-status-open {
  background: #29243c;
  border-color: #493b66;
  color: #c9b7ff;
}
.issue-row footer .issue-status-closed {
  background: #1f382e;
  border-color: #35694f;
  color: #a6e8c4;
}
.projects-page {
  max-width: 1050px;
}
.projects-title-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 18px;
}
.projects-title-row h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.projects-title-row > div {
  display: flex;
  gap: 9px;
}
.projects-create-button {
  align-items: center;
  background: #1d1c29;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #c5c1d0;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  height: 35px;
  padding: 0 12px;
}
.projects-create-button:hover {
  border-color: #7661bf;
  color: #f1eef8;
}
.projects-search {
  align-items: center;
  background: #191923;
  border: 1px solid #30303f;
  border-radius: 5px;
  color: #858292;
  display: flex;
  gap: 8px;
  height: 35px;
  max-width: 340px;
  padding: 0 10px;
}
.projects-search input {
  background: transparent;
  border: 0;
  color: #edeaf4;
  font-size: 12px;
  min-width: 0;
  outline: 0;
  width: 100%;
}
.projects-list {
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  margin-top: 14px;
  overflow: hidden;
}
.project-list-row {
  align-items: center;
  background: #191923;
  border-bottom: 1px solid #2a2937;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(250px, 1fr) auto auto auto;
  min-height: 89px;
  padding: 11px 14px;
}
.project-list-row:last-child {
  border-bottom: 0;
}
.project-list-row:hover {
  background: #1d1d29;
}
.project-list-main {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 0;
  text-align: left;
}
.project-list-icon {
  align-items: center;
  background: #282440;
  border: 1px solid #413962;
  border-radius: 4px;
  color: #a486f1;
  display: inline-flex;
  flex: 0 0 auto;
  height: 43px;
  justify-content: center;
  width: 43px;
}
.project-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.project-list-copy strong {
  color: #e7e4ee;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-list-copy small {
  color: #9996a7;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-list-copy time {
  color: #737080;
  font-size: 10px;
}
.project-list-row dl {
  display: flex;
  gap: 20px;
  margin: 0;
}
.project-list-row dl div {
  display: grid;
  gap: 3px;
  min-width: 43px;
}
.project-list-row dt {
  color: #777484;
  font-size: 9px;
}
.project-list-row dd {
  color: #d3cfdd;
  font-size: 12px;
  margin: 0;
}
.project-visibility {
  background: #23222f;
  border: 1px solid #3d3b4b;
  border-radius: 4px;
  color: #9c99aa;
  font-size: 10px;
  height: 29px;
  padding: 0 8px;
}
.project-visibility:hover {
  border-color: #8767ed;
  color: #e7e1f8;
}
.project-visibility.public {
  background: #1f382e;
  border-color: #35694f;
  color: #a6e8c4;
}
.project-daw-button {
  align-items: center;
  background: #282439;
  border: 1px solid #4c4370;
  border-radius: 4px;
  color: #e7e1f8;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  height: 31px;
  justify-content: center;
  padding: 0 10px;
}
.project-daw-button:hover {
  background: #37304f;
  border-color: #8564ed;
}
.projects-empty {
  align-items: center;
  border: 1px dashed #393747;
  border-radius: 6px;
  color: #9692a3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  min-height: 300px;
  padding: 24px;
  text-align: center;
}
.projects-empty svg {
  color: #7d5dde;
}
.projects-empty strong {
  color: #d9d6e2;
  font-size: 13px;
}
.projects-empty button {
  align-items: center;
  background: #272439;
  border: 1px solid #4b426d;
  border-radius: 4px;
  color: #e8e1ff;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 10px;
}
.people-page {
  max-width: 1000px;
}
.people-title-row {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin: 0 0 18px;
}
.people-title-row h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.people-title-row p {
  color: #9290a0;
  font-size: 12px;
  margin: 6px 0 0;
}
.people-list {
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  overflow: hidden;
}
.people-list article {
  align-items: center;
  background: #191923;
  border-bottom: 1px solid #2a2937;
  display: grid;
  gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  min-height: 70px;
  padding: 11px 14px;
}
.people-list article:last-child {
  border-bottom: 0;
}
.people-list article:hover {
  background: #1d1d29;
}
.person-initial,
.person-profile-heading > span {
  align-items: center;
  background: #37304f;
  border: 1px solid #51466e;
  border-radius: 50%;
  color: #eae2ff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.people-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.people-list strong {
  color: #e7e4ee;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-list small {
  color: #9996a7;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-project-count {
  color: #8e8a9a;
  font-size: 11px;
  white-space: nowrap;
}
.people-empty {
  align-items: center;
  border: 1px dashed #393747;
  border-radius: 6px;
  color: #9692a3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 300px;
  padding: 24px;
  text-align: center;
}
.people-empty svg {
  color: #7d5dde;
}
.people-empty strong {
  color: #d9d6e2;
  font-size: 13px;
}
.people-empty p {
  font-size: 11px;
  margin: 0;
}
.people-back {
  background: transparent;
  border: 0;
  color: #a78aff;
  font-size: 12px;
  padding: 0;
}
.person-profile-heading {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  gap: 13px;
  padding: 0 0 19px;
}
.person-profile-heading > span {
  font-size: 22px;
  height: 56px;
  width: 56px;
}
.person-profile-heading p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 4px;
}
.person-profile-heading h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.person-profile-heading small {
  color: #9692a3;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}
.person-projects {
  margin-top: 20px;
}
.person-projects > header {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.person-projects h2 {
  color: #e5e2ec;
  font-size: 14px;
  margin: 0;
}
.person-projects > header span {
  color: #8e8a9a;
  font-size: 11px;
}
.person-projects > div {
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.person-projects button {
  align-items: center;
  background: #191923;
  border: 0;
  border-bottom: 1px solid #2a2937;
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 66px;
  padding: 10px 13px;
  text-align: left;
  width: 100%;
}
.person-projects button:last-child {
  border-bottom: 0;
}
.person-projects button:hover {
  background: #1d1d29;
}
.person-projects button > span {
  align-items: center;
  background: #282440;
  border: 1px solid #413962;
  border-radius: 4px;
  color: #a486f1;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.person-projects button > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.person-projects strong {
  color: #e7e4ee;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-projects small {
  color: #9996a7;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-projects dl {
  display: flex;
  gap: 14px;
  margin: 0;
}
.person-projects dl div {
  display: grid;
  gap: 2px;
}
.person-projects dt {
  color: #777484;
  font-size: 9px;
}
.person-projects dd {
  color: #d3cfdd;
  font-size: 11px;
  margin: 0;
}
.person-projects > p {
  color: #8e8a9a;
  font-size: 12px;
}
.marketplace-page {
  max-width: 1180px;
}
.marketplace-header {
  align-items: end;
  border-bottom: 1px solid #2b2a39;
  display: flex;
  justify-content: space-between;
  padding-bottom: 18px;
}
.marketplace-header p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 4px;
}
.marketplace-header h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin: 0;
}
.studio-select {
  align-items: center;
  color: #9692a3;
  display: flex;
  font-size: 11px;
  gap: 9px;
}
.studio-select select {
  appearance: none;
  background: #1a1925;
  border: 1px solid #3a3949;
  border-radius: 5px;
  color: #e9e6f1;
  font-size: 12px;
  height: 35px;
  min-width: 146px;
  outline-color: #8b68f4;
  padding: 0 31px 0 10px;
}
.studio-select {
  position: relative;
}
.studio-select::after {
  border: solid #a9a5b5;
  border-width: 0 1px 1px 0;
  content: "";
  height: 5px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 14px;
  transform: rotate(45deg);
  width: 5px;
}
.studio-select span {
  padding-right: 2px;
}
.studio-select option {
  background: #242231;
  color: #eeeaf5;
}
.marketplace-tabs {
  border-bottom: 1px solid #2b2a39;
  display: flex;
  gap: 23px;
  height: 43px;
}
.marketplace-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #a4a1b0;
  font-size: 12px;
  padding: 0 2px;
}
.marketplace-tabs button:hover {
  color: #f1eef7;
}
.marketplace-tabs button.active {
  border-color: #7e55ff;
  color: #fff;
  font-weight: 700;
}
.plugins-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 18px;
}
.plugin-card {
  background: #191923;
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.plugin-cover {
  align-items: center;
  background: #12121a;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  height: 148px;
  justify-content: center;
  overflow: hidden;
}
.plugin-cover img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.plugin-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 13px;
}
.plugin-vendor {
  color: #9c83ed;
  font-size: 10px;
  font-weight: 700;
}
.plugin-card h2 {
  color: #edebf3;
  font-size: 15px;
  letter-spacing: 0;
  margin: 5px 0 0;
}
.plugin-card p {
  color: #9996a6;
  font-size: 11px;
  line-height: 1.45;
  margin: 8px 0 11px;
}
.plugin-studios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.plugin-studios span {
  background: #242231;
  border: 1px solid #393747;
  border-radius: 3px;
  color: #a9a5b6;
  font-size: 9px;
  padding: 3px 5px;
}
.plugin-card a {
  align-items: center;
  background: #292737;
  border: 1px solid #454155;
  border-radius: 4px;
  color: #e3ddf5;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
  min-height: 31px;
  text-decoration: none;
}
.plugin-card a:hover {
  background: #353245;
  border-color: #7453dd;
}
.marketplace-empty {
  align-items: center;
  border: 1px dashed #383647;
  border-radius: 6px;
  color: #9692a3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
  min-height: 230px;
}
.marketplace-empty svg {
  color: #7c5fde;
}
.marketplace-empty strong {
  color: #d9d5e3;
  font-size: 13px;
}
.modal-layer {
  align-items: center;
  background: rgba(4, 4, 9, .78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 9;
}
.platform-modal {
  background: #1c1b28;
  border: 1px solid #484457;
  border-radius: 6px;
  display: grid;
  gap: 13px;
  max-width: 410px;
  padding: 23px;
  position: relative;
  width: 100%;
}
.platform-modal > p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0;
}
.platform-modal h2 {
  font-size: 19px;
  margin: -5px 0 5px;
}
.platform-modal label {
  color: #b7b3c2;
  display: grid;
  font-size: 11px;
  gap: 6px;
}
.platform-modal input,
.platform-modal textarea,
.platform-modal select {
  background: #242231;
  border: 1px solid #3b384a;
  border-radius: 4px;
  color: #eeeaf5;
  outline-color: #8b68f4;
  padding: 9px;
  width: 100%;
}
.platform-modal select option {
  background: #242231;
  color: #eeeaf5;
}
.platform-modal textarea {
  min-height: 80px;
  resize: vertical;
}
.assignment-repo-label {
  align-items: center;
  background: #242231;
  border: 1px solid #3b384a;
  border-radius: 4px;
  color: #a9a5b6;
  display: flex;
  font-size: 11px;
  gap: 6px;
  margin: 0;
  padding: 9px;
}
.assignment-repo-label strong {
  color: #eeeaf5;
  font-weight: 700;
}
.modal-x {
  background: none;
  border: 0;
  color: #aaa7b7;
  position: absolute;
  right: 10px;
  top: 10px;
}
.file-picker {
  align-items: center;
  border: 1px dashed #535063 !important;
  color: #9894a5 !important;
  cursor: pointer;
  justify-content: center;
  min-height: 82px;
  padding: 10px;
  text-align: center;
}
.file-picker input {
  display: none;
}
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 850px) {
  .left-sidebar {
    flex-basis: 196px;
  }
  .reference-main {
    width: calc(100% - 196px);
  }
  .project-content {
    padding: 22px 20px;
  }
  .project-grid {
    grid-template-columns: 1fr;
  }
  .right-sidebar {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .right-sidebar section {
    border: 1px solid #2b2a38;
    border-radius: 5px;
    padding: 13px !important;
  }
  .file-search {
    gap: 25px;
    width: 150px;
  }
  .plugins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-list-row {
    grid-template-columns: minmax(190px, 1fr) auto auto;
  }
  .project-list-row dl {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .project-visibility {
    grid-column: 2;
    grid-row: 1;
  }
  .project-daw-button {
    grid-column: 3;
    grid-row: 1;
  }
  .home-recommended-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-public-card:nth-child(2n) {
    border-right: 0;
  }
}
@media (max-width: 620px) {
  .left-sidebar {
    display: none;
  }
  .reference-main {
    width: 100%;
  }
  .reference-topbar {
    padding: 0 14px;
    position: sticky;
    top: 0;
    z-index: 6;
    background: #101018;
  }
  .top-search {
    margin-right: auto;
    width: min(150px, calc(100vw - 144px));
  }
  .top-buttons {
    gap: 5px;
    margin-left: 8px;
  }
  .mobile-navigation {
    background: #171621;
    border-top: 1px solid #302e40;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    left: 0;
    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    position: fixed;
    right: 0;
    z-index: 8;
  }
  .mobile-navigation button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #9894a5;
    display: grid;
    font-size: 10px;
    gap: 3px;
    justify-items: center;
    min-height: 46px;
    padding: 3px 0;
  }
  .mobile-navigation button.current {
    color: #bdabff;
  }
  .mobile-navigation button.current svg {
    stroke-width: 2.5;
  }
  .project-tabs {
    gap: 22px;
    overflow-x: auto;
    padding: 0 15px;
  }
  .project-tab {
    flex: 0 0 auto;
  }
  .project-content {
    padding: 20px 14px calc(88px + env(safe-area-inset-bottom));
  }
  .title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .title-actions {
    width: 100%;
  }
  .file-search {
    flex: 1;
    width: auto;
  }
  .daw-button {
    flex: 1;
  }
  .right-sidebar {
    grid-template-columns: 1fr;
  }
  .commit-input {
    align-items: stretch;
    flex-direction: column;
  }
  .commit-input input {
    width: 100%;
  }
  .commit-input > div {
    justify-content: flex-end;
  }
  .measure-ruler {
    padding-left: 49px;
  }
  .measure-ruler span:nth-child(n+7) {
    display: none;
  }
  .track-mix {
    display: none;
  }
  .asset-clip {
    min-width: 72px;
  }
  .marketplace-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .studio-select {
    width: 100%;
  }
  .studio-select select {
    flex: 1;
  }
  .plugins-grid {
    grid-template-columns: 1fr;
  }
  .projects-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .projects-title-row > div {
    width: 100%;
  }
  .projects-title-row .daw-button,
  .projects-create-button {
    flex: 1;
    justify-content: center;
  }
  .projects-search {
    max-width: none;
  }
  .project-list-row {
    align-items: stretch;
    gap: 12px;
    grid-template-columns: 1fr;
  }
  .project-list-row dl {
    justify-content: space-between;
  }
  .project-daw-button {
    width: 100%;
  }
  .home-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .home-title-row .daw-button {
    width: 100%;
  }
  .home-activity-grid {
    grid-template-columns: 1fr;
  }
  .home-recommended-grid {
    grid-template-columns: 1fr;
  }
  .home-public-card {
    border-bottom: 1px solid #2a2937;
    border-right: 0;
  }
  .home-public-card:last-child {
    border-bottom: 0;
  }
  .issue-row {
    flex-wrap: wrap;
  }
  .issue-row > div {
    flex: 1 1 calc(100% - 30px);
  }
  .issue-ping-button {
    margin-left: 28px;
  }
  .platform-modal {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .platform-modal input,
  .platform-modal textarea,
  .platform-modal select {
    font-size: 16px;
  }
}
@media (max-width: 850px) {
  .collaborator-list article {
    grid-template-columns: 29px minmax(0, 1fr) auto 28px;
  }
  .plugin-add select {
    max-width: 180px;
  }
}
@media (max-width: 620px) {
  .settings-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .settings-card > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .settings-action {
    align-self: stretch;
    justify-content: center;
  }
  .plugin-add {
    width: 100%;
  }
  .plugin-add select {
    flex: 1;
    max-width: none;
    min-width: 0;
  }
  .collaborator-list article {
    gap: 8px;
    grid-template-columns: 29px minmax(0, 1fr) 28px;
  }
  .contribution {
    grid-column: 2;
    grid-row: 2;
    justify-items: start;
  }
  .remove-collaborator {
    grid-column: 3;
    grid-row: 1;
  }
  .collaborator-search {
    grid-template-columns: 1fr;
  }
  .collaborator-search .projects-create-button {
    justify-content: center;
  }
}
.theme-light .people-list,
.theme-light .person-projects > div {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .people-list article,
.theme-light .person-projects button {
  background: #f8f9fc;
  border-color: #dfe3ec;
}
.theme-light .person-profile-heading,
.theme-light .person-projects > header {
  border-color: #dfe3ec;
}
.theme-light .people-empty {
  border-color: #cfd6e2;
}
.theme-light .person-initial,
.theme-light .person-profile-heading > span,
.theme-light .person-projects button > span {
  background: #eeeafd;
  border-color: #d4c9f5;
  color: #633fc5;
}
@media (max-width: 620px) {
  .mobile-navigation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .people-list article {
    align-items: start;
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
  .person-project-count {
    grid-column: 2;
  }
  .people-list .projects-create-button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .person-projects button {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .person-projects dl {
    grid-column: 2;
  }
}
.checkbox-field {
  align-items: center !important;
  cursor: pointer;
  display: flex !important;
  gap: 8px !important;
}
.checkbox-field input {
  accent-color: #7649ed;
  height: 15px;
  margin: 0;
  width: 15px;
}
.checkbox-field span {
  color: #c3bfce;
  font-size: 11px;
}
.collaboration-requests {
  margin-top: 15px;
}
.collaboration-requests > div {
  display: grid;
}
.collaboration-requests article {
  align-items: center;
  border-bottom: 1px solid #2b2a38;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px 14px;
}
.collaboration-requests article:last-child {
  border-bottom: 0;
}
.collaboration-requests article > div {
  min-width: 0;
}
.collaboration-requests strong {
  color: #e5e2ed;
  display: block;
  font-size: 12px;
}
.collaboration-requests p {
  color: #aaa6b7;
  font-size: 11px;
  line-height: 1.4;
  margin: 4px 0;
  white-space: pre-wrap;
}
.collaboration-requests small {
  color: #7f7b8b;
  font-size: 10px;
}
.collaboration-requests article > span {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}
.request-reject {
  background: transparent;
  border: 1px solid #504b5b;
  border-radius: 4px;
  color: #aaa4b5;
  font-size: 11px;
  min-height: 30px;
  padding: 0 9px;
}
.request-reject:hover {
  border-color: #b46568;
  color: #f4b5b6;
}
.request-project-description {
  color: #b7b2c2;
  font-size: 12px;
  line-height: 1.5;
  margin: -5px 0 3px;
  white-space: pre-wrap;
}
.theme-light .checkbox-field span {
  color: #545c6c;
}
.theme-light .collaboration-requests article {
  border-color: #dfe3ec;
  background: #f8f9fc;
}
.theme-light .request-reject {
  border-color: #cdd3df;
  color: #606878;
}
.theme-light .collaboration-requests p,
.theme-light .request-project-description {
  color: #626a79;
}
@media (max-width: 620px) {
  .mobile-navigation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .collaboration-requests article {
    align-items: flex-start;
    flex-direction: column;
  }
}
.mobile-brand,
.mobile-more-layer {
  display: none;
}
@media (max-width: 620px) {
  .reference-topbar {
    height: 54px;
    justify-content: space-between;
  }
  .mobile-brand {
    align-items: center;
    color: #edeaff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 750;
    gap: 7px;
  }
  .mobile-brand svg {
    color: #a88dff;
  }
  .top-search {
    display: none;
  }
  .top-buttons {
    gap: 7px;
    margin-left: auto;
  }
  .top-buttons button {
    height: 34px;
    width: 34px;
  }
  .mobile-navigation {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 66px;
    padding-top: 5px;
  }
  .mobile-navigation button {
    font-size: 11px;
    gap: 4px;
    min-height: 55px;
  }
  .mobile-navigation button svg {
    height: 20px;
    width: 20px;
  }
  .project-content {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  .mobile-more-layer {
    background: rgba(6, 6, 12, .62);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 9;
  }
  .mobile-more-menu {
    background: #1b1a28;
    border: 1px solid #454157;
    border-radius: 6px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 14px;
    padding: 8px;
    position: absolute;
    right: 14px;
  }
  .mobile-more-menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #ddd9e7;
    display: flex;
    font-size: 13px;
    gap: 9px;
    min-height: 44px;
    padding: 0 10px;
    text-align: left;
  }
  .mobile-more-menu button:hover {
    background: #302c42;
  }
  .mobile-more-menu svg {
    color: #aa8cf6;
  }
  .home-page {
    padding-top: 1px;
  }
  .home-title-row {
    margin-bottom: 14px;
  }
  .home-title-row h1 {
    font-size: 24px;
  }
  .home-title-row p {
    margin-top: 3px;
  }
  .home-panel {
    min-height: 0;
  }
  .home-panel header,
  .home-project-section > header {
    height: 45px;
  }
  .home-activity-list > button {
    min-height: 48px;
    padding: 9px 12px;
  }
  .home-panel-empty {
    min-height: 82px;
  }
  .home-project-section {
    margin-top: 13px;
  }
  .home-project-row {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
  .home-project-card {
    min-height: 105px;
  }
  .home-recommended-grid {
    grid-template-columns: 1fr;
  }
  .theme-light .mobile-brand {
    color: #2a2d3a;
  }
  .theme-light .mobile-more-menu {
    background: #ffffff;
    border-color: #d5dae5;
  }
  .theme-light .mobile-more-menu button {
    color: #353946;
  }
  .theme-light .mobile-more-menu button:hover {
    background: #f0f2f7;
  }
}
@media (max-width: 620px) {
  .mobile-navigation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mobile-navigation button {
    font-size: 10px;
  }
  .mobile-navigation button span {
    line-height: 1.05;
    max-width: 62px;
    text-align: center;
  }
}
@media (max-width: 620px) {
  .top-buttons .topbar-profile {
    height: 34px;
    width: 34px;
  }
}
.top-buttons .topbar-profile {
  background: #2b2740;
  border-color: #5a4b82;
  border-radius: 50%;
  color: #cdb8ff;
  font-size: 11px;
  font-weight: 750;
  overflow: hidden;
}
.top-buttons .topbar-profile:hover {
  border-color: #aa8cf6;
}
.top-buttons .topbar-profile img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.theme-light .top-buttons .topbar-profile {
  background: #eeeafd;
  border-color: #d4c9f5;
  color: #633fc5;
}
.topbar-profile-wrap {
  position: relative;
}
.topbar-profile-menu {
  background: #1d1b29;
  border: 1px solid #454157;
  border-radius: 7px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  min-width: 158px;
  padding: 5px;
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 10;
}
.top-buttons .topbar-profile-menu button {
  border: 0;
  border-radius: 4px;
  color: #e7e2ef;
  display: flex;
  font-size: 12px;
  gap: 9px;
  height: 37px;
  justify-content: flex-start;
  padding: 0 10px;
  width: 100%;
}
.top-buttons .topbar-profile-menu button:hover,
.top-buttons .topbar-profile-menu button:focus-visible {
  background: #302a42;
  color: #fff;
}
.topbar-profile-menu button:last-child {
  color: #eeaeb8;
}
.theme-light .topbar-profile-menu {
  background: #fff;
  border-color: #d5dae5;
  box-shadow: 0 12px 30px rgba(40, 35, 60, .14);
}
.theme-light .top-buttons .topbar-profile-menu button {
  color: #353946;
}
.theme-light .top-buttons .topbar-profile-menu button:last-child {
  color: #9b3445;
}
.theme-light .top-buttons .topbar-profile-menu button:hover,
.theme-light .top-buttons .topbar-profile-menu button:focus-visible {
  background: #f0eff8;
}
@media (max-width: 620px) {
  .mobile-navigation.without-ableton {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.top-search {
  position: relative;
}
.synced-track.has-midi-notes {
  min-height: 64px;
}
.synced-track.has-midi-notes .synced-clip {
  height: 52px;
}
.synced-clip.has-midi-notes {
  isolation: isolate;
}
.synced-clip.has-midi-notes strong {
  line-height: 16px;
  padding-top: 1px;
  position: relative;
  z-index: 2;
}
.synced-clip.has-midi-notes.has-effects strong {
  padding-top: 0;
}
.synced-clip.has-midi-notes small {
  position: relative;
  z-index: 2;
}
.midi-pattern-roll {
  bottom: 3px;
  height: 24px;
  left: 4px;
  overflow: visible;
  position: absolute;
  right: 4px;
  width: calc(100% - 8px);
  z-index: 1;
}
.midi-pattern-grid {
  stroke: rgba(255, 255, 255, .14);
  stroke-width: .35;
}
.midi-pattern-note {
  fill: #7df0c4;
}
.midi-pattern-note.part-1 {
  fill: #ffe27b;
}
.midi-pattern-note.part-2 {
  fill: #79c7ff;
}
.midi-pattern-note.part-3 {
  fill: #ff99b8;
}
.midi-pattern-note.part-4 {
  fill: #d4a4ff;
}
.theme-light .midi-pattern-grid {
  stroke: rgba(28, 29, 45, .18);
}
.theme-light .midi-pattern-note {
  filter: saturate(.9) brightness(.76);
}
.top-search-results {
  background: #1b1a28;
  border: 1px solid #454157;
  border-radius: 5px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 3px;
  left: 0;
  overflow: hidden;
  padding: 5px;
  position: absolute;
  top: calc(100% + 7px);
  width: 280px;
  z-index: 12;
}
.top-search-results button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #e6e3ef;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  text-align: left;
}
.top-search-results button:hover,
.top-search-results button:focus-visible {
  background: #302c42;
  outline: 0;
}
.top-search-results button > svg {
  color: #a98dfd;
  flex: 0 0 auto;
}
.top-search-results button span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.top-search-results button small {
  color: #9b98aa;
  font-size: 10px;
}
.top-search-results p {
  color: #9b98aa;
  font-size: 11px;
  margin: 0;
  padding: 9px 8px;
}
.mobile-search-toggle {
  display: none;
}
.theme-light .top-search-results {
  background: #ffffff;
  border-color: #d5dae5;
  box-shadow: 0 12px 26px rgba(42, 47, 61, 0.16);
}
.theme-light .top-search-results button {
  color: #303442;
}
.theme-light .top-search-results button:hover,
.theme-light .top-search-results button:focus-visible {
  background: #f0eff8;
}
.theme-light .top-search-results button small,
.theme-light .top-search-results p {
  color: #697080;
}
@media (max-width: 620px) {
  .top-search {
    display: none;
  }
  .top-search.mobile-open {
    display: flex;
    left: 14px;
    position: absolute;
    right: 14px;
    top: 10px;
    width: auto;
    z-index: 12;
  }
  .top-search.mobile-open .top-search-results {
    left: 0;
    right: 0;
    width: auto;
  }
  .mobile-search-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid #343342;
    border-radius: 5px;
    color: #a9a8b5;
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    margin-left: auto;
    width: 34px;
  }
  .theme-light .mobile-search-toggle {
    border-color: #d5dae5;
    color: #5d6474;
  }
}
.project-content-home,
.project-content-chat,
.home-page {
  max-width: none;
  width: 100%;
}
.home-title-row {
  align-items: flex-end;
  border-bottom: 1px solid #2d2c3b;
  margin: 0;
  padding-bottom: 17px;
}
.home-eyebrow {
  color: #a78aff !important;
  font-size: 10px !important;
  font-weight: 750;
  margin: 0 0 5px !important;
}
.home-title-row h1 {
  font-size: 29px;
}
.home-title-row > div > p:last-child {
  max-width: 460px;
}
.home-overview {
  border-bottom: 1px solid #2d2c3b;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.home-overview div {
  border-right: 1px solid #2d2c3b;
  padding: 15px 0;
}
.home-overview div:not(:first-child) {
  padding-left: 18px;
}
.home-overview div:last-child {
  border-right: 0;
}
.home-overview dt {
  color: #858292;
  font-size: 10px;
}
.home-overview dd {
  color: #ece8f2;
  font-size: 24px;
  margin: 4px 0 0;
}
.home-activity-grid {
  gap: 16px;
  margin-top: 20px;
}
.home-panel {
  min-height: 176px;
}
.home-panel header,
.home-project-section > header {
  height: 46px;
  padding: 0;
}
.home-panel h2,
.home-project-section h2 {
  font-size: 14px;
}
.home-panel header button,
.home-project-section > header button {
  font-size: 11px;
}
.home-activity-list > button {
  min-height: 43px;
  padding: 8px 0;
}
.home-panel-empty {
  min-height: 128px;
}
.home-project-section {
  background: transparent;
  border: 0;
  margin-top: 25px;
  overflow: visible;
}
.home-project-row,
.home-recommended-grid {
  background: #191923;
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  margin-top: 11px;
  overflow: hidden;
}
.home-project-card {
  min-height: 126px;
  padding: 13px;
}
.home-public-card {
  min-height: 106px;
}
.home-project-card:hover,
.home-public-card:hover {
  background: #22212f;
}
.theme-light .home-title-row,
.theme-light .home-overview,
.theme-light .home-overview div {
  border-color: #dfe3ec;
}
.theme-light .home-overview dd {
  color: #292d3a;
}
.theme-light .home-project-row,
.theme-light .home-recommended-grid {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .home-project-card:hover,
.theme-light .home-public-card:hover {
  background: #f0f2f7;
}
@media (max-width: 620px) {
  .home-title-row {
    align-items: flex-start;
    padding-bottom: 14px;
  }
  .home-title-row h1 {
    font-size: 25px;
  }
  .home-overview {
    margin: 0 -14px;
  }
  .home-overview div {
    padding: 12px 14px !important;
  }
  .home-overview dd {
    font-size: 21px;
  }
  .home-activity-grid {
    margin-top: 15px;
  }
  .home-panel {
    min-height: 0;
  }
  .home-panel-empty {
    min-height: 76px;
  }
  .home-project-section {
    margin-top: 18px;
  }
  .home-project-row,
  .home-recommended-grid {
    margin-top: 8px;
  }
  .home-project-card {
    min-height: 96px;
  }
  .home-public-card {
    min-height: 92px;
  }
}
.home-activity-grid-single {
  grid-template-columns: minmax(0, 1fr);
}
.home-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 20px;
}
.home-priority-grid > .home-panel {
  min-height: 0;
  min-width: 0;
}
.home-priority-grid > .home-panel:only-child {
  grid-column: 1 / -1;
}
.home-priority-grid .home-activity-list > button > span {
  flex: 1;
  min-width: 0;
}
.home-assignments-panel {
  grid-column: 1;
}
.home-messages-panel {
  grid-column: 2;
}
@media (max-width: 900px) {
  .home-priority-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-assignments-panel,
  .home-messages-panel {
    grid-column: 1;
  }
}
@media (max-width: 620px) {
  .home-priority-grid {
    gap: 14px;
    margin-top: 0;
  }
}
.account-profile-photo {
  align-items: center;
  background: #2b2740;
  border: 1px solid #4b416c;
  border-radius: 50%;
  color: #c7b1ff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 750;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.account-profile-page {
  max-width: 840px;
}
.account-profile-page > .people-back {
  margin-bottom: 19px;
}
.account-profile-heading {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
}
.account-profile-photo {
  cursor: pointer;
  font-size: 22px;
  height: 62px;
  overflow: hidden;
  position: relative;
  width: 62px;
}
.account-profile-photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.account-profile-photo input {
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  cursor: pointer;
}
.account-profile-photo-icon {
  align-items: center;
  background: #29233e;
  bottom: 0;
  color: #e8ddff;
  display: flex;
  height: 23px;
  justify-content: center;
  position: absolute;
  right: 0;
  width: 23px;
}
.account-profile-photo:focus-within {
  outline: 2px solid #a78aff;
  outline-offset: 3px;
}
.account-profile-heading > div {
  min-width: 0;
}
.account-profile-heading p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 4px;
}
.account-profile-heading h1 {
  font-size: 27px;
  margin: 0;
  overflow-wrap: anywhere;
}
.account-profile-heading small {
  color: #9692a3;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}
.account-profile-about {
  border-bottom: 1px solid #2d2c3b;
  display: grid;
  gap: 15px;
  padding: 20px 0;
}
.account-profile-about h2 {
  color: #e9e5f0;
  font-size: 14px;
  margin: 0;
}
.account-profile-about p {
  color: #aaa6b5;
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.account-profile-form label:not(.account-profile-photo) {
  color: #b7b3c2;
  display: grid;
  font-size: 12px;
  gap: 7px;
}
.account-profile-about input,
.account-profile-about textarea {
  background: #242231;
  border: 1px solid #3b384a;
  border-radius: 5px;
  color: #eeeaf5;
  font: inherit;
  outline-color: #8b68f4;
  padding: 11px;
  width: 100%;
}
.account-profile-about textarea {
  min-height: 108px;
  resize: vertical;
}
.account-profile-form .profile-social-editor {
  padding: 20px 0;
}
.account-profile-save {
  margin-top: 4px;
}
.account-profile-danger {
  margin-top: 32px;
}
.theme-light .account-profile-about input,
.theme-light .account-profile-about textarea {
  background: #fff;
  border-color: #cfd6e2;
  color: #292d3a;
}
.theme-light .account-profile-form label:not(.account-profile-photo) {
  color: #596071;
}
.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.profile-facts span {
  background: #262337;
  border: 1px solid #3b3652;
  border-radius: 999px;
  color: #c9c2d6;
  font-size: 10px;
  padding: 4px 8px;
}
.profile-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.profile-social-links a {
  align-items: center;
  background: #28243a;
  border: 1px solid #413a5d;
  border-radius: 5px;
  color: #cdb8ff;
  display: inline-flex;
  font-size: 10px;
  gap: 6px;
  padding: 6px 8px;
  text-decoration: none;
}
.profile-social-links a:hover {
  border-color: #9d7df4;
  color: #eee8ff;
}
.profile-social-links small {
  color: #a59caf;
  font-size: 9px;
}
.theme-light .profile-facts span {
  background: #f1eefb;
  border-color: #ddd3f6;
  color: #5c5274;
}
.theme-light .profile-social-links a {
  background: #f3f0fc;
  border-color: #ddd3f6;
  color: #593faf;
}
.theme-light .profile-social-links small {
  color: #706683;
}
.profile-details-fields {
  display: grid;
  gap: 10px;
}
.profile-details-fields small {
  color: #918b9c;
  font-size: 10px;
  font-weight: 400;
}
.profile-tag-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.profile-tag-control {
  position: relative;
}
.project-details {
  overflow: visible;
}
.project-details .profile-tag-field small {
  color: #7d7888;
  font-size: 10px;
  font-weight: 400;
}
.theme-light .project-details .profile-tag-field small {
  color: #6e7686;
}
.profile-tag-suggestions {
  background: #282437;
  border: 1px solid #5a4a80;
  border-radius: 7px;
  box-shadow: 0 14px 32px #0008;
  display: grid;
  left: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}
.profile-tag-suggestions button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #eeeaf5;
  cursor: pointer;
  font: inherit;
  padding: 9px 10px;
  text-align: left;
}
.profile-tag-suggestions button:hover,
.profile-tag-suggestions button.active {
  background: #48366d;
}
.theme-light .profile-tag-suggestions {
  background: #fff;
  border-color: #c9b8f0;
  box-shadow: 0 14px 32px #21203630;
}
.theme-light .profile-tag-suggestions button {
  color: #292d3a;
}
.theme-light .profile-tag-suggestions button:hover,
.theme-light .profile-tag-suggestions button.active {
  background: #eee7fb;
}
.profile-social-editor {
  border-top: 1px solid #363342;
  display: grid;
  gap: 9px;
  padding-top: 14px;
}
.profile-social-editor > header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.profile-social-editor header div {
  display: grid;
  gap: 2px;
}
.profile-social-editor header strong {
  color: #e9e5f0;
  font-size: 12px;
}
.profile-social-editor header small,
.profile-social-editor > p {
  color: #948e9f;
  font-size: 10px;
  margin: 0;
}
.profile-social-editor > header button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #af93fb;
  display: inline-flex;
  font-size: 11px;
  gap: 4px;
  padding: 4px 0;
}
.profile-social-row {
  display: grid;
  gap: 6px;
  grid-template-columns: 105px minmax(0, 1fr) 130px 26px;
}
.profile-social-row select,
.profile-social-row input {
  background: #201f2c;
  border: 1px solid #3b384a;
  border-radius: 4px;
  color: #eeeaf5;
  font-size: 11px;
  min-width: 0;
  padding: 8px;
}
.profile-social-row button {
  background: transparent;
  border: 0;
  color: #a69faf;
  padding: 0;
}
.profile-social-row button:hover {
  color: #ffaaa9;
}
.theme-light .profile-social-editor {
  border-color: #dfe3ec;
}
.theme-light .profile-social-editor header strong {
  color: #303442;
}
.theme-light .profile-social-row select,
.theme-light .profile-social-row input {
  background: #fff;
  border-color: #cfd6e2;
  color: #292d3a;
}
@media (max-width: 620px) {
  .profile-social-row {
    grid-template-columns: 1fr 30px;
  }
  .profile-social-row input {
    grid-column: 1;
  }
  .profile-social-row select {
    grid-column: 1;
  }
  .profile-social-row button {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}
.theme-light .account-profile-heading,
.theme-light .account-profile-about {
  border-color: #dfe3ec;
}
.theme-light .account-profile-photo {
  background: #eeeafd;
  border-color: #d4c9f5;
  color: #633fc5;
}
.theme-light .account-profile-about h2 {
  color: #303442;
}
.theme-light .account-profile-heading small,
.theme-light .account-profile-about p {
  color: #687080;
}
@media (max-width: 620px) {
  .account-profile-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .account-profile-save {
    width: 100%;
  }
}
@media (max-width: 620px) {
  .home-page {
    display: grid;
    gap: 20px;
    padding-top: 3px;
  }
  .home-title-row {
    border-bottom: 0;
    gap: 14px;
    margin: 0;
    padding: 0;
  }
  .home-title-row h1 {
    font-size: 26px;
    line-height: 1.1;
  }
  .home-title-row > div > p:last-child {
    line-height: 1.45;
    margin-top: 6px;
  }
  .home-title-row .daw-button {
    height: 40px;
    margin: 0;
  }
  .home-overview {
    border: 1px solid #2d2c3b;
    border-radius: 6px;
    margin: 0;
    overflow: hidden;
  }
  .home-overview div {
    align-content: space-between;
    display: grid;
    min-height: 80px;
    padding: 12px 10px !important;
  }
  .home-overview div:not(:first-child) {
    padding-left: 10px !important;
  }
  .home-overview dt {
    line-height: 1.25;
    min-height: 25px;
  }
  .home-overview dd {
    font-size: 22px;
    line-height: 1;
    margin: 0;
  }
  .home-activity-grid {
    gap: 14px;
    margin-top: 0;
  }
  .home-panel {
    min-height: 0;
  }
  .home-panel header {
    padding: 0 14px;
  }
  .home-panel-empty {
    min-height: 92px;
    padding: 16px;
    text-align: center;
  }
  .home-project-section {
    margin-top: 0;
  }
  .home-project-section > header {
    border-bottom: 0;
    height: auto;
    min-height: 28px;
    padding: 0;
  }
  .home-project-row,
  .home-recommended-grid,
  .home-empty-projects,
  .home-public-empty {
    margin-top: 10px;
  }
  .home-empty-projects,
  .home-public-empty {
    border: 1px dashed #3b394a;
    border-radius: 6px;
    min-height: 146px;
  }
  .theme-light .home-overview {
    border-color: #dfe3ec;
  }
  .theme-light .home-empty-projects,
  .theme-light .home-public-empty {
    border-color: #cfd6e2;
  }
}
.people-page {
  max-width: 1120px;
}
.people-title-row {
  border-bottom: 1px solid #2d2c3b;
  margin-bottom: 18px;
  padding-bottom: 17px;
}
.people-title-row p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 5px;
}
.people-title-row h1 {
  font-size: 29px;
}
.people-title-row > div > span {
  color: #9290a0;
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
.people-search {
  margin-bottom: 18px;
}
.people-load-more {
  align-items: center;
  color: #9692a3;
  display: flex;
  font-size: 11px;
  gap: 7px;
  justify-content: center;
  min-height: 56px;
}
.people-empty button {
  background: #272439;
  border: 1px solid #4b426d;
  border-radius: 4px;
  color: #e8e1ff;
  font-size: 11px;
  margin-top: 4px;
  padding: 7px 10px;
}
.people-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.people-card {
  background: #191823;
  border: 1px solid #2d2c3c;
  border-radius: 12px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}
.people-card:focus-visible {
  border-color: #aa8aff;
  box-shadow: 0 0 0 3px rgba(139, 107, 255, .3);
  outline: 0;
}
.people-card-banner {
  height: 102px;
  overflow: hidden;
  position: relative;
  right: 0;
  top: 0;
}
.people-card-banner::after {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .23),
      transparent 48%,
      rgba(9, 7, 16, .3));
  content: "";
  inset: 0;
  position: absolute;
}
.people-card-glow {
  background: rgba(255, 255, 255, .26);
  border-radius: 50%;
  filter: blur(1px);
  height: 128px;
  position: absolute;
  right: -37px;
  top: -64px;
  width: 128px;
}
.people-card-project-count {
  align-items: center;
  backdrop-filter: blur(7px);
  background: rgba(20, 16, 34, .35);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 9px;
  gap: 4px;
  left: 12px;
  padding: 5px 8px;
  position: absolute;
  top: 12px;
  z-index: 1;
}
.people-card-project-count strong {
  color: inherit;
  font-size: 11px;
}
.people-card-project-count small {
  color: inherit;
  font-size: 9px;
}
.people-card-body {
  display: flex;
  flex-direction: column;
  min-height: 216px;
  padding: 0 14px 13px;
  position: relative;
}
.people-card:hover {
  border-color: #8974bf;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .34);
  transform: translateY(-3px);
}
.people-card .person-initial {
  border: 3px solid #191823;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  height: 58px;
  margin-top: -30px;
  position: relative;
  width: 58px;
  z-index: 1;
}
.people-card-body > header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
  min-width: 0;
}
.people-card-body > header > div {
  min-width: 0;
}
.person-initial {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 750;
  justify-content: center;
  overflow: hidden;
}
.person-initial img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.people-card-eyebrow {
  color: #b99efd;
  display: block;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
}
.people-card h2 {
  color: #eeecf5;
  display: block;
  font-size: 16px;
  line-height: 1.2;
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-card-body > header svg {
  color: #c1aaff;
  flex: 0 0 auto;
  margin-top: 7px;
}
.people-card-body > header small {
  color: #8b8798;
  display: block;
  font-size: 9px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-card > p {
  margin: 9px 0 0;
}
.people-card-body > p {
  color: #a6a1b0;
  display: -webkit-box;
  font-size: 10.5px;
  line-height: 1.45;
  margin: 11px 0 0;
  min-height: 30px;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.people-card-genres {
  align-items: center;
  display: flex;
  gap: 5px;
  min-height: 22px;
  overflow: hidden;
  padding-top: 6px;
}
.people-card-genres span {
  background: #29243c;
  border: 1px solid #493b66;
  border-radius: 20px;
  color: #c9b7ff;
  font-size: 9px;
  overflow: hidden;
  padding: 2px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-card-work {
  border-top: 1px solid #302e3e;
  display: grid;
  gap: 7px;
  margin-top: 13px;
  padding-top: 10px;
}
.people-card-work > span:first-child {
  color: #878291;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.people-card-body > footer {
  align-items: center;
  border-top: 1px solid #302e3e;
  color: #c2aaff;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}
.people-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 28px;
  overflow: hidden;
}
.people-project-chip {
  align-items: center;
  background: #211f30;
  border: 1px solid #35324a;
  border-radius: 20px;
  color: #b89dfb;
  display: inline-flex;
  font-size: 9.5px;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
}
.people-project-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-project-chip:hover {
  background: #2a273e;
  color: #e0d3ff;
}
.people-no-project {
  color: #7f7a8b;
  font-size: 10px;
}
.people-project-more {
  color: #b9a4f5;
  font-size: 10px;
  padding: 3px 2px;
}
.person-profile-page > .people-title-row {
  border: 0;
  margin-bottom: 20px;
  padding: 0;
}
.people-back {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.person-profile-hero {
  align-items: center;
  background:
    linear-gradient(
      135deg,
      rgba(139, 107, 255, .12),
      rgba(139, 107, 255, 0) 60%),
    #191923;
  border: 1px solid #2d2c3b;
  border-radius: 12px;
  display: grid;
  gap: 18px;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  padding: 22px;
}
.person-profile-avatar {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 26px;
  font-weight: 750;
  height: 76px;
  justify-content: center;
  overflow: hidden;
  width: 76px;
  box-shadow: 0 0 0 4px rgba(139, 107, 255, .15);
}
.person-profile-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.person-profile-hero > div {
  min-width: 0;
}
.person-profile-hero > div > p:first-child {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 4px;
}
.person-profile-hero h1 {
  font-size: 28px;
  margin: 0;
  overflow-wrap: anywhere;
}
.person-profile-hero small {
  color: #9692a3;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}
.person-profile-description {
  color: #aaa6b5;
  font-size: 12px;
  line-height: 1.5;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.person-profile-stat {
  align-items: center;
  background: #211f30;
  border: 1px solid #3a3650;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-width: 130px;
  padding: 12px 16px;
}
.person-profile-stat svg {
  color: #a88bff;
  flex: 0 0 auto;
}
.person-profile-stat dt {
  color: #918dae;
  font-size: 9px;
}
.person-profile-stat dd {
  color: #ece9f3;
  font-size: 20px;
  font-weight: 700;
  margin: 3px 0 0;
}
.person-projects-empty {
  align-items: center;
  border: 1px dashed #393747;
  border-radius: 8px;
  color: #9692a3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  min-height: 160px;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.person-projects-empty svg {
  color: #7d5dde;
}
.person-projects-empty strong {
  color: #d9d6e2;
  font-size: 13px;
}
.person-projects-empty span {
  font-size: 11px;
  max-width: 320px;
}
.theme-light .person-projects-empty {
  border-color: #cfd6e2;
  color: #687080;
}
.theme-light .person-projects-empty strong {
  color: #303442;
}
.person-profile-hero dt {
  color: #858191;
  font-size: 9px;
}
.person-profile-hero dd {
  color: #ece9f3;
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 0;
}
.person-projects > div.project-card-grid {
  border: 0;
  border-radius: 0;
  margin-top: 13px;
  overflow: visible;
}
.theme-light .people-title-row,
.theme-light .person-profile-hero {
  border-color: #dfe3ec;
}
.theme-light .people-card {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfbfe);
  border-color: #d9dee8;
}
.theme-light .people-card:hover {
  border-color: #a797d3;
}
.theme-light .people-card-work,
.theme-light .people-card-body > footer {
  border-color: #e5e8f0;
}
.theme-light .people-card .person-initial {
  border-color: #ffffff;
}
.theme-light .people-card h2,
.theme-light .person-profile-hero dd {
  color: #303442;
}
.theme-light .people-card-body > header small,
.theme-light .people-card-body > p,
.theme-light .person-profile-hero small,
.theme-light .person-profile-description {
  color: #687080;
}
.theme-light .people-project-chip {
  background: #f1eefb;
  border-color: #ddd3f6;
  color: #5d469d;
}
.theme-light .people-card-genres span {
  background: #f1eefb;
  border-color: #ddd3f6;
  color: #5d469d;
}
.theme-light .people-empty button {
  background: #f1eefb;
  border-color: #ddd3f6;
  color: #5d469d;
}
.theme-light .people-project-chip:hover {
  background: #e6ddf9;
  color: #42316f;
}
.theme-light .people-project-more {
  color: #5d469d;
}
.theme-light .person-profile-hero {
  background:
    linear-gradient(
      135deg,
      rgba(139, 107, 255, .08),
      rgba(139, 107, 255, 0) 60%),
    #ffffff;
}
.theme-light .person-profile-stat {
  background: #f4f2fc;
  border-color: #ddd3f6;
}
.theme-light .person-profile-stat dt {
  color: #7a7690;
}
@media (max-width: 620px) {
  .people-card-grid {
    grid-template-columns: 1fr;
  }
  .person-profile-hero {
    align-items: flex-start;
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .person-profile-avatar {
    font-size: 19px;
    height: 54px;
    width: 54px;
  }
  .person-profile-stat {
    grid-column: 1 / -1;
  }
}
.arrangement-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: #625187 #171722;
  scrollbar-width: thin;
}
.arrangement-canvas {
  min-width: 960px;
}
@media (max-width: 620px) {
  .arrangement-canvas {
    min-width: 720px;
  }
  .arrangement-canvas .measure-ruler span:nth-child(n+7) {
    display: inline;
  }
}
.synced-clip-comment-badge {
  align-items: center;
  background: rgba(16, 16, 24, .78);
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  height: 15px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 15px;
  z-index: 3;
}
.synced-clip-comment-badge:hover {
  background: #10101a;
}
.synced-clip-comment-badge i {
  background: #fff;
  border-radius: 50%;
  height: 4px;
  width: 4px;
}
.clip-context-menu {
  width: 176px;
}
.uploaded-track-comments {
  background: #1c1b28;
  border: 1px solid #4b475a;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42);
  color: #e9e5f0;
  max-height: min(370px, calc(100vh - 16px));
  overflow: auto;
  padding: 11px;
  position: fixed;
  width: min(300px, calc(100vw - 16px));
  z-index: 25;
}
.uploaded-track-comments header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.uploaded-track-comments header strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uploaded-track-comments header button {
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
}
.uploaded-track-comment-list {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  max-height: 195px;
  overflow: auto;
}
.uploaded-track-comment-list article {
  border-top: 1px solid #393547;
  padding-top: 7px;
}
.uploaded-track-comment-list article strong {
  font-size: 11px;
}
.uploaded-track-comment-list article small {
  color: #aaa3ba;
  float: right;
  font-size: 9px;
}
.uploaded-track-comment-list p {
  color: #c9c3d2;
  font-size: 11px;
  margin: 5px 0;
  overflow-wrap: anywhere;
}
.uploaded-track-comment-list article button {
  background: transparent;
  border: 0;
  color: #bba1f3;
  font-size: 10px;
  padding: 0;
}
.uploaded-track-comments form {
  display: grid;
  gap: 7px;
}
.uploaded-track-comments textarea {
  background: #12111a;
  border: 1px solid #514b60;
  border-radius: 5px;
  color: inherit;
  padding: 7px;
  resize: vertical;
  width: 100%;
}
.uploaded-track-comments form > button {
  background: #7247e9;
  border: 0;
  border-radius: 5px;
  color: white;
  font-size: 11px;
  justify-self: end;
  padding: 6px 10px;
}
.uploaded-track-comments form > button:disabled {
  opacity: .5;
}
.uploaded-track-comments [role=alert] {
  color: #ffadad;
  font-size: 10px;
}
.theme-light .uploaded-track-comments {
  background: #fff;
  border-color: #c9cde0;
  color: #303442;
}
.theme-light .uploaded-track-comment-list article {
  border-color: #e1e3eb;
}
.theme-light .uploaded-track-comment-list p {
  color: #50566a;
}
.theme-light .uploaded-track-comment-list article small {
  color: #687080;
}
.theme-light .uploaded-track-comment-list article button {
  color: #6044aa;
}
.theme-light .uploaded-track-comments textarea {
  background: #f7f8fc;
  border-color: #c9cde0;
}
.theme-light .uploaded-track-comments [role=alert] {
  color: #a33544;
}
.clip-comment-compose,
.clip-comment-thread {
  background: #1c1b28;
  border: 1px solid #4b475a;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .48);
  position: fixed;
  z-index: 21;
}
.clip-comment-compose {
  padding: 10px;
  width: 240px;
}
.clip-comment-compose header,
.clip-comment-thread header {
  align-items: center;
  border-bottom: 1px solid #302e40;
  display: flex;
  justify-content: space-between;
  margin: -1px -1px 9px;
  padding: 9px 11px;
}
.clip-comment-compose header span,
.clip-comment-thread header span {
  align-items: center;
  color: #ece9f4;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-comment-thread header span em {
  background: #342f4a;
  border-radius: 20px;
  color: #c3b3f7;
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  padding: 1px 7px;
}
.clip-comment-compose header button,
.clip-comment-thread header button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #a09cae;
  display: inline-flex;
  flex: 0 0 auto;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.clip-comment-compose header button:hover,
.clip-comment-thread header button:hover {
  background: #2b2939;
  color: #eeeaf5;
}
.clip-comment-compose {
  padding-top: 0;
}
.clip-comment-compose textarea {
  background: #12111a;
  border: 1px solid #3a3748;
  border-radius: 6px;
  color: #eeeaf5;
  font: inherit;
  font-size: 11px;
  margin: 0 10px;
  padding: 7px 8px;
  resize: vertical;
  width: calc(100% - 20px);
}
.clip-comment-compose footer {
  display: flex;
  justify-content: flex-end;
  margin: 7px 10px 10px;
}
.clip-comment-compose footer button {
  background: #7247e9;
  border: 1px solid #906bfa;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-height: 27px;
  padding: 0 13px;
}
.clip-comment-compose footer button:hover:not(:disabled) {
  background: #8660f3;
}
.clip-comment-compose footer button:disabled {
  opacity: .5;
}
.clip-comment-thread {
  max-height: 360px;
  overflow-y: auto;
  padding-bottom: 10px;
  width: 296px;
}
.clip-comment-thread::-webkit-scrollbar {
  width: 8px;
}
.clip-comment-thread::-webkit-scrollbar-thumb {
  background: #45415a;
  border-radius: 20px;
}
.clip-comment-thread-list {
  display: grid;
  gap: 3px;
  padding: 0 4px;
}
.clip-comment {
  background: #201f2c;
  border-radius: 8px;
  margin: 0 6px;
  padding: 10px;
}
.clip-comment + .clip-comment {
  margin-top: 6px;
}
.clip-comment header {
  align-items: center;
  border-bottom: 0;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
}
.clip-comment-avatar {
  align-items: center;
  background:
    linear-gradient(
      155deg,
      #8b6bff,
      #5b3ff0);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 750;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.clip-comment-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.clip-comment header strong {
  color: #ece9f4;
  font-size: 11.5px;
}
.clip-comment header time {
  color: #837f92;
  font-size: 9px;
}
.clip-comment p {
  color: #c8c4d3;
  font-size: 11.5px;
  line-height: 1.48;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.clip-comment-actions {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}
.clip-comment-actions button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #a89cd8;
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  gap: 4px;
  padding: 3px 6px;
}
.clip-comment-actions button:hover {
  background: #2c2a3d;
  color: #e0d3ff;
}
.clip-comment-replies {
  border-left: 2px solid #383350;
  display: grid;
  gap: 8px;
  margin: 9px 0 0 11px;
  padding-left: 10px;
}
.clip-comment-reply header {
  align-items: center;
  display: flex;
  gap: 6px;
}
.clip-comment-reply header strong {
  color: #d3cee0;
  font-size: 10.5px;
}
.clip-comment-reply .clip-comment-avatar {
  height: 17px;
  width: 17px;
  font-size: 8px;
}
.clip-comment-reply p {
  color: #b3aec0;
  font-size: 10.5px;
  line-height: 1.45;
  margin: 3px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clip-comment-reply p.expanded {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.clip-comment-reply-actions {
  display: flex;
  gap: 10px;
  margin-top: 3px;
}
.clip-comment-reply-actions button {
  background: transparent;
  border: 0;
  color: #8f78d8;
  font-size: 9px;
  font-weight: 600;
  padding: 0;
}
.clip-comment-reply-actions button:hover {
  color: #cbb9ff;
}
.clip-comment-reply-compose {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.clip-comment-reply-compose input {
  background: #14131e;
  border: 1px solid #3a3748;
  border-radius: 20px;
  color: #eeeaf5;
  flex: 1;
  font-size: 11px;
  min-width: 0;
  padding: 6px 11px;
}
.clip-comment-reply-compose button {
  background: #322f45;
  border: 0;
  border-radius: 20px;
  color: #d9d4e6;
  font-size: 10px;
  font-weight: 600;
  padding: 0 12px;
}
.clip-comment-reply-compose button:hover:not(:disabled) {
  background: #3d3953;
  color: #fff;
}
.clip-comment-reply-compose button:disabled {
  opacity: .5;
}
.theme-light .clip-comment-compose,
.theme-light .clip-comment-thread {
  background: #ffffff;
  border-color: #cfd6e2;
  box-shadow: 0 16px 36px rgba(39, 34, 60, .18);
}
.theme-light .clip-comment-compose header,
.theme-light .clip-comment-thread > header {
  border-color: #dfe3ec;
}
.theme-light .clip-comment-compose header span,
.theme-light .clip-comment-thread > header span {
  color: #242735;
}
.theme-light .clip-comment-compose header button,
.theme-light .clip-comment-thread > header button {
  color: #687080;
}
.theme-light .clip-comment-compose header button:hover,
.theme-light .clip-comment-thread > header button:hover {
  background: #f1eefb;
  color: #4b388d;
}
.theme-light .clip-comment-compose textarea,
.theme-light .clip-comment-reply-compose input {
  background: #f8f9fc;
  border-color: #cbd3e1;
  color: #242735;
}
.theme-light .clip-comment-compose textarea::placeholder,
.theme-light .clip-comment-reply-compose input::placeholder {
  color: #747d8e;
}
.theme-light .clip-comment-compose textarea:focus,
.theme-light .clip-comment-reply-compose input:focus {
  border-color: #8669d6;
  outline-color: #8669d6;
}
.theme-light .clip-comment-thread header span em {
  background: #eeeafd;
  color: #6044aa;
}
.theme-light .clip-comment-thread::-webkit-scrollbar-thumb {
  background: #c4b9dc;
}
.theme-light .clip-comment {
  background: #f8f9fc;
  border: 1px solid #e3e6ef;
}
.theme-light .clip-comment header strong,
.theme-light .clip-comment-reply header strong {
  color: #303442;
}
.theme-light .clip-comment header time {
  color: #687080;
}
.theme-light .clip-comment p,
.theme-light .clip-comment-reply p {
  color: #50596a;
}
.theme-light .clip-comment-actions button,
.theme-light .clip-comment-reply-actions button {
  color: #6044aa;
}
.theme-light .clip-comment-actions button:hover {
  background: #eeeafd;
  color: #4b388d;
}
.theme-light .clip-comment-reply-actions button:hover {
  color: #4b388d;
}
.theme-light .clip-comment-replies {
  border-color: #d8ccef;
}
.theme-light .clip-comment-reply-compose button {
  background: #eeeafd;
  color: #4b388d;
}
.theme-light .clip-comment-reply-compose button:hover:not(:disabled) {
  background: #ded3f6;
  color: #34246b;
}
body,
.reference-shell,
.reference-main {
  max-width: 100%;
  overflow-x: hidden;
}
.project-content,
.project-grid,
.preview-card,
.arrangement-scroll {
  max-width: 100%;
  min-width: 0;
}
.arrangement-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  touch-action: pan-x;
  width: 100%;
}
.arrangement-canvas {
  width: max-content;
}
.arrangement-scroll::-webkit-scrollbar {
  height: 10px;
}
.arrangement-scroll::-webkit-scrollbar-track {
  background: #171722;
}
.arrangement-scroll::-webkit-scrollbar-thumb {
  background: #625187;
  border: 2px solid #171722;
  border-radius: 999px;
}
.theme-light .arrangement-scroll::-webkit-scrollbar-track {
  background: #f8f9fc;
}
.theme-light .arrangement-scroll::-webkit-scrollbar-thumb {
  background: #9b83db;
  border-color: #f8f9fc;
}
.preview-playback-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-playback-status-compact {
  display: none;
}
.title-row > div:first-child {
  min-width: 0;
}
.title-row > div:first-child p {
  overflow-wrap: anywhere;
}
.title-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 1050px) {
  .title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .title-actions {
    width: 100%;
  }
}
.project-action-button {
  align-items: center;
  background: #1d1c29;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #d0ccdc;
  display: inline-flex;
  font-size: 12px;
  gap: 7px;
  height: 35px;
  justify-content: center;
  padding: 0 12px;
}
.project-action-button:hover:not(:disabled) {
  border-color: #8664eb;
  color: #f0ecf8;
}
.project-action-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.platform-notice {
  align-items: center;
  background: #1d352b;
  border: 1px solid #3b7456;
  color: #b8edce;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 10px 15px;
}
.platform-notice button {
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  padding: 2px;
}
.theme-light .project-action-button {
  background: #f3f1fb;
  border-color: #d3cbed;
  color: #4b388d;
}
.theme-light .project-action-button:hover:not(:disabled) {
  background: #e9e5f9;
  border-color: #967ee1;
}
.theme-light .platform-notice {
  background: #eefaf2;
  border-color: #a8d8b9;
  color: #286443;
}
@media (max-width: 620px) {
  .title-actions {
    flex-wrap: wrap;
  }
  .title-actions .file-search {
    flex: 1 1 100%;
  }
  .title-actions .project-action-button,
  .title-actions .daw-button {
    flex: 1 1 0;
    padding: 0 8px;
  }
}
.changed-track .track-label {
  box-shadow: inset 3px 0 #aa87ff;
}
.changed-clip {
  box-shadow: 0 0 0 2px #d8c8ff;
}
.changed-clip strong {
  max-width: calc(100% - 68px);
}
.clip-change-badge {
  background: rgba(24, 17, 46, .72);
  border: 1px solid rgba(242, 235, 255, .58);
  border-radius: 3px;
  color: #fff;
  font-size: 8px;
  line-height: 15px;
  padding: 0 4px;
  position: absolute;
  right: 4px;
  top: 3px;
}
.preview-changes {
  border-top: 1px solid #2a2939;
}
.preview-changes header {
  align-items: center;
  background: #1d1c29;
  border-bottom: 1px solid #2a2939;
  display: flex;
  justify-content: space-between;
  min-height: 43px;
  padding: 7px 11px;
}
.preview-changes header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.preview-changes header span {
  color: #a88bff;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}
.preview-changes header strong {
  color: #e5e1ed;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-changes header time {
  color: #888494;
  font-size: 10px;
  margin-left: 12px;
  white-space: nowrap;
}
.preview-changes ul {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.preview-changes li {
  align-items: center;
  background: #181824;
  border-bottom: 1px solid #292837;
  display: flex;
  gap: 9px;
  min-height: 34px;
  padding: 6px 11px;
}
.preview-changes li:last-child {
  border-bottom: 0;
}
.preview-changes li > span {
  background: #302a49;
  border: 1px solid #4d4176;
  border-radius: 3px;
  color: #c4adff;
  font-size: 9px;
  padding: 2px 5px;
  text-transform: capitalize;
}
.preview-changes li strong {
  color: #d8d5e0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-changes > p {
  color: #8d8998;
  font-size: 11px;
  margin: 0;
  padding: 13px 11px;
}
.theme-light .preview-changes,
.theme-light .preview-changes header,
.theme-light .preview-changes li {
  border-color: #dfe3ec;
}
.theme-light .preview-changes header {
  background: #f8f9fc;
}
.theme-light .preview-changes li {
  background: #ffffff;
}
.theme-light .preview-changes header strong,
.theme-light .preview-changes li strong {
  color: #303442;
}
.theme-light .preview-changes li > span {
  background: #eeeafd;
  border-color: #d4c9f5;
  color: #633fc5;
}
@media (max-width: 620px) {
  .preview-changes header {
    align-items: flex-start;
    flex-direction: column;
  }
  .preview-changes header time {
    margin-left: 0;
  }
}
.preview-project-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.preview-project-actions button {
  align-items: center;
  background: transparent;
  border: 1px solid #4a4759;
  border-radius: 4px;
  color: #d4d0df;
  display: inline-flex;
  font-size: 10px;
  gap: 5px;
  height: 25px;
  padding: 0 7px;
}
.preview-project-actions button:hover:not(:disabled) {
  background: #2a2738;
  border-color: #8564e8;
}
.preview-project-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.theme-light .preview-project-actions button {
  border-color: #cfd6e2;
  color: #515969;
}
.theme-light .preview-project-actions button:hover:not(:disabled) {
  background: #f0eff8;
  border-color: #967ee1;
}
.preview-sync-status {
  align-items: center;
  background: #252137;
  border: 1px solid #4c426b;
  border-radius: 4px;
  color: #ddd4f7;
  display: inline-flex;
  flex: 0 1 285px;
  gap: 5px;
  height: 25px;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  padding: 0 7px;
}
.preview-sync-status:hover:not(:disabled) {
  background: #302946;
  border-color: #8969e8;
}
.preview-sync-status:disabled {
  cursor: wait;
  opacity: .65;
}
.preview-sync-status svg {
  color: #ad8bf6;
  flex: 0 0 auto;
}
.preview-sync-status > span {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-sync-status small {
  color: #ab9aca;
  flex: 0 0 auto;
  font-size: 9px;
  white-space: nowrap;
}
.theme-light .preview-sync-status {
  background: #f2effb;
  border-color: #d4c9f0;
  color: #4b397a;
}
.theme-light .preview-sync-status:hover:not(:disabled) {
  background: #e9e5f9;
  border-color: #967ee1;
}
.theme-light .preview-sync-status small {
  color: #6c5b96;
}
@media (max-width: 620px) {
  .preview-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 42px;
    padding: 7px 11px;
  }
  .preview-toolbar > span {
    flex: 1 1 110px;
  }
  .preview-playback-status-full {
    display: none;
  }
  .preview-playback-status-compact {
    display: inline;
  }
  .preview-project-actions {
    margin-left: 0;
  }
}
@media (max-width: 620px) {
  .synced-track-label {
    flex-basis: 94px;
    padding: 0 8px;
  }
  .synced-track-label span {
    font-size: 9px;
  }
  .synced-preview-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
  }
  .synced-track .track-mix {
    display: none;
  }
}
@media (max-width: 620px) {
  .synced-track-effects {
    flex-basis: 94px;
  }
  .effect-manifest-list {
    grid-template-columns: 1fr;
  }
  .effect-manifest-list article:nth-child(odd) {
    border-right: 0;
  }
  .effect-manifest-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .effect-manifest-list dl div {
    max-width: 132px;
  }
}
@media (max-width: 620px) {
  .preview-sync-status {
    flex: 1 1 calc(100% - 76px);
    margin-left: 0;
    max-width: none;
  }
  .preview-sync-status small {
    display: none;
  }
}
.projects-page,
.explore-page {
  max-width: 1180px;
}
.projects-title-row {
  align-items: end;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 17px;
}
.projects-title-row > div:first-child {
  min-width: 0;
}
.projects-title-row p {
  color: #a78aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 5px;
}
.projects-title-row h1,
.projects-title-row h2 {
  font-size: 27px;
  margin: 0;
}
.projects-title-row > div:first-child > span {
  color: #9290a0;
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
.project-card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.project-card-grid.home-project-grid {
  grid-auto-columns: minmax(250px, 320px);
  grid-auto-flow: column;
  grid-template-columns: none;
  margin-top: 11px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 9px;
  scroll-snap-type: x proximity;
  scrollbar-color: #625187 #171722;
  scrollbar-width: thin;
}
.home-project-grid > .repository-card {
  scroll-snap-align: start;
}
.theme-light .home-project-grid {
  scrollbar-color: #a69aca #f5f7fb;
}
.projects-page > .projects-search {
  margin-bottom: 14px;
}
.repository-card {
  background: #191923;
  border: 1px solid #302e3e;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.repository-card:hover {
  border-color: #5b4f7e;
}
.repository-card:focus-visible {
  border-color: #a789ff;
  box-shadow: 0 0 0 3px rgba(135, 97, 235, .3);
  outline: 0;
}
.repository-card-media {
  aspect-ratio: 16 / 9;
  background: #171522;
  overflow: hidden;
  position: relative;
}
.repository-card-media > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.repository-card-media > .repository-card-default-cover-light,
.theme-light .repository-card-media > .repository-card-default-cover-dark {
  display: none;
}
.theme-light .repository-card-media > .repository-card-default-cover-light {
  display: block;
}
.repository-card-media::after {
  background:
    linear-gradient(
      180deg,
      rgba(7, 6, 12, .45),
      transparent 45%,
      rgba(7, 6, 12, .36));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.repository-card-media-top {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  left: 11px;
  min-width: 0;
  position: absolute;
  right: 11px;
  top: 11px;
  z-index: 1;
}
.repository-card-daw-badge,
.repository-card-visibility {
  align-items: center;
  backdrop-filter: blur(7px);
  background: rgba(22, 20, 31, .78);
  border: 1px solid rgba(223, 215, 239, .24);
  border-radius: 999px;
  color: #eae4f8;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  gap: 4px;
  padding: 5px 7px;
}
.repository-card-daw-badge .daw-logo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  height: 13px;
  width: 13px;
}
.repository-card-visibility.public {
  background: rgba(21, 68, 51, .82);
  border-color: rgba(132, 222, 178, .38);
  color: #c3f2d7;
}
.repository-card-play {
  align-items: center;
  background: #f5f1ff;
  border: 0;
  border-radius: 50%;
  bottom: 12px;
  color: #3f278a;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  position: absolute;
  right: 12px;
  transition: transform .16s ease, background .16s ease;
  width: 42px;
  z-index: 1;
}
.repository-card-play:hover:not(:disabled) {
  background: #fff;
  transform: scale(1.06);
}
.repository-card-play:disabled {
  cursor: not-allowed;
  opacity: .52;
}
.repository-card-heading {
  min-width: 0;
}
.repository-card-heading h2 {
  color: #f0ecf6;
  font-size: 15px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repository-card-description {
  color: #a6a1b0;
  display: -webkit-box;
  font-size: 11px;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 33px;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.repository-card-stats {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.repository-card-stats div {
  min-width: 0;
}
.repository-card-stats dt {
  align-items: center;
  color: #858191;
  display: flex;
  font-size: 9px;
  gap: 4px;
  white-space: nowrap;
}
.repository-card-daw {
  align-items: center;
  background: #7047e4;
  border: 1px solid #926cfa;
  border-radius: 4px;
  color: #ffffff;
  display: inline-flex;
  font-size: 11px;
  gap: 5px;
  height: 31px;
  justify-content: center;
  padding: 0 9px;
  white-space: nowrap;
}
.repository-card-daw:hover {
  background: #815ceb;
}
.repository-card-author {
  align-items: center;
  display: flex;
  gap: 9px;
  min-height: 52px;
  padding: 8px 12px;
}
.repository-card-avatar {
  align-items: center;
  background: #493763;
  border-radius: 50%;
  color: #e5d7ff;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  overflow: hidden;
  width: 34px;
}
.repository-card-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.repository-card-author-copy {
  align-items: baseline;
  display: flex;
  gap: 9px;
  min-width: 0;
}
.repository-card-author-copy strong {
  color: #e8e4ee;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repository-card-author-copy time {
  color: #9290a1;
  flex: 0 0 auto;
  font-size: 10px;
  white-space: nowrap;
}
.repository-card-media {
  aspect-ratio: 1 / 1;
}
.repository-card-media::after {
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 17, .38),
      transparent 28%,
      rgba(8, 7, 17, .12) 50%,
      rgba(8, 7, 17, .94));
}
.repository-card-media-top {
  left: 12px;
  right: 12px;
  top: 12px;
}
.repository-card-daw-badge {
  max-width: 52%;
  overflow: hidden;
}
.repository-card-daw-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repository-card-media-bottom {
  bottom: 16px;
  left: 15px;
  position: absolute;
  right: 15px;
  z-index: 1;
}
.repository-card-heading {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
}
.repository-card-heading h2 {
  color: #fff;
  font-size: clamp(19px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
}
.repository-card-version-tag {
  background: rgba(92, 64, 133, .57);
  border: 1px solid rgba(192, 164, 255, .26);
  border-radius: 999px;
  color: #d2b5ff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
}
.repository-card-description {
  color: #ccc4df;
  font-size: 12px;
  line-height: 1.35;
  margin: 3px 0 0;
  min-height: 0;
  -webkit-line-clamp: 2;
}
.repository-card-media-footer {
  align-items: center;
  display: flex;
  margin-top: 14px;
  padding-right: 52px;
}
.repository-card-stats {
  display: flex;
  gap: 0;
  min-width: 0;
}
.repository-card-stats div {
  padding: 0 10px;
}
.repository-card-stats div:first-child {
  padding-left: 0;
}
.repository-card-stats div + div {
  border-left: 1px solid rgba(226, 215, 244, .24);
}
.repository-card-stats dt {
  color: #c8b8e7;
  font-size: 10px;
  gap: 6px;
}
.repository-card-stats dt svg {
  color: #d6adff;
  flex: 0 0 auto;
}
.repository-card-play {
  background: rgba(75, 58, 107, .85);
  border: 1px solid rgba(199, 177, 249, .35);
  bottom: 13px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
  color: #ead9ff;
  height: 48px;
  right: 13px;
  width: 48px;
}
.repository-card-play:hover:not(:disabled) {
  background: #634a95;
}
.person-projects > .project-card-grid {
  border: 0;
  border-radius: 0;
  margin-top: 12px;
  overflow: visible;
}
.person-projects .repository-card .repository-card-play {
  align-items: center;
  background: rgba(75, 58, 107, .85);
  border: 1px solid rgba(199, 177, 249, .35);
  border-radius: 50%;
  display: inline-flex;
  gap: 0;
  grid-template-columns: none;
  height: 48px;
  justify-content: center;
  min-height: 48px;
  padding: 0;
  text-align: center;
  width: 48px;
}
.person-projects .repository-card .repository-card-play:hover:not(:disabled) {
  background: #634a95;
}
.repository-card-bottom-bar {
  align-items: center;
  border-top: 1px solid #302e3e;
  display: flex;
  justify-content: space-between;
  min-height: 45px;
  padding: 0 13px;
}
.repository-card-bottom-bar > span:first-child {
  min-width: 1px;
}
.repository-card-open-label {
  align-items: center;
  color: #c5a3ff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 650;
  gap: 5px;
}
.repository-card-bottom-bar .repository-card-daw {
  background: transparent;
  border: 0;
  color: #aaa3be;
  height: 34px;
  padding: 0;
}
.repository-card-bottom-bar .repository-card-daw:hover {
  background: transparent;
  color: #e6d8ff;
}
.theme-light .repository-card-author-copy strong {
  color: #2d3140;
}
.theme-light .repository-card-author-copy time {
  color: #697080;
}
.theme-light .repository-card-media .repository-card-heading h2 {
  color: #fff;
}
.theme-light .repository-card-media .repository-card-description {
  color: #e2d9ef;
}
.theme-light .repository-card-media .repository-card-stats dt {
  color: #ddd0f1;
}
.theme-light .repository-card-bottom-bar {
  border-color: #dfe3ec;
}
.theme-light .repository-card-bottom-bar .repository-card-daw {
  color: #7157a1;
}
.project-cover-field {
  align-items: center;
  background:
    linear-gradient(
      120deg,
      #252132,
      #1d1c28);
  border: 1px solid #454055;
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 108px minmax(0, 1fr);
  padding: 14px;
}
.project-cover-field:focus-within {
  border-color: #a482ff;
  box-shadow: 0 0 0 3px #8b68f426;
}
.project-cover-preview {
  aspect-ratio: 1;
  background: #171522;
  border: 1px solid #514765;
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 108px;
}
.project-cover-preview img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.project-cover-preview-action {
  align-items: center;
  background: #171522d9;
  bottom: 0;
  color: #f5efff;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 4px;
  justify-content: center;
  left: 0;
  min-height: 29px;
  opacity: 0;
  position: absolute;
  right: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.project-cover-preview:hover .project-cover-preview-action,
.project-cover-preview:focus-visible .project-cover-preview-action {
  opacity: 1;
  transform: translateY(0);
}
.project-cover-preview:focus-visible {
  border-color: #b99aff;
  outline: 2px solid #8b68f466;
  outline-offset: 2px;
}
.project-cover-preview:disabled {
  cursor: default;
}
.project-cover-placeholder {
  align-items: center;
  background:
    radial-gradient(
      circle at 75% 25%,
      #6b49a270,
      transparent 55%),
    linear-gradient(
      135deg,
      #302841,
      #191824);
  color: #c7aaff;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.project-cover-content {
  min-width: 0;
}
.project-cover-content h3 {
  color: #f1edf7;
  font-size: 13px;
  margin: 0 0 5px;
}
.project-cover-content p {
  color: #aaa3b6;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}
.project-cover-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 8px;
}
.project-details .project-cover-upload {
  align-items: center;
  background: #4b3677;
  border: 1px solid #805ccc;
  border-radius: 5px;
  color: #f5efff;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
}
.project-details .project-cover-upload:hover {
  background: #604396;
  border-color: #a783fa;
}
.project-cover-cancel {
  background: transparent;
  border: 0;
  color: #b9a6d8;
  font-size: 11px;
  padding: 5px 2px;
}
.project-cover-cancel:hover {
  color: #e5d8ff;
  text-decoration: underline;
}
.project-cover-content small {
  color: #9790a3;
  display: block;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.project-cover-field.is-disabled .project-cover-upload {
  cursor: not-allowed;
  opacity: .5;
}
.project-cover-field .project-cover-input {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.theme-light .project-cover-field {
  background:
    linear-gradient(
      120deg,
      #fff,
      #f6f3fc);
  border-color: #d9d1e9;
}
.theme-light .project-cover-preview {
  border-color: #d8cce9;
}
.theme-light .project-cover-content h3 {
  color: #292d3a;
}
.theme-light .project-cover-content p,
.theme-light .project-cover-content small {
  color: #687080;
}
.theme-light .project-details .project-cover-upload {
  background: #ece5fa;
  border-color: #c8b5eb;
  color: #57349b;
}
.theme-light .project-details .project-cover-upload:hover {
  background: #e4d8f7;
  border-color: #a58ade;
}
.theme-light .project-cover-cancel {
  color: #654b9d;
}
@media (max-width: 520px) {
  .project-cover-field {
    gap: 12px;
    grid-template-columns: 78px minmax(0, 1fr);
    padding: 11px;
  }
  .project-cover-preview {
    width: 78px;
  }
}
.explore-section-count {
  background: #28253a;
  border: 1px solid #48405d;
  border-radius: 4px;
  color: #b99efa;
  padding: 4px 7px;
}
.explore-page > .projects-search {
  margin-bottom: 26px;
}
.explore-section + .explore-section {
  margin-top: 27px;
}
.theme-light .projects-title-row,
.theme-light .repository-card-stats {
  border-color: #dfe3ec;
}
.theme-light .repository-card {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .repository-card:hover {
  border-color: #a797d3;
}
.theme-light .repository-card-heading h2 {
  color: #2d3140;
}
.theme-light .repository-card-description,
.theme-light .repository-card-stats dt {
  color: #697080;
}
.theme-light .repository-card-visibility {
  background: #f2f3f8;
  border-color: #d9dee8;
  color: #626a79;
}
.theme-light .repository-card-visibility.public {
  background: #e9f8ef;
  border-color: #b8dfc7;
  color: #2f7855;
}
.theme-light .repository-card-open {
  background: #f4f2fb;
  border-color: #d3cbed;
  color: #4b388d;
}
.theme-light .repository-card-open:hover {
  background: #ece8f8;
  border-color: #967ee1;
  color: #403174;
}
.theme-light .explore-section-count {
  background: #eeeafd;
  border-color: #d4c9f5;
  color: #633fc5;
}
@media (max-width: 620px) {
  .projects-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .projects-title-actions {
    display: flex;
    width: 100%;
  }
  .project-card-grid {
    grid-template-columns: 1fr;
  }
  .project-card-grid.home-project-grid {
    grid-auto-columns: min(78vw, 300px);
    margin-top: 8px;
  }
  .repository-card {
    min-height: 248px;
  }
}
.branch-picker {
  align-items: center;
  background: #201f2c;
  border: 1px solid #3a3749;
  border-radius: 6px;
  color: #aaa6b6;
  display: inline-flex;
  gap: 6px;
  padding: 0 4px 0 9px;
}
.branch-picker svg {
  color: #a88bff;
}
.branch-picker select {
  appearance: none;
  background: transparent;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #a9a5b5 50%),
    linear-gradient(
      135deg,
      #a9a5b5 50%,
      transparent 50%);
  background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
  background-repeat: no-repeat;
  background-size: 5px 5px;
  border: 0;
  color: #e3dff0;
  cursor: pointer;
  font-size: 11px;
  height: 29px;
  padding: 0 24px 0 4px;
}
.branch-picker select:focus {
  color: #f5f2ff;
  outline: 0;
}
.branch-picker select option {
  background: #242233;
  color: #eeeaf5;
}
.version-branch-controls {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.branch-create-button {
  align-items: center;
  background: transparent;
  border: 1px solid #4b4661;
  border-radius: 4px;
  color: #c8b6ff;
  display: inline-flex;
  height: 27px;
  justify-content: center;
  padding: 0;
  width: 27px;
}
.branch-create-button:hover {
  background: #2c273e;
  border-color: #9475ef;
  color: #f1ecff;
}
.theme-light .branch-create-button {
  border-color: #c9c2e4;
  color: #684ab8;
}
.theme-light .branch-create-button:hover {
  background: #eeebfa;
  border-color: #9475ef;
}
.real-commits {
  position: relative;
}
.real-commits.expanded {
  max-height: 390px;
  overflow-y: auto;
  scrollbar-color: #625187 #171722;
  scrollbar-width: thin;
}
.real-commits article > svg {
  color: #9c7cf2;
  flex: 0 0 auto;
}
.real-commits article::before {
  background: #51446f;
  content: "";
  height: calc(100% + 1px);
  left: 16px;
  position: absolute;
  top: 25px;
  width: 1px;
}
.real-commits article {
  position: relative;
}
.real-commits article:last-child::before {
  display: none;
}
.version-expand {
  align-items: center;
  background: transparent;
  border: 0;
  color: #ad91fa;
  display: inline-flex;
  font-size: 11px;
  gap: 5px;
  margin: 10px 2px 2px;
  padding: 4px 0;
}
.version-expand:hover {
  color: #ddd3ff;
}
.rotate-chevron {
  transform: rotate(180deg);
}
.theme-light .branch-picker {
  color: #5d6474;
}
.theme-light .branch-picker select {
  background: #ffffff;
  border-color: #cfd6e2;
  color: #343847;
}
.theme-light .real-commits article::before {
  background: #cfc4ec;
}
.theme-light .real-commits.expanded {
  scrollbar-color: #8f77d5 #f8f9fc;
}
@media (max-width: 620px) {
  .version-summary {
    align-items: center;
    gap: 8px;
  }
  .branch-picker span {
    display: none;
  }
  .branch-picker {
    min-width: 0;
  }
  .branch-picker select {
    max-width: 160px;
  }
  .real-commits.expanded {
    max-height: 330px;
  }
}
.sync-activity-card {
  background: #191923;
  border: 1px solid #2d2c3b;
  border-radius: 6px;
  margin-top: 14px;
  overflow: hidden;
}
.sync-activity-card > header {
  align-items: center;
  border-bottom: 1px solid #2d2c3b;
  display: flex;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
}
.sync-activity-card > header span {
  align-items: center;
  color: #ddd8eb;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-activity-card > header span svg {
  color: #a88bff;
  flex: 0 0 auto;
}
.sync-activity-card > header > div {
  display: flex;
  flex: 0 0 auto;
}
.sync-activity-card > header button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #aaa5b8;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.sync-activity-card > header button:hover:not(:disabled) {
  color: #d9ceff;
}
.sync-activity-card > header button:disabled {
  opacity: .55;
}
.sync-change-summary {
  border-bottom: 1px solid #292837;
  padding: 10px 12px;
}
.sync-change-summary strong {
  color: #ddd8eb;
  font-size: 11px;
}
.sync-change-summary p {
  color: #aaa5b8;
  font-size: 10px;
  line-height: 1.5;
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}
.sync-activity-card ol {
  display: grid;
  list-style: none;
  margin: 0;
  max-height: 420px;
  overflow-y: auto;
  padding: 0;
}
.sync-activity-card li {
  align-items: center;
  border-bottom: 1px solid #292837;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-height: 49px;
  padding: 8px 12px;
}
.sync-activity-card li:last-child {
  border-bottom: 0;
}
.sync-activity-card li > div {
  min-width: 0;
}
.sync-activity-card li strong {
  color: #e3dfec;
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-activity-card li span {
  color: #a78af2;
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
.sync-activity-card time {
  color: #888394;
  flex: 0 0 auto;
  font-size: 10px;
  text-align: right;
}
.sync-activity-card > p {
  color: #9792a3;
  font-size: 11px;
  margin: 0;
  padding: 17px 12px;
}
.theme-light .sync-activity-card {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .sync-activity-card > header,
.theme-light .sync-change-summary,
.theme-light .sync-activity-card li {
  border-color: #dfe3ec;
}
.theme-light .sync-activity-card > header span,
.theme-light .sync-change-summary strong,
.theme-light .sync-activity-card li strong {
  color: #343847;
}
.theme-light .sync-change-summary p,
.theme-light .sync-activity-card > p,
.theme-light .sync-activity-card time {
  color: #687080;
}
.theme-light .sync-activity-card li span {
  color: #684bbb;
}
.auth-restoring {
  align-items: center;
  background: #111019;
  color: #e9e5f0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
.workspace-loading {
  align-items: center;
  color: #aaa4ba;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}
.home-activity-loading {
  color: #aaa4ba;
  font-size: 12px;
  margin: 18px 0;
}
.theme-light .home-activity-loading {
  color: #615c70;
}
.workspace-loading-icon {
  animation: workspace-loading-spin 1s linear infinite;
  color: #9e79ff;
}
.workspace-loading button {
  background: transparent;
  border: 1px solid #7659bd;
  border-radius: 6px;
  color: #b99bff;
  cursor: pointer;
  padding: 7px 14px;
}
.theme-light .workspace-loading {
  color: #615c70;
}
@keyframes workspace-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
.auth-page {
  background: #111019;
  color: #e9e5f0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  min-height: 100vh;
}
.auth-intro {
  border-right: 1px solid #2c2a3a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px min(9vw, 128px);
}
.auth-brand {
  align-items: center;
  color: #f0ecf8;
  display: inline-flex;
  font-size: 19px;
  gap: 9px;
}
.auth-brand svg {
  color: #aa8aff;
}
.auth-eyebrow {
  color: #a98cff;
  font-size: 10px;
  font-weight: 750;
  margin: 50px 0 10px;
}
.auth-intro > h1 {
  font-size: 38px;
  line-height: 1.08;
  margin: 0;
  max-width: 580px;
}
.auth-intro > p:not(.auth-eyebrow) {
  color: #a8a3b2;
  font-size: 14px;
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 540px;
}
.public-projects {
  border: 1px solid #302e40;
  border-radius: 6px;
  margin-top: 34px;
  max-width: 650px;
  overflow: hidden;
}
.public-projects > header {
  align-items: center;
  background: #191824;
  border-bottom: 1px solid #302e40;
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 14px;
}
.public-projects h2 {
  color: #e7e2ed;
  font-size: 13px;
  margin: 0;
}
.public-projects header p {
  color: #858091;
  font-size: 10px;
  margin: 4px 0 0;
}
.public-projects > header > span {
  color: #ad91fa;
  font-size: 12px;
}
.public-projects article {
  align-items: flex-start;
  background: #15141e;
  border-bottom: 1px solid #292735;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}
.public-projects article:last-child {
  border-bottom: 0;
}
.public-projects article > span {
  align-items: center;
  background: #2b2740;
  border: 1px solid #463b65;
  border-radius: 4px;
  color: #a98aff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 31px;
  justify-content: center;
  width: 31px;
}
.public-projects article > div {
  min-width: 0;
}
.public-projects article strong {
  color: #e5e1eb;
  display: block;
  font-size: 12px;
}
.public-projects article p,
.public-projects-empty {
  color: #97919f;
  font-size: 11px;
  line-height: 1.45;
  margin: 4px 0 0;
}
.public-projects-empty {
  padding: 20px 14px;
}
.auth-panel {
  align-self: center;
  justify-self: center;
  max-width: 390px;
  padding: 35px;
  width: min(100%, 460px);
}
.auth-mode-tabs {
  border-bottom: 1px solid #343141;
  display: flex;
  gap: 22px;
}
.auth-mode-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #9993a4;
  font-size: 12px;
  padding: 0 2px 11px;
}
.auth-mode-tabs button.active {
  border-color: #855cf5;
  color: #eee9f8;
  font-weight: 750;
}
.auth-heading {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin: 30px 0 23px;
}
.auth-heading svg {
  color: #aa8aff;
  margin-top: 2px;
}
.auth-heading h2 {
  color: #efebf5;
  font-size: 22px;
  margin: 0;
}
.auth-heading p {
  color: #9994a4;
  font-size: 12px;
  line-height: 1.45;
  margin: 6px 0 0;
}
.auth-panel form {
  display: grid;
  gap: 14px;
}
.auth-panel label {
  color: #b8b2c3;
  display: grid;
  font-size: 11px;
  gap: 7px;
}
.auth-panel input {
  background: #1a1925;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #eeeaf5;
  font-size: 14px;
  height: 40px;
  outline: 0;
  padding: 0 11px;
}
.auth-panel input:focus {
  border-color: #8b68f4;
}
.auth-error {
  background: #3c2429;
  border: 1px solid #804049;
  border-radius: 4px;
  color: #ffc1c8;
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
  padding: 9px 10px;
}
.auth-submit {
  align-items: center;
  background: #7448ec;
  border: 1px solid #906cff;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 7px;
  height: 40px;
  justify-content: center;
  margin-top: 5px;
}
.auth-submit:hover:not(:disabled) {
  background: #8660f3;
}
.auth-submit:disabled {
  cursor: wait;
  opacity: .65;
}
.daw-connect-page {
  align-items: center;
  background: #111019;
  color: #e9e5f0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.daw-connect-panel {
  border: 1px solid #302e40;
  border-radius: 7px;
  background: #191824;
  max-width: 560px;
  padding: 30px;
  width: 100%;
}
.daw-connect-brand {
  align-items: center;
  display: inline-flex;
  font-size: 18px;
  gap: 8px;
}
.daw-connect-brand svg,
.daw-connect-eyebrow {
  color: #aa8aff;
}
.daw-connect-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 750;
  margin-top: 28px;
}
.daw-connect-panel h1 {
  font-size: 25px;
  line-height: 1.2;
  margin: 9px 0;
}
.daw-connect-panel > p {
  color: #a8a3b2;
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.daw-connect-panel form {
  display: grid;
  gap: 16px;
}
.daw-project-list {
  border: 0;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
}
.daw-project-list legend,
.daw-connect-create > span {
  color: #b9b3c7;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 7px;
}
.daw-project-list label {
  align-items: center;
  background: #201f2c;
  border: 1px solid #353344;
  border-radius: 5px;
  display: flex;
  gap: 9px;
  min-height: 56px;
  padding: 9px 10px;
}
.daw-project-list label.selected {
  border-color: #8967ef;
  background: #27233a;
}
.daw-project-list input {
  position: absolute;
  opacity: 0;
}
.daw-project-list svg {
  color: #aa8aff;
  flex: 0 0 auto;
}
.daw-project-list span {
  min-width: 0;
}
.daw-project-list strong,
.daw-project-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daw-project-list strong {
  color: #ece8f3;
  font-size: 12px;
}
.daw-project-list small {
  color: #9993a5;
  font-size: 10px;
  margin-top: 3px;
}
.daw-project-list label > svg:last-child {
  margin-left: auto;
}
.daw-connect-create {
  display: grid;
  gap: 7px;
}
.daw-connect-create > span {
  align-items: center;
  display: flex;
  gap: 5px;
  margin: 0;
}
.daw-connect-create input {
  background: #15141e;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #eeeaf5;
  font-size: 12px;
  height: 39px;
  padding: 0 10px;
}
.daw-connect-error {
  background: #3c2429;
  border: 1px solid #804049;
  border-radius: 4px;
  color: #ffc1c8;
  font-size: 11px;
  margin: 0;
  padding: 9px;
}
.daw-connect-submit {
  align-items: center;
  background: #7448ec;
  border: 1px solid #906cff;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 7px;
  height: 40px;
  justify-content: center;
}
.daw-connect-submit:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.daw-connect-loading {
  align-items: center;
  color: #aaa5b6;
  display: flex;
  font-size: 12px;
  gap: 8px;
}
@media (max-width: 760px) {
  .auth-page {
    display: block;
  }
  .auth-intro {
    border-bottom: 1px solid #2c2a3a;
    border-right: 0;
    padding: 26px 18px 28px;
  }
  .auth-eyebrow {
    margin-top: 32px;
  }
  .auth-intro > h1 {
    font-size: 29px;
  }
  .public-projects {
    margin-top: 25px;
  }
  .auth-panel {
    max-width: none;
    padding: 30px 18px calc(44px + env(safe-area-inset-bottom));
    width: auto;
  }
}
.auth-panel .auth-remember-device {
  align-items: center;
  display: flex;
  gap: 9px;
  font-size: 12px;
}
.auth-panel .auth-remember-device input {
  accent-color: #855cf5;
  height: 16px;
  margin: 0;
  width: 16px;
}
.auth-panel .auth-retry {
  background: transparent;
  border: 1px solid #6e5ca2;
  border-radius: 5px;
  color: #c9b7ff;
  cursor: pointer;
  min-height: 36px;
}
.account-danger-zone {
  border-color: #633b46;
}
.account-danger-zone header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 14px;
}
.account-danger-zone h2 {
  color: #f0dce0;
}
.account-danger-zone p {
  color: #b79ba2;
  font-size: 11px;
  line-height: 1.45;
  margin: 4px 0 0;
  max-width: 590px;
}
.delete-account-button,
.delete-account-confirm {
  align-items: center;
  background: #41242b;
  border: 1px solid #8d4b59;
  border-radius: 4px;
  color: #ffc1c9;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
}
.delete-account-button:hover,
.delete-account-confirm:hover:not(:disabled) {
  background: #552a34;
  border-color: #d16c7d;
}
.delete-account-modal h2 {
  max-width: 330px;
}
.delete-account-warning {
  color: #d3aeb5;
  font-size: 12px;
  line-height: 1.5;
  margin: -5px 0 5px;
}
.delete-account-confirm {
  justify-content: center;
  min-height: 36px;
  width: 100%;
}
.delete-account-confirm:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.theme-light .account-danger-zone {
  border-color: #e2bec5;
}
.theme-light .account-danger-zone h2 {
  color: #7f303d;
}
.theme-light .account-danger-zone p {
  color: #725864;
}
.theme-light .delete-account-button,
.theme-light .delete-account-confirm {
  background: #fff0f2;
  border-color: #e5a8b2;
  color: #9b3445;
}
.theme-light .delete-account-button:hover,
.theme-light .delete-account-confirm:hover:not(:disabled) {
  background: #ffe2e6;
  border-color: #ce6878;
}
.theme-light .delete-account-warning {
  color: #7a4f58;
}
@media (max-width: 620px) {
  .account-danger-zone header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .delete-account-button {
    width: 100%;
    justify-content: center;
  }
}
.project-details {
  box-shadow: inset 0 3px 0 #7d58e7;
}
.project-details > header {
  min-height: 63px;
  padding: 12px 16px;
}
.project-details-status {
  background: #252331;
  border: 1px solid #484354;
  border-radius: 999px;
  color: #aaa5b6;
  font-size: 10px;
  font-weight: 750;
  padding: 5px 9px;
}
.project-details-status.public {
  background: #1d392e;
  border-color: #3b7658;
  color: #a9e8c4;
}
.project-details form {
  gap: 17px;
  padding: 18px 16px 0;
}
.project-fields {
  display: grid;
  gap: 15px;
}
.project-details label {
  color: #c5c0ce;
  font-size: 11px;
  font-weight: 650;
  gap: 8px;
}
.project-details input,
.project-details textarea {
  background: #20202c;
  border-color: #373546;
  border-radius: 5px;
  font-size: 12px;
  padding: 10px 11px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.project-details input:focus,
.project-details textarea:focus {
  border-color: #926ff7;
  box-shadow: 0 0 0 3px rgba(132, 96, 236, .15);
  outline: 0;
}
.project-details textarea {
  min-height: 104px;
}
.project-details label small {
  color: #7d7888;
  font-size: 10px;
  font-weight: 400;
  justify-self: end;
  margin-top: -3px;
}
.collaboration-toggle {
  align-items: center;
  background: #201f2b;
  border: 1px solid #343242;
  border-radius: 5px;
  cursor: pointer;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 31px minmax(0, 1fr);
  min-height: 58px;
  padding: 9px 10px;
}
.collaboration-toggle > input {
  height: 1px !important;
  opacity: 0;
  position: absolute;
  width: 1px !important;
}
.toggle-indicator {
  background: #4a4655;
  border-radius: 999px;
  height: 17px;
  position: relative;
  transition: background .16s ease;
  width: 30px;
}
.toggle-indicator::after {
  background: #ddd9e6;
  border-radius: 50%;
  content: "";
  height: 13px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform .16s ease;
  width: 13px;
}
.collaboration-toggle > input:checked + .toggle-indicator {
  background: #7955e5;
}
.collaboration-toggle > input:checked + .toggle-indicator::after {
  transform: translateX(13px);
}
.collaboration-toggle strong {
  color: #e2dfe9;
  display: block;
  font-size: 11px;
}
.collaboration-toggle small {
  color: #898493;
  display: block;
  font-size: 10px;
  font-weight: 400;
  margin-top: 3px;
}
.project-details-footer {
  align-items: center;
  border-top: 1px solid #302e3c;
  display: flex;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 12px 16px;
}
.project-details-footer > span {
  color: #878291;
  font-size: 10px;
}
.project-details-footer .daw-button {
  justify-self: auto;
}
.theme-light .project-details {
  box-shadow: inset 0 3px 0 #7955d7;
}
.theme-light .project-details input,
.theme-light .project-details textarea,
.theme-light .collaboration-toggle {
  background: #f8f9fc;
  border-color: #d9dee8;
}
.theme-light .project-details input:focus,
.theme-light .project-details textarea:focus {
  box-shadow: 0 0 0 3px rgba(103, 73, 198, .12);
}
.theme-light .project-details label {
  color: #4e5565;
}
.theme-light .collaboration-toggle strong {
  color: #343947;
}
.theme-light .collaboration-toggle small,
.theme-light .project-details label small,
.theme-light .project-details-footer > span {
  color: #6e7686;
}
.theme-light .project-details-footer {
  border-color: #dfe3ec;
}
.theme-light .project-details-status {
  background: #f2f3f8;
  border-color: #d9dee8;
  color: #626a79;
}
@media (max-width: 620px) {
  .project-details > header {
    align-items: center;
    flex-direction: row;
  }
  .project-details-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
  }
  .project-details-footer .daw-button {
    width: 100%;
  }
}
.collaborator-actions {
  display: flex;
  gap: 8px;
}
.visibility-toggle-button {
  background: transparent;
  border: 1px solid #4b4758;
  border-radius: 4px;
  color: #b9b4c5;
  font-size: 11px;
  min-height: 30px;
  padding: 0 9px;
}
.visibility-toggle-button:hover {
  border-color: #8b68f4;
  color: #e5def7;
}
.theme-light .visibility-toggle-button {
  border-color: #cdd3df;
  color: #596171;
}
.theme-light .visibility-toggle-button:hover {
  border-color: #967ee1;
  color: #4b388d;
}
@media (max-width: 620px) {
  .collaborator-actions {
    display: grid;
    gap: 8px;
    width: 100%;
  }
  .collaborator-actions .settings-action,
  .visibility-toggle-button {
    justify-content: center;
    width: 100%;
  }
}
.project-chat-page {
  display: grid;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
.project-chat-header {
  align-items: flex-start;
  border-bottom: 1px solid #302e3c;
  display: flex;
  justify-content: space-between;
  padding: 2px 0 14px;
}
.project-chat-header p {
  color: #aa8aff;
  font-size: 10px;
  font-weight: 750;
  margin: 0 0 6px;
}
.project-chat-header span {
  color: #9994a6;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}
.project-chat-thread {
  background: #191923;
  border: 1px solid #302e3c;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto;
  max-height: min(74vh, 760px);
  min-height: 460px;
  overflow-y: auto;
  padding: 14px;
  scrollbar-color: #625187 #171722;
  scrollbar-width: thin;
  width: 100%;
}
.project-chat-load-earlier {
  align-self: center;
  background: transparent;
  border: 1px solid #51476a;
  border-radius: 16px;
  color: #c8b8f5;
  cursor: pointer;
  font-size: 11px;
  margin: 0 0 10px;
  padding: 6px 12px;
}
.project-chat-load-earlier:disabled {
  cursor: default;
  opacity: .55;
}
.theme-light .project-chat-load-earlier {
  border-color: #cabbea;
  color: #6244a9;
}
.project-chat-message {
  align-items: flex-end;
  display: flex;
  gap: 9px;
  margin-top: 12px;
  max-width: min(88%, 620px);
}
.project-chat-message.grouped {
  margin-top: 2px;
}
.project-chat-message.no-avatar:not(.mine) {
  padding-left: 38px;
}
.project-chat-message.mine {
  flex-direction: row-reverse;
  margin-left: auto;
}
.project-chat-message.mine.no-avatar {
  padding-right: 38px;
}
.project-chat-message:hover .project-chat-actions {
  opacity: 1;
  pointer-events: auto;
}
.project-chat-avatar {
  align-items: center;
  background: #2d2940;
  border: 1px solid #51466f;
  border-radius: 50%;
  color: #c8b5ff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 750;
  height: 29px;
  justify-content: center;
  width: 29px;
}
.project-chat-bubble {
  background: #242331;
  border: 1px solid #373545;
  min-width: 0;
  padding: 8px 11px;
}
.project-chat-message.mine .project-chat-bubble {
  background: #322652;
  border-color: #6d4cbb;
}
.project-chat-message header {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-bottom: 3px;
}
.project-chat-message strong {
  color: #eee9f5;
  font-size: 11px;
}
.project-chat-message time {
  color: #938da1;
  font-size: 9px;
}
.project-chat-message p {
  color: #cbc6d5;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.project-chat-inline-time {
  color: #6f697e;
  float: right;
  font-size: 8px;
  margin: 4px 0 -2px 8px;
}
.project-chat-edited {
  color: #6f697e;
  font-size: 9px;
}
.project-chat-deleted {
  align-items: center;
  color: #6f697e;
  display: flex;
  font-size: 11px;
  font-style: italic;
  gap: 5px;
}
.project-chat-reply-quote {
  background: rgba(0, 0, 0, .18);
  border-left: 2px solid #8b68f4;
  border-radius: 4px;
  margin-bottom: 6px;
  padding: 4px 7px;
}
.project-chat-reply-quote strong {
  color: #bca5fb;
  display: block;
  font-size: 10px;
}
.project-chat-reply-quote span {
  color: #9a96a7;
  display: -webkit-box;
  font-size: 10px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.project-chat-actions {
  align-items: center;
  align-self: center;
  background: #201f2c;
  border: 1px solid #3a3749;
  border-radius: 6px;
  display: flex;
  gap: 1px;
  opacity: 0;
  padding: 2px;
  pointer-events: none;
  transition: opacity .12s ease;
}
.project-chat-actions button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #a09cae;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.project-chat-actions button:hover {
  background: #2c2a3b;
  color: #eee9f5;
}
.project-chat-actions button.confirm {
  color: #ff9c95;
}
.project-chat-actions button.confirm:hover {
  background: #402323;
  color: #ffc6c1;
}
.project-chat-edit {
  display: grid;
  gap: 6px;
}
.project-chat-edit textarea {
  background: #12111a;
  border: 1px solid #3a3748;
  border-radius: 4px;
  color: #eeeaf5;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  resize: vertical;
  width: 100%;
}
.project-chat-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.project-chat-edit-actions button {
  align-items: center;
  background: #2c2a3b;
  border: 0;
  border-radius: 4px;
  color: #d9d4e6;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.project-chat-edit-actions button:hover:not(:disabled) {
  background: #3a3749;
}
.project-chat-edit-actions button:disabled {
  opacity: .5;
}
.project-chat-day {
  align-items: center;
  color: #857f92;
  display: flex;
  font-size: 10px;
  gap: 10px;
  margin: 6px 0 14px;
  text-align: center;
}
.project-chat-day::before,
.project-chat-day::after {
  border-top: 1px solid #302e3c;
  content: "";
  flex: 1;
}
.project-chat-empty {
  align-content: center;
  color: #9590a0;
  display: grid;
  flex: 1;
  gap: 7px;
  justify-items: center;
  min-height: 250px;
  text-align: center;
}
.project-chat-empty svg {
  color: #a88aff;
}
.project-chat-empty strong {
  color: #dfd9eb;
  font-size: 12px;
}
.project-chat-empty span {
  font-size: 11px;
}
.project-chat-compose {
  background: #191923;
  border: 1px solid #302e3c;
  border-radius: 6px;
  margin-bottom: 18px;
  padding: 7px;
}
.project-chat-compose-row {
  align-items: center;
  display: flex;
  gap: 7px;
}
.project-chat-compose textarea {
  background: #12111a;
  border: 1px solid #3a3748;
  border-radius: 16px;
  box-sizing: border-box;
  color: #eeeaf5;
  display: block;
  flex: 1;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  max-height: 90px;
  min-height: 30px;
  min-width: 0;
  outline: 0;
  padding: 6px 12px;
  resize: none;
}
.project-chat-compose textarea:focus {
  border-color: #8c68f5;
}
.project-chat-send {
  align-items: center;
  background: #7247e9;
  border: 1px solid #906bfa;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.project-chat-send:hover:not(:disabled) {
  background: #8660f3;
}
.project-chat-send:disabled {
  opacity: .5;
}
.project-chat-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid #3a3748;
  border-radius: 50%;
  color: #a9a5b6;
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.project-chat-icon-button:hover:not(:disabled) {
  border-color: #8c68f5;
  color: #eeeaf5;
}
.project-chat-icon-button:disabled {
  opacity: .5;
}
.project-chat-add {
  position: relative;
}
.project-chat-menu {
  background: #1c1b28;
  border: 1px solid #3a3749;
  border-radius: 8px;
  bottom: calc(100% + 8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  display: grid;
  left: 0;
  min-width: 200px;
  overflow: hidden;
  position: absolute;
  z-index: 5;
}
.project-chat-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #d9d4e6;
  display: flex;
  font-size: 12px;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  text-align: left;
  width: 100%;
}
.project-chat-menu button:hover {
  background: #292736;
}
.project-chat-menu button svg {
  color: #a88bff;
  flex: 0 0 auto;
}
.project-chat-menu-back {
  border-bottom: 1px solid #302e3f !important;
  color: #a9a5b6 !important;
  font-size: 11px !important;
}
.project-chat-menu-back svg {
  color: #a9a5b6 !important;
}
.project-chat-menu-list {
  max-height: 220px;
  overflow-y: auto;
}
.project-chat-menu-list button {
  align-items: center;
  height: auto;
  padding: 7px 12px;
}
.project-chat-menu-list button span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.project-chat-menu-list strong {
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-chat-menu-list small {
  color: #8f899a;
  font-size: 9px;
}
.project-chat-menu-list p {
  color: #8f899a;
  font-size: 11px;
  padding: 10px 12px;
}
.project-chat-recording {
  align-items: center;
  background: #12111a;
  border: 1px solid #3a3748;
  border-radius: 16px;
  color: #eeeaf5;
  display: flex;
  font-size: 12px;
  gap: 8px;
  padding: 6px 12px;
}
.project-chat-recording-dot {
  background: #ff5c5c;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  animation: chat-recording-pulse 1.1s ease-in-out infinite;
}
@keyframes chat-recording-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .3;
  }
}
.project-chat-recording button {
  align-items: center;
  background: #402323;
  border: 0;
  border-radius: 12px;
  color: #ffc6c1;
  display: inline-flex;
  font-size: 11px;
  gap: 5px;
  margin-left: auto;
  min-height: 24px;
  padding: 0 10px;
}
.project-chat-recording button:hover {
  background: #4f2b2b;
}
.project-chat-attachment-photo {
  display: block;
  margin-bottom: 4px;
}
.project-chat-attachment-photo img {
  border-radius: 10px;
  display: block;
  max-height: 220px;
  max-width: 100%;
}
.project-chat-attachment-audio {
  display: block;
  height: 34px;
  margin-bottom: 4px;
  max-width: 260px;
  width: 100%;
}
.project-chat-pin {
  align-items: center;
  background: #2b2247;
  border: 1px solid #6d4cbb;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  padding: 7px 10px;
}
.project-chat-pin svg {
  color: #c8b5ff;
  flex: 0 0 auto;
}
.project-chat-pin strong {
  color: #eee9f5;
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-chat-pin span {
  color: #b7a6e8;
  font-size: 9px;
  text-transform: uppercase;
}
.project-chat-pin-clip[href] {
  color: inherit;
  text-decoration: none;
}
.project-chat-pin-clip[href]:hover {
  border-color: #bc96ff;
}
.issue-song-pin {
  margin: 9px 0 0;
  width: fit-content;
  max-width: 100%;
}
.issue-song-pin > div {
  min-width: 0;
}
.project-chat-hint {
  color: #716c7d;
  display: block;
  font-size: 9px;
  padding: 4px 4px 0;
}
.project-chat-reply-banner {
  align-items: flex-start;
  background: #201f2c;
  border: 1px solid #3a3749;
  border-left: 2px solid #8b68f4;
  border-radius: 5px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 6px 9px;
}
.project-chat-reply-banner strong {
  color: #bca5fb;
  display: block;
  font-size: 10px;
}
.project-chat-reply-banner span {
  color: #9a96a7;
  display: -webkit-box;
  font-size: 11px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.project-chat-reply-banner button {
  background: transparent;
  border: 0;
  color: #8f899a;
  flex: 0 0 auto;
}
.project-chat-reply-banner button:hover {
  color: #eeeaf5;
}
.project-chat-pending {
  align-items: center;
  background: #201f2c;
  border: 1px solid #3a3749;
  border-left: 2px solid #7247e9;
  border-radius: 8px;
  display: flex;
  gap: 9px;
  margin-bottom: 8px;
  padding: 6px 9px;
}
.project-chat-pending img {
  border-radius: 5px;
  flex: 0 0 auto;
  height: 40px;
  object-fit: cover;
  width: 40px;
}
.project-chat-pending audio {
  flex: 1;
  height: 32px;
  min-width: 0;
}
.project-chat-pending-icon {
  align-items: center;
  background: #2b2247;
  border-radius: 6px;
  color: #c8b5ff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.project-chat-pending > div {
  flex: 1;
  min-width: 0;
}
.project-chat-pending strong {
  color: #eeeaf5;
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-chat-pending span {
  color: #9a96a7;
  font-size: 9px;
  text-transform: uppercase;
}
.project-chat-pending > button {
  background: transparent;
  border: 0;
  color: #8f899a;
  flex: 0 0 auto;
}
.project-chat-pending > button:hover {
  color: #eeeaf5;
}
.theme-light .project-chat-header {
  border-color: #dfe3ec;
}
.theme-light .project-chat-message strong,
.theme-light .project-chat-empty strong {
  color: #343847;
}
.theme-light .project-chat-header span,
.theme-light .project-chat-empty,
.theme-light .project-chat-hint {
  color: #697080;
}
.theme-light .project-chat-thread,
.theme-light .project-chat-compose {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .project-chat-bubble {
  background: #f7f7fb;
  border-color: #dfe1ea;
}
.theme-light .project-chat-message.mine .project-chat-bubble {
  background: #eee9fb;
  border-color: #b9a5ee;
}
.theme-light .project-chat-message p {
  color: #4f5665;
}
.theme-light .project-chat-message time {
  color: #788091;
}
.theme-light .project-chat-compose textarea {
  background: #fbfcff;
  border-color: #d5dae5;
  color: #343847;
}
.theme-light .project-chat-inline-time {
  color: #9aa0ae;
}
.theme-light .project-chat-day {
  color: #8890a0;
}
.theme-light .project-chat-day::before,
.theme-light .project-chat-day::after {
  border-color: #dfe3ec;
}
.theme-light .project-chat-reply-quote {
  background: rgba(0, 0, 0, .04);
}
.theme-light .project-chat-reply-banner,
.theme-light .project-chat-actions,
.theme-light .project-chat-pending {
  background: #ffffff;
  border-color: #d9dee8;
}
.theme-light .project-chat-edit textarea {
  background: #fbfcff;
  border-color: #d5dae5;
  color: #343847;
}
.theme-light .project-chat-pin {
  background: #ffffff;
  border-color: #c9b8eb;
}
.theme-light .project-chat-pin svg {
  color: #6944b9;
}
.theme-light .project-chat-pin strong {
  color: #303442;
}
.theme-light .project-chat-pin span {
  color: #604596;
}
.theme-light .project-chat-pin-song-action:hover,
.theme-light .issue-song-pin-action:hover {
  background: #f5f0ff;
  border-color: #9471d7;
}
.theme-light .project-chat-pin-song-action:focus-visible,
.theme-light .issue-song-pin-action:focus-visible {
  outline: 2px solid #704bd1;
  outline-offset: 2px;
}
.theme-light .project-chat-pending strong {
  color: #303442;
}
.theme-light .project-chat-pending span {
  color: #625a73;
}
@media (max-width: 620px) {
  .project-chat-thread {
    border-radius: 5px;
    max-height: calc(100vh - 300px);
    min-height: 240px;
    padding: 10px;
  }
  .project-chat-message {
    max-width: 94%;
  }
  .project-chat-message time {
    white-space: nowrap;
  }
  .project-chat-compose {
    padding: 8px;
  }
}
.branch-graph-wrapper {
  margin-top: 4px;
  max-width: 100%;
  overflow: auto;
  scrollbar-color: #625187 #171722;
  scrollbar-width: thin;
}
.branch-graph {
  position: relative;
}
.branch-graph-svg {
  left: 0;
  position: absolute;
  top: 0;
}
.branch-graph-rows {
  position: absolute;
}
.branch-graph-commit {
  background: transparent;
  border: 0;
  color: inherit;
  display: block;
  overflow: hidden;
  padding: 2px 0 0;
  position: absolute;
  text-align: left;
  width: 100%;
}
.branch-graph-commit strong {
  align-items: center;
  color: #ddd9e8;
  display: flex;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.branch-graph-message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-graph-daw {
  align-items: center;
  color: #bda5ff;
  display: inline-flex;
  flex: 0 0 auto;
}
.branch-graph-daw .daw-logo {
  fill: none;
  height: 13px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 13px;
}
.branch-graph-commit small {
  color: #8a8798;
  display: block;
  font-size: 9px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branch-graph-commit:hover strong {
  color: #fff;
}
.branch-graph-pill {
  align-items: center;
  border: 1px solid;
  border-radius: 20px;
  display: inline-flex;
  font-size: 9px;
  font-weight: 750;
  gap: 4px;
  margin-bottom: 3px;
  padding: 1px 8px;
  text-transform: uppercase;
}
.theme-light .branch-graph-commit strong {
  color: #303442;
}
.theme-light .branch-graph-commit small {
  color: #7a8090;
}
.sync-arrangement-comparison {
  border-bottom: 1px solid #292837;
}
.sync-arrangement-comparison > header {
  align-items: center;
  border-bottom: 1px solid #292837;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 12px;
}
.sync-arrangement-comparison > header strong {
  color: #e6e1ef;
  font-size: 12px;
}
.sync-arrangement-comparison > header span {
  color: #9993a6;
  font-size: 10px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-comparison-legend {
  align-items: center;
  border-bottom: 1px solid #292837;
  display: flex;
  gap: 18px;
  min-height: 34px;
  padding: 0 12px;
}
.sync-comparison-legend span {
  align-items: center;
  color: #aaa5b5;
  display: inline-flex;
  font-size: 10px;
  gap: 6px;
}
.sync-comparison-legend i {
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.sync-comparison-legend i.unchanged {
  background: #8752c7;
}
.sync-comparison-legend i.added {
  background: #2f9a76;
}
.sync-comparison-legend i.deleted {
  background: #b94e67;
}
.sync-comparison-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #76579c #171620;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
}
.sync-comparison-scroll::-webkit-scrollbar {
  height: 13px;
}
.sync-comparison-scroll::-webkit-scrollbar-track {
  background: #171620;
}
.sync-comparison-scroll::-webkit-scrollbar-thumb {
  background: #76579c;
  border: 3px solid #171620;
  border-radius: 9px;
}
.sync-comparison-board {
  min-width: 980px;
}
.sync-comparison-ruler,
.sync-comparison-row {
  display: grid;
  grid-template-columns: var(--comparison-track-width) var(--comparison-timeline-width) var(--comparison-kind-width);
}
.sync-comparison-ruler {
  color: #8f899c;
  font-size: 9px;
  height: 34px;
}
.sync-comparison-ruler > * {
  border-bottom: 1px solid #2c2b3a;
}
.sync-comparison-ruler > span {
  background: #1d1c28;
  border-right: 1px solid #2c2b3a;
  position: sticky;
  z-index: 4;
}
.sync-comparison-ruler > span:first-child {
  left: 0;
}
.sync-comparison-ruler > span:last-child {
  border-left: 1px solid #2c2b3a;
  border-right: 0;
  right: 0;
}
.sync-comparison-ruler > div {
  background: #171721;
  position: relative;
}
.sync-comparison-ruler > div span {
  position: absolute;
  top: 11px;
  transform: translateX(-50%);
}
.sync-comparison-ruler > div span:first-child {
  transform: none;
}
.sync-comparison-row > * {
  border-bottom: 1px solid #2c2b3a;
}
.sync-comparison-track {
  align-items: center;
  background: #1d1c28;
  border-right: 1px solid #2c2b3a;
  color: #d6d1df;
  display: flex;
  font-size: 10px;
  gap: 9px;
  left: 0;
  min-width: 0;
  padding: 0 12px;
  position: sticky;
  z-index: 3;
}
.sync-comparison-track svg {
  color: #a884ff;
  flex: 0 0 auto;
}
.sync-comparison-track > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-comparison-track.added {
  box-shadow: inset 3px 0 #2f9a76;
}
.sync-comparison-track.deleted {
  box-shadow: inset 3px 0 #b94e67;
}
.sync-comparison-lane {
  background-color: #171721;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(112px - 1px),
      #292837 calc(112px - 1px) 112px);
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.sync-comparison-clip {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  color: #fff;
  display: block;
  height: 38px;
  min-width: 92px;
  overflow: hidden;
  padding: 0 8px;
  position: absolute;
}
.sync-comparison-clip strong {
  bottom: 3px;
  color: inherit;
  display: block;
  font-size: 9px;
  left: 7px;
  max-width: calc(100% - 14px);
  overflow: hidden;
  position: absolute;
  right: 7px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  white-space: nowrap;
  z-index: 2;
}
.sync-comparison-clip.unchanged,
.sync-comparison-clip.changed {
  background: #684094;
}
.sync-comparison-clip.added {
  background: #24775d;
}
.sync-comparison-clip.deleted {
  background: #8e3c50;
}
.sync-comparison-midi-roll {
  height: 24px;
  inset: 2px 4px auto;
  overflow: visible;
  position: absolute;
  width: calc(100% - 8px);
  z-index: 1;
}
.sync-comparison-midi-roll rect.unchanged {
  fill: #b68aff;
}
.sync-comparison-midi-roll rect.added {
  fill: #63e0b1;
}
.sync-comparison-midi-roll rect.deleted {
  fill: #ff7895;
}
.sync-comparison-no-clips {
  color: #807a8d;
  font-size: 10px;
  left: 14px;
  position: absolute;
  top: 25px;
}
.sync-comparison-kind {
  align-items: center;
  background: #1d1c28;
  border-left: 1px solid #2c2b3a;
  color: #7f798c;
  display: flex;
  font-size: 8px;
  justify-content: center;
  position: sticky;
  right: 0;
  text-transform: uppercase;
  z-index: 3;
}
.sync-arrangement-comparison > footer {
  align-items: center;
  background: #1d1c28;
  border-top: 1px solid #2c2b3a;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
}
.sync-arrangement-comparison > footer strong {
  color: #ded9e8;
  font-size: 10px;
}
.sync-arrangement-comparison > footer span {
  align-items: center;
  color: #918b9e;
  display: inline-flex;
  font-size: 9px;
  gap: 5px;
  text-align: right;
}
.sync-comparison-empty {
  color: #9690a1;
  font-size: 10px;
  margin: 0;
  padding: 16px 12px;
}
.sync-clip-changes {
  border-bottom: 1px solid #292837;
}
.sync-clip-changes > header {
  align-items: center;
  border-bottom: 1px solid #292837;
  display: flex;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
}
.sync-clip-changes > header strong {
  color: #e6e1ef;
  font-size: 12px;
}
.sync-clip-changes > header span {
  color: #9993a6;
  font-size: 10px;
}
.sync-clip-change-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.sync-clip-change-card {
  align-items: stretch;
  background: #171721;
  border: 1px solid #302e40;
  border-radius: 6px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(240px, .9fr) minmax(300px, 1.1fr);
  padding: 10px;
}
.sync-clip-change-card.added {
  border-left: 3px solid #2f9a76;
}
.sync-clip-change-card.deleted {
  border-left: 3px solid #b94e67;
}
.sync-clip-change-card.changed {
  border-left: 3px solid #8752c7;
}
.sync-clip-change-copy {
  min-width: 0;
}
.sync-clip-change-copy > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
}
.sync-clip-change-copy strong {
  color: #e7e2ef;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-clip-change-copy span {
  color: #918b9e;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-clip-change-copy em {
  border: 1px solid #4a4261;
  border-radius: 999px;
  color: #bda6ff;
  display: inline-block;
  font-size: 8px;
  font-style: normal;
  margin-top: 6px;
  padding: 2px 6px;
  text-transform: uppercase;
}
.sync-clip-change-copy ul {
  color: #b8b2c3;
  font-size: 10px;
  line-height: 1.5;
  margin: 7px 0 0;
  padding-left: 16px;
}
.sync-clip-change-copy li {
  border: 0;
  display: list-item;
  min-height: 0;
  padding: 0;
}
.sync-clip-change-block {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  color: #fff;
  min-height: 90px;
  overflow: hidden;
  padding: 9px 10px;
  position: relative;
}
.sync-clip-change-block.changed {
  background: #684094;
}
.sync-clip-change-block.added {
  background: #24775d;
}
.sync-clip-change-block.deleted {
  background: #8e3c50;
}
.sync-clip-change-block > strong {
  bottom: 21px;
  font-size: 11px;
  left: 10px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  white-space: nowrap;
  z-index: 2;
}
.sync-clip-change-block > small {
  bottom: 7px;
  font-size: 8px;
  left: 10px;
  opacity: .78;
  position: absolute;
  z-index: 2;
}
.sync-comparison-midi-roll.detail {
  height: 52px;
  inset: 7px 8px auto;
  width: calc(100% - 16px);
}
.sync-activity-meta {
  align-items: center;
  color: #8f899c;
  display: flex;
  font-size: 9px;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 12px;
}
.theme-light .sync-arrangement-comparison,
.theme-light .sync-arrangement-comparison > header,
.theme-light .sync-comparison-legend,
.theme-light .sync-clip-changes,
.theme-light .sync-clip-changes > header {
  border-color: #dfe3ec;
}
.theme-light .sync-arrangement-comparison > header strong,
.theme-light .sync-arrangement-comparison > footer strong,
.theme-light .sync-clip-changes > header strong,
.theme-light .sync-clip-change-copy strong {
  color: #343847;
}
.theme-light .sync-arrangement-comparison > header span,
.theme-light .sync-comparison-legend span,
.theme-light .sync-comparison-empty,
.theme-light .sync-clip-changes > header span,
.theme-light .sync-clip-change-copy span,
.theme-light .sync-activity-meta {
  color: #687080;
}
.theme-light .sync-comparison-ruler > span,
.theme-light .sync-comparison-track,
.theme-light .sync-comparison-kind,
.theme-light .sync-arrangement-comparison > footer {
  background: #f4f6fa;
  border-color: #dfe3ec;
}
.theme-light .sync-comparison-ruler > *,
.theme-light .sync-comparison-row > * {
  border-color: #dfe3ec;
}
.theme-light .sync-comparison-ruler {
  color: #71798a;
}
.theme-light .sync-comparison-track {
  color: #3e4452;
}
.theme-light .sync-comparison-kind {
  color: #757d8d;
}
.theme-light .sync-comparison-ruler > div,
.theme-light .sync-comparison-lane {
  background-color: #fafbfe;
}
.theme-light .sync-comparison-lane {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(112px - 1px),
      #e2e6ee calc(112px - 1px) 112px);
}
.theme-light .sync-comparison-no-clips {
  color: #727a8b;
}
.theme-light .sync-comparison-scroll {
  scrollbar-color: #8b72b2 #eceff5;
}
.theme-light .sync-comparison-scroll::-webkit-scrollbar-track {
  background: #eceff5;
}
.theme-light .sync-comparison-scroll::-webkit-scrollbar-thumb {
  background: #8b72b2;
  border-color: #eceff5;
}
.theme-light .sync-clip-change-card {
  background: #f8f9fc;
  border-color: #d9dee8;
}
.theme-light .sync-clip-change-copy ul {
  color: #5e6676;
}
.theme-light .sync-clip-change-copy em {
  border-color: #cfc3ee;
  color: #684bbb;
}
@media (max-width: 700px) {
  .sync-arrangement-comparison > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    padding-bottom: 7px;
    padding-top: 7px;
  }
  .sync-arrangement-comparison > header span {
    max-width: 100%;
    width: 100%;
  }
  .sync-comparison-legend {
    gap: 12px;
  }
  .sync-clip-change-card {
    grid-template-columns: 1fr;
  }
  .sync-arrangement-comparison > footer span {
    max-width: 70%;
  }
  .sync-comparison-track {
    padding: 0 9px;
  }
}
.theme-light .branch-graph-wrapper {
  scrollbar-color: #8f77d5 #f8f9fc;
}
.projects-title-row > div:first-child {
  display: block;
  min-width: 0;
}
.projects-title-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}
.explore-empty {
  align-items: center;
  color: #8f8b9c;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 8px;
  margin: 0;
  padding: 34px 14px;
}
.explore-empty svg {
  color: #4f4a63;
}
.theme-light .explore-section h2 {
  color: #2d3140;
}
.theme-light .explore-empty {
  color: #7a8090;
}
.theme-light .explore-empty svg {
  color: #c7cbdc;
}
.home-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.home-panel > header {
  padding: 0 18px;
}
.home-panel .home-activity-list {
  padding: 10px 0;
}
.home-panel .home-activity-list > button {
  padding: 10px 18px;
}
.theme-light .home-panel .home-activity-list > button {
  background: #ffffff;
  color: #303442;
}
.theme-light .home-panel .home-activity-list > button:hover,
.theme-light .home-panel .home-activity-list > button:focus-visible {
  background: #f2f0fa;
}
.theme-light .home-panel .home-activity-list strong {
  color: #242735;
}
.theme-light .home-panel .home-activity-list small,
.theme-light .home-panel .home-activity-list time {
  color: #687080;
}
.theme-light .home-panel .home-activity-list svg {
  color: #278059;
}
.home-panel-empty {
  flex: 1;
  padding: 20px 18px;
}
.ableton-bridge-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.ableton-bridge-header {
  align-items: center;
  border-bottom: 1px solid #2b2a39;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
}
.ableton-bridge-header svg {
  color: #aa8aff;
  flex: 0 0 auto;
}
.daw-bridge-header .daw-logo {
  fill: none;
  height: 24px;
  stroke: #aa8aff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 24px;
}
.ableton-bridge-header h1 {
  font-size: 22px;
  margin: 0;
}
.ableton-bridge-header p {
  color: #a8a3b2;
  font-size: 12px;
  margin: 4px 0 0;
}
.ableton-bridge-offline {
  background: #241f2e;
  border: 1px dashed #454155;
  border-radius: 6px;
  color: #b9b3c7;
  font-size: 12px;
  line-height: 1.55;
  padding: 14px;
}
.ableton-bridge-status {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ableton-bridge-status > div {
  background: #191824;
  border: 1px solid #302e40;
  border-radius: 6px;
  padding: 12px;
}
.ableton-bridge-label {
  color: #9993a5;
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ableton-bridge-status strong {
  color: #ece8f3;
  font-size: 13px;
}
.ableton-bridge-detail {
  color: #a8a3b2;
  font-size: 12px;
  margin: 0;
}
.daw-bridge-detail {
  align-items: center;
  display: flex;
  gap: 8px;
}
.daw-bridge-shortcut-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.daw-bridge-shortcut-grid > div,
.daw-bridge-binding {
  align-items: flex-start;
  background: #191824;
  border: 1px solid #302e40;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.daw-bridge-shortcut-grid span {
  color: #9993a5;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.daw-bridge-page kbd {
  background: #272337;
  border: 1px solid #514667;
  border-radius: 4px;
  color: #d7c8ff;
  font-family: inherit;
  font-size: 11px;
  padding: 3px 6px;
}
.daw-bridge-binding {
  align-items: center;
  flex-direction: row;
}
.daw-bridge-binding > svg {
  color: #aa8aff;
  flex: 0 0 auto;
}
.daw-bridge-binding span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.daw-bridge-binding strong {
  color: #ece8f3;
  font-size: 13px;
}
.daw-bridge-binding small {
  color: #858091;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.protools-pull-track-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  margin: 4px 0;
  padding: 0;
}
.protools-pull-track-list li {
  align-items: center;
  border-top: 1px solid #302e40;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .65fr);
  padding: 10px 0 3px;
}
.protools-pull-track-list li span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.protools-pull-track-list strong {
  color: #ece8f3;
  font-size: 12px;
}
.protools-pull-track-list small {
  color: #9993a5;
  font-size: 10px;
  line-height: 1.45;
}
.protools-pull-track-list select {
  width: 100%;
}
.protools-pull-loading {
  align-items: center;
  display: flex;
  gap: 7px;
}
.protools-pull-notice {
  color: #75d7ac !important;
}
.protools-pull-submit {
  align-items: center;
  align-self: flex-start;
  background: #31254f;
  border: 1px solid #7254bd;
  border-radius: 5px;
  color: #e8ddff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  gap: 7px;
  justify-content: center;
  margin-top: 4px;
  min-height: 34px;
  padding: 0 12px;
}
.protools-pull-submit:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ableton-bridge-dirty {
  background: #2a2410;
  border: 1px solid #6b5a1f;
  border-radius: 5px;
  color: #e7cf7a;
  font-size: 12px;
  margin: 0;
  padding: 8px 12px;
}
.ableton-bridge-error {
  background: #3c2429;
  border: 1px solid #804049;
  border-radius: 4px;
  color: #ffc1c8;
  font-size: 11px;
  margin: 0;
  padding: 9px;
}
.ableton-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ableton-save-location {
  position: relative;
  display: flex;
  align-items: center;
  margin-inline-start: 8px;
}
.ableton-bridge-actions .ableton-save-toggle {
  font-size: 11px;
  font-weight: 500;
  height: 30px;
  padding: 0 8px;
  gap: 5px;
}
.ableton-save-options {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 10;
  min-width: 270px;
  padding: 4px;
  border: 1px solid #454155;
  border-radius: 6px;
  background: #211e2d;
  box-shadow: 0 8px 24px #0005;
}
.ableton-save-options button {
  width: 100%;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 500;
  min-height: 32px;
  height: auto;
  padding: 7px 8px;
  text-align: left;
  line-height: 1.25;
}
.ableton-save-options button svg {
  flex: 0 0 auto;
}
.ableton-save-hint {
  display: block;
  max-width: 270px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #b8b1cc;
}
.ableton-storage-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: #b8b1cc;
  margin: -8px 0 10px;
}
.ableton-storage-status button {
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}
.ableton-storage-detail {
  font-size: 11px;
  color: #b8b1cc;
  margin: -8px 0 10px;
}
.theme-light .ableton-save-options {
  background: #fff;
  border-color: #d3cbed;
}
.theme-light .ableton-save-hint {
  color: #635775;
}
.theme-light .ableton-storage-status,
.theme-light .ableton-storage-detail {
  color: #635775;
}
.ableton-bridge-actions input {
  background: #15141e;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #eeeaf5;
  flex: 1;
  font-size: 12px;
  height: 39px;
  padding: 0 10px;
}
.ableton-bridge-actions button {
  align-items: center;
  background: #292737;
  border: 1px solid #454155;
  border-radius: 5px;
  color: #e3ddf5;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  height: 39px;
  justify-content: center;
  padding: 0 14px;
}
.ableton-bridge-actions button:hover:not(:disabled) {
  background: #353245;
  border-color: #7453dd;
}
.ableton-bridge-actions button[aria-pressed=true] {
  background: #4b328d;
  border-color: #aa8aff;
  color: #fff;
}
.ableton-bridge-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ableton-portability {
  background: #191824;
  border: 1px solid #302e40;
  border-radius: 6px;
  overflow: hidden;
}
.ableton-portability > header {
  align-items: center;
  border-bottom: 1px solid #302e40;
  display: flex;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 14px;
}
.ableton-portability > header div {
  align-items: center;
  color: #ece8f3;
  display: flex;
  font-size: 13px;
  gap: 7px;
}
.ableton-portability > header svg {
  color: #aa8aff;
}
.ableton-portability > header small {
  color: #9993a5;
  font-size: 10px;
}
.ableton-portability-intro,
.ableton-portability-note {
  color: #a8a3b2;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  padding: 11px 14px;
}
.ableton-portability-note {
  border-top: 1px solid #302e40;
}
.ableton-portability > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ableton-portability > ul > li {
  align-items: center;
  border-top: 1px solid #302e40;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.25fr) auto;
  padding: 11px 14px;
}
.ableton-portability-device {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ableton-portability-device strong {
  color: #eeeaf5;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ableton-portability-device span {
  color: #cdbcf8;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ableton-portability-device small {
  color: #8f899b;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ableton-portability-state {
  display: grid;
  gap: 5px;
}
.ableton-portability-state span {
  align-items: center;
  display: inline-flex;
  font-size: 10px;
  gap: 5px;
}
.ableton-portability-state .external,
.ableton-portability-state .missing {
  color: #e7c36e;
}
.ableton-portability-state .native,
.ableton-portability-state .fallback {
  color: #79d9ae;
}
.ableton-portability-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ableton-portability-actions a,
.ableton-portability-actions label {
  align-items: center;
  border: 1px solid #454155;
  border-radius: 5px;
  color: #d8cdf4;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  justify-content: center;
  min-height: 29px;
  padding: 0 9px;
  text-decoration: none;
  white-space: nowrap;
}
.ableton-portability-actions a:hover,
.ableton-portability-actions label:hover {
  background: #353245;
  border-color: #7453dd;
}
.ableton-portability-actions label.disabled {
  cursor: wait;
  opacity: .6;
}
.ableton-portability-actions input {
  display: none;
}
.ableton-portability-empty {
  align-items: center;
  color: #9993a5;
  display: flex;
  font-size: 11px;
  gap: 7px;
  margin: 0;
  padding: 14px;
}
.ableton-bridge-branches {
  background: #191824;
  border: 1px solid #302e40;
  border-radius: 6px;
  padding: 14px;
}
.ableton-bridge-merge {
  background: #191824;
  border: 1px solid #302e40;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.ableton-bridge-merge-header {
  align-items: center;
  color: #ece8f3;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}
.ableton-bridge-merge-header svg {
  color: #aa8aff;
}
.ableton-bridge-merge-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ableton-bridge-merge-row span {
  color: #9993a5;
  font-size: 12px;
}
.ableton-bridge-merge-row select {
  appearance: none;
  background: #15141e;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #eeeaf5;
  flex: 1;
  font-size: 12px;
  height: 35px;
  min-width: 120px;
  padding: 0 10px;
}
.daw-bridge-merge .ableton-bridge-merge-row label {
  display: flex;
  flex: 1;
  min-width: 160px;
  flex-direction: column;
  gap: 5px;
}
.daw-merge-intro {
  color: #a8a3b2;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}
.ableton-merge-advanced {
  border: 1px solid #383448;
  border-radius: 5px;
  background: #171621;
}
.ableton-merge-advanced summary {
  align-items: center;
  color: #ddd5f2;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
}
.ableton-merge-advanced summary::-webkit-details-marker {
  display: none;
}
.ableton-merge-advanced[open] summary svg {
  transform: rotate(180deg);
}
.ableton-merge-advanced summary small {
  color: #a8a0bd;
  font-size: 11px;
  font-weight: 400;
}
.ableton-merge-advanced-content {
  border-top: 1px solid #383448;
  display: grid;
  gap: 10px;
  padding: 12px;
}
.ableton-merge-advanced-content > label {
  color: #e9e2f5;
  font-size: 12px;
  font-weight: 700;
}
.ableton-merge-advanced-content p {
  color: #a8a0bd;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}
.ableton-merge-advanced-content p[role=alert] {
  color: #f4a8a8;
}
.ableton-merge-advanced-content select {
  background: #15141e;
  border: 1px solid #454155;
  border-radius: 5px;
  color: #eeeaf5;
  min-height: 35px;
  min-width: 0;
  padding: 7px 10px;
}
.ableton-merge-track-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
}
.ableton-merge-track-list li {
  align-items: center;
  border: 1px solid #383448;
  border-radius: 5px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
  padding: 8px 10px;
}
.ableton-merge-track-list li span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ableton-merge-track-list li strong {
  color: #eeeaf5;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.ableton-merge-track-list li small {
  color: #a8a0bd;
  font-size: 11px;
}
.ableton-bridge-merge > button {
  align-items: center;
  align-self: flex-start;
  background: #292737;
  border: 1px solid #454155;
  border-radius: 5px;
  color: #e3ddf5;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
}
.ableton-bridge-merge > button:hover:not(:disabled) {
  background: #353245;
  border-color: #7453dd;
}
.ableton-bridge-merge > button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ableton-bridge-orphans {
  background: #2a2410;
  border: 1px solid #6b5a1f;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.ableton-bridge-orphans strong {
  color: #f0e4b0;
  font-size: 13px;
}
.ableton-bridge-orphans p {
  color: #d9c585;
  font-size: 11px;
  line-height: 1.5;
  margin: 4px 0 0;
}
.ableton-bridge-orphans ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.ableton-bridge-orphans li {
  background: #15141e;
  border: 1px solid #6b5a1f;
  border-radius: 4px;
  color: #f0e4b0;
  font-size: 11px;
  padding: 4px 8px;
}
.ableton-bridge-orphans-warning {
  color: #e7a87a !important;
}
.ableton-bridge-orphans-actions {
  display: flex;
  gap: 10px;
}
.ableton-bridge-orphans-actions button {
  align-items: center;
  background: #292737;
  border: 1px solid #454155;
  border-radius: 5px;
  color: #e3ddf5;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
}
.ableton-bridge-orphans-actions button:hover:not(:disabled) {
  background: #353245;
  border-color: #7453dd;
}
.ableton-bridge-orphans-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ableton-bridge-orphans-actions button.ableton-bridge-orphans-delete {
  background: #3c2429;
  border-color: #804049;
  color: #ffc1c8;
}
.ableton-bridge-orphans-actions button.ableton-bridge-orphans-delete:hover:not(:disabled) {
  background: #4a2a30;
  border-color: #a85560;
}
.ableton-bridge-branches-header {
  align-items: center;
  color: #ece8f3;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  margin-bottom: 10px;
}
.ableton-bridge-branches-header svg {
  color: #aa8aff;
}
.ableton-bridge-branch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.ableton-bridge-branch-list li {
  align-items: center;
  background: #15141e;
  border: 1px solid #302e40;
  border-radius: 5px;
  display: flex;
  font-size: 12px;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
}
.ableton-bridge-branch-list li.current {
  border-color: #7453dd;
}
.ableton-bridge-branch-list li span {
  color: #ece8f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ableton-bridge-branch-list li em {
  color: #aa8aff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}
.ableton-bridge-branch-list li.empty {
  color: #9993a5;
  justify-content: center;
}
.ableton-bridge-branch-list button {
  align-items: center;
  background: #292737;
  border: 1px solid #454155;
  border-radius: 4px;
  color: #e3ddf5;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
}
.ableton-bridge-branch-list button:hover:not(:disabled) {
  background: #353245;
  border-color: #7453dd;
}
.ableton-bridge-branch-list button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ableton-bridge-branch-create {
  display: flex;
  gap: 10px;
}
.ableton-bridge-branch-create input {
  background: #15141e;
  border: 1px solid #3b394a;
  border-radius: 5px;
  color: #eeeaf5;
  flex: 1;
  font-size: 12px;
  height: 35px;
  padding: 0 10px;
}
.ableton-bridge-branch-create button {
  align-items: center;
  background: #292737;
  border: 1px solid #454155;
  border-radius: 5px;
  color: #e3ddf5;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  height: 35px;
  padding: 0 12px;
}
.ableton-bridge-branch-create button:hover:not(:disabled) {
  background: #353245;
  border-color: #7453dd;
}
.ableton-bridge-branch-create button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ableton-bridge-shortcuts {
  color: #9993a5;
  font-size: 11px;
  margin: 0;
}
.ableton-bridge-shortcuts kbd {
  background: #242231;
  border: 1px solid #3a3949;
  border-radius: 3px;
  color: #e9e6f1;
  font-size: 10px;
  padding: 1px 5px;
}
.theme-light .ableton-bridge-header {
  border-color: #d3cbed;
}
.theme-light .ableton-bridge-header p {
  color: #6a6478;
}
.theme-light .ableton-bridge-offline {
  background: #f3f1fb;
  border-color: #967ee1;
  color: #4b388d;
}
.theme-light .ableton-bridge-status > div {
  background: #f8f7fc;
  border-color: #d3cbed;
}
.theme-light .ableton-bridge-status strong {
  color: #2c2740;
}
.theme-light .ableton-bridge-detail {
  color: #6a6478;
}
.theme-light .daw-bridge-shortcut-grid > div,
.theme-light .daw-bridge-binding {
  background: #f8f7fc;
  border-color: #d3cbed;
}
.theme-light .daw-bridge-page kbd {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .daw-bridge-binding strong {
  color: #2c2740;
}
.theme-light .protools-pull-track-list li {
  border-color: #d3cbed;
}
.theme-light .protools-pull-track-list strong {
  color: #2c2740;
}
.theme-light .protools-pull-track-list small {
  color: #6a6478;
}
.theme-light .protools-pull-submit {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .ableton-bridge-dirty {
  background: #fbf3d9;
  border-color: #d9bd5a;
  color: #6b5a1f;
}
.theme-light .ableton-bridge-actions input {
  background: #fff;
  border-color: #d3cbed;
  color: #2c2740;
}
.theme-light .ableton-bridge-actions button {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .ableton-bridge-actions button:hover:not(:disabled) {
  background: #e0d6fa;
  border-color: #8967ef;
}
.theme-light .ableton-bridge-actions button[aria-pressed=true] {
  background: #6d4dc4;
  border-color: #6d4dc4;
  color: #fff;
}
.theme-light .ableton-portability {
  background: #f8f7fc;
  border-color: #d3cbed;
}
.theme-light .ableton-portability > header,
.theme-light .ableton-portability > ul > li,
.theme-light .ableton-portability-note {
  border-color: #d3cbed;
}
.theme-light .ableton-portability > header div,
.theme-light .ableton-portability-device strong {
  color: #2c2740;
}
.theme-light .ableton-portability > header small,
.theme-light .ableton-portability-intro,
.theme-light .ableton-portability-note,
.theme-light .ableton-portability-empty,
.theme-light .ableton-portability-device small {
  color: #6a6478;
}
.theme-light .ableton-portability-device span {
  color: #5d469d;
}
.theme-light .ableton-portability-state .external,
.theme-light .ableton-portability-state .missing {
  color: #8a6514;
}
.theme-light .ableton-portability-state .native,
.theme-light .ableton-portability-state .fallback {
  color: #19724f;
}
.theme-light .ableton-portability-actions a,
.theme-light .ableton-portability-actions label {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .ableton-portability-actions a:hover,
.theme-light .ableton-portability-actions label:hover {
  background: #e0d6fa;
  border-color: #8967ef;
}
.theme-light .ableton-bridge-branches {
  background: #f8f7fc;
  border-color: #d3cbed;
}
.theme-light .ableton-bridge-branches-header {
  color: #2c2740;
}
.theme-light .ableton-bridge-branch-list li {
  background: #fff;
  border-color: #d3cbed;
}
.theme-light .ableton-bridge-branch-list li span {
  color: #2c2740;
}
.theme-light .ableton-bridge-branch-list button,
.theme-light .ableton-bridge-branch-create button {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .ableton-bridge-branch-list button:hover:not(:disabled),
.theme-light .ableton-bridge-branch-create button:hover:not(:disabled) {
  background: #e0d6fa;
  border-color: #8967ef;
}
.theme-light .ableton-bridge-branch-create input {
  background: #fff;
  border-color: #d3cbed;
  color: #2c2740;
}
.theme-light .ableton-bridge-merge {
  background: #f8f7fc;
  border-color: #d3cbed;
}
.theme-light .ableton-bridge-merge-header {
  color: #2c2740;
}
.theme-light .ableton-bridge-merge-row span {
  color: #6a6478;
}
.theme-light .ableton-bridge-merge-row select {
  background: #fff;
  border-color: #d3cbed;
  color: #2c2740;
}
.theme-light .ableton-merge-advanced {
  background: #fff;
  border-color: #d3cbed;
}
.theme-light .ableton-merge-advanced summary,
.theme-light .ableton-merge-advanced-content > label,
.theme-light .ableton-merge-track-list li strong {
  color: #2c2740;
}
.theme-light .ableton-merge-advanced summary small,
.theme-light .ableton-merge-advanced-content p,
.theme-light .ableton-merge-track-list li small {
  color: #6a6478;
}
.theme-light .ableton-merge-advanced-content,
.theme-light .ableton-merge-track-list li {
  border-color: #d3cbed;
}
.theme-light .ableton-merge-advanced-content select {
  background: #fff;
  border-color: #d3cbed;
  color: #2c2740;
}
.theme-light .ableton-bridge-merge > button {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .ableton-bridge-merge > button:hover:not(:disabled) {
  background: #e0d6fa;
  border-color: #8967ef;
}
.theme-light .ableton-bridge-orphans {
  background: #fbf3d9;
  border-color: #d9bd5a;
}
.theme-light .ableton-bridge-orphans strong {
  color: #6b5a1f;
}
.theme-light .ableton-bridge-orphans p {
  color: #8a7638;
}
.theme-light .ableton-bridge-orphans-warning {
  color: #a3521f !important;
}
.theme-light .ableton-bridge-orphans li {
  background: #fff;
  border-color: #d9bd5a;
  color: #6b5a1f;
}
.theme-light .ableton-bridge-orphans-actions button {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
.theme-light .ableton-bridge-orphans-actions button:hover:not(:disabled) {
  background: #e0d6fa;
  border-color: #8967ef;
}
.theme-light .ableton-bridge-orphans-actions button.ableton-bridge-orphans-delete {
  background: #fbe4e6;
  border-color: #d98a95;
  color: #8a2430;
}
.theme-light .ableton-bridge-orphans-actions button.ableton-bridge-orphans-delete:hover:not(:disabled) {
  background: #f6d2d6;
  border-color: #c96572;
}
.theme-light .ableton-bridge-shortcuts kbd {
  background: #eee8fb;
  border-color: #b7a3ea;
  color: #4b388d;
}
@media (max-width: 620px) {
  .ableton-bridge-status {
    grid-template-columns: 1fr;
  }
  .daw-bridge-shortcut-grid {
    grid-template-columns: 1fr;
  }
  .protools-pull-track-list li {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .ableton-bridge-actions {
    flex-direction: column;
  }
  .ableton-save-location {
    margin-inline-start: 0;
  }
  .ableton-portability > ul > li {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .ableton-portability-actions {
    align-items: stretch;
  }
  .ableton-bridge-branch-create {
    flex-direction: column;
  }
  .ableton-bridge-orphans-actions {
    flex-direction: column;
  }
  .ableton-bridge-merge-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ableton-merge-track-list li {
    grid-template-columns: minmax(0, 1fr);
  }
  .ableton-bridge-merge > button {
    align-self: stretch;
    justify-content: center;
  }
}
.theme-light .people-card-project-count {
  background: rgba(22, 65, 78, .78);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.theme-light .people-card-project-count strong,
.theme-light .people-card-project-count small {
  color: #fff;
}
.theme-light .people-card-eyebrow,
.theme-light .people-card-body > header svg,
.theme-light .people-card-body > footer {
  color: #6744b6;
}
.theme-light .people-card-work > span:first-child {
  color: #626a7d;
}
.theme-light .people-no-project {
  color: #596273;
}
.theme-light .project-tab.active {
  background: transparent;
  border-color: #704bd1;
  color: #5635a9;
}
.theme-light .project-tab:hover:not(.active) {
  color: #5635a9;
}
.theme-light .project-chat-menu {
  background: #fff;
  border-color: #d8dce8;
  box-shadow: 0 12px 30px rgba(35, 39, 57, .18);
}
.theme-light .project-chat-menu button {
  color: #303747;
}
.theme-light .project-chat-menu button:hover,
.theme-light .project-chat-menu button:focus-visible {
  background: #f0ecfb;
  color: #4f319c;
}
.theme-light .project-chat-menu button svg {
  color: #6744b6;
}
.theme-light .project-chat-menu-back {
  border-color: #e2e4ed !important;
  color: #596273 !important;
}
.theme-light .project-chat-menu-back svg {
  color: #6744b6 !important;
}
.theme-light .project-chat-menu-list small,
.theme-light .project-chat-menu-list p {
  color: #687080;
}
.theme-light .project-chat-icon-button {
  border-color: #cbd1dd;
  color: #655a77;
}
.theme-light .project-chat-icon-button:hover:not(:disabled) {
  border-color: #8662db;
  color: #5635a9;
}
.theme-light .commit-input {
  background: #f7f8fc;
  border-color: #d9dee8;
}
.theme-light .commit-input:focus-within {
  border-color: #8662db;
  box-shadow: 0 0 0 3px rgba(114, 71, 233, .12);
}
.theme-light .commit-input input {
  background: #fff;
  border: 1px solid #d5dae5;
  border-radius: 5px;
  color: #303442;
  padding: 0 9px;
}
.theme-light .commit-input input::placeholder {
  color: #697080;
}
.theme-light .commit-input .save-button {
  background: #704bd1;
  border-color: #704bd1;
  color: #fff;
}
.theme-light .commit-input .save-button:hover:not(:disabled) {
  background: #5b39ba;
  border-color: #5b39ba;
  color: #fff;
}
.theme-light .branch-picker {
  background: #fff;
  border-color: #cbd1dd;
  color: #596273;
}
.theme-light .branch-picker svg {
  color: #6744b6;
}
.theme-light .branch-picker select {
  background-color: #fff;
  color: #303442;
}
.theme-light .branch-picker select:focus {
  color: #303442;
}
.theme-light .branch-picker select option {
  background: #fff;
  color: #303442;
}
.theme-light .branch-create-button {
  background: #fff;
}
.person-profile-actions {
  display: grid;
  gap: 9px;
}
.person-message-button {
  align-items: center;
  background: #7448ec;
  border: 1px solid #906cff;
  border-radius: 7px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  justify-content: center;
  min-height: 35px;
  padding: 7px 11px;
}
.person-message-button:hover {
  background: #8660f3;
}
.direct-chat-nav-count {
  background: #7953db;
  border-radius: 20px;
  color: #fff;
  font-size: 10px;
  margin-left: auto;
  min-width: 19px;
  padding: 2px 5px;
  text-align: center;
}
.project-content-chats {
  max-width: none;
  width: 100%;
}
.direct-chats-page {
  background: #191923;
  border: 1px solid #302e3e;
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  height: max(520px, calc(100dvh - 125px));
  overflow: hidden;
}
.direct-chats-list {
  border-right: 1px solid #302e3e;
  min-height: 0;
  overflow-y: auto;
}
.direct-chats-list > header {
  border-bottom: 1px solid #302e3e;
  padding: 19px 17px;
}
.direct-chats-list h1 {
  font-size: 24px;
  margin: 0;
}
.direct-chats-list > header p {
  color: #9995a7;
  font-size: 11px;
  margin: 5px 0 0;
}
.direct-chat-person {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #2b2938;
  color: inherit;
  display: flex;
  gap: 10px;
  min-height: 68px;
  padding: 10px 13px;
  text-align: left;
  width: 100%;
}
.direct-chat-person:hover,
.direct-chat-person.current {
  background: #272337;
}
.direct-chat-avatar {
  align-items: center;
  background: #463562;
  border-radius: 50%;
  color: #e8dfff;
  display: flex;
  flex: 0 0 37px;
  font-size: 15px;
  font-weight: 700;
  height: 37px;
  justify-content: center;
  overflow: hidden;
}
.direct-chat-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.direct-chat-person-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.direct-chat-person-copy strong,
.direct-chat-person-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-chat-person-copy strong {
  font-size: 12px;
}
.direct-chat-person-copy small {
  color: #9995a7;
  font-size: 10px;
}
.direct-chat-unread {
  background: #865ce9;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  margin-left: auto;
  min-width: 20px;
  padding: 4px;
  text-align: center;
}
.direct-chat-list-empty {
  color: #9995a7;
  font-size: 12px;
  line-height: 1.5;
  padding: 17px;
}
.direct-chat-conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.direct-chat-conversation > header {
  align-items: center;
  border-bottom: 1px solid #302e3e;
  display: flex;
  gap: 10px;
  min-height: 61px;
  padding: 0 17px;
}
.direct-chat-conversation > header > strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-chat-back {
  background: transparent;
  border: 0;
  color: #b7a2ef;
  display: none;
  padding: 4px;
}
.direct-chat-delete {
  align-items: center;
  background: transparent;
  border: 1px solid #5e4957;
  border-radius: 6px;
  color: #e5a7b2;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  gap: 5px;
  padding: 6px 8px;
}
.direct-chat-delete:hover:not(:disabled) {
  background: #38252e;
}
.direct-chat-delete:disabled {
  opacity: .5;
}
.direct-chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}
.direct-chat-messages > p,
.direct-chat-placeholder {
  color: #9995a7;
  font-size: 12px;
}
.direct-chat-start {
  margin: auto;
  text-align: center;
}
.direct-chat-placeholder {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.direct-chat-placeholder svg {
  color: #a98cef;
}
.direct-chat-placeholder strong {
  color: #e9e4f3;
  font-size: 16px;
}
.direct-chat-earlier {
  align-self: center;
  background: transparent;
  border: 1px solid #4b426d;
  border-radius: 6px;
  color: #c3adff;
  font-size: 11px;
  padding: 6px 10px;
}
.direct-chat-bubble {
  align-self: flex-start;
  background: #2d293b;
  border: 1px solid #4a405d;
  border-radius: 15px 15px 15px 4px;
  max-width: min(75%, 500px);
  padding: 9px 12px;
}
.direct-chat-bubble.mine {
  align-self: flex-end;
  background: #49337d;
  border-color: #7953c6;
  border-radius: 15px 15px 4px 15px;
}
.direct-chat-bubble p {
  color: #f1edf8;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.direct-chat-bubble time {
  color: #c0b3d7;
  display: block;
  font-size: 9px;
  margin-top: 4px;
  text-align: right;
}
.direct-chat-error {
  color: #f3a6a6;
  font-size: 11px;
  margin: 0;
  padding: 5px 17px;
}
.direct-chat-request-notice {
  background: #28223a;
  border-top: 1px solid #4c3e70;
  color: #d9c9f5;
  font-size: 11px;
  line-height: 1.45;
  margin: 0;
  padding: 10px 17px;
}
.direct-chat-composer {
  align-items: end;
  border-top: 1px solid #302e3e;
  display: flex;
  gap: 9px;
  padding: 12px 16px;
}
.direct-chat-composer textarea {
  background: #11111b;
  border: 1px solid #40394e;
  border-radius: 7px;
  color: #f1edf8;
  flex: 1;
  font-size: 12px;
  max-height: 160px;
  min-width: 0;
  padding: 9px;
  resize: vertical;
}
.direct-chat-composer textarea:disabled {
  cursor: not-allowed;
  opacity: .62;
}
.direct-chat-composer button {
  align-items: center;
  background: #7448ec;
  border: 0;
  border-radius: 7px;
  color: #fff;
  display: flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.direct-chat-composer button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.direct-chat-toast {
  align-items: center;
  background: #28233a;
  border: 1px solid #7457b2;
  border-radius: 10px;
  bottom: 25px;
  box-shadow: 0 12px 35px #0008;
  display: flex;
  max-width: min(350px, calc(100vw - 24px));
  position: fixed;
  right: 22px;
  z-index: 30;
}
.direct-chat-toast button {
  background: transparent;
  border: 0;
  color: #eee8f8;
  cursor: pointer;
}
.direct-chat-toast > button:first-child {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 11px 13px;
  text-align: left;
}
.direct-chat-toast span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.direct-chat-toast strong,
.direct-chat-toast small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-chat-toast strong {
  font-size: 12px;
}
.direct-chat-toast small {
  color: #b6a9cb;
  font-size: 11px;
}
.direct-chat-toast-close {
  padding: 8px;
}
.theme-light .direct-chats-page,
.theme-light .direct-chat-toast {
  background: #fff;
  border-color: #d9dee8;
}
.theme-light .direct-chats-list,
.theme-light .direct-chats-list > header,
.theme-light .direct-chat-person,
.theme-light .direct-chat-conversation > header,
.theme-light .direct-chat-composer {
  border-color: #dfe3ec;
}
.theme-light .direct-chat-person:hover,
.theme-light .direct-chat-person.current {
  background: #f1eefb;
}
.theme-light .direct-chat-bubble {
  background: #f0edf8;
  border-color: #d5cbea;
}
.theme-light .direct-chat-bubble.mine {
  background: #e6dcfb;
  border-color: #b8a0ed;
}
.theme-light .direct-chat-bubble p {
  color: #312c3d;
}
.theme-light .direct-chat-bubble time,
.theme-light .direct-chat-toast small {
  color: #6d637f;
}
.theme-light .direct-chat-composer textarea {
  background: #fff;
  border-color: #cfd6e2;
  color: #303442;
}
.theme-light .direct-chat-delete {
  border-color: #e4cbd1;
  color: #9a3548;
}
.theme-light .direct-chat-delete:hover:not(:disabled) {
  background: #fff0f2;
}
.theme-light .direct-chat-request-notice {
  background: #f2edfc;
  border-color: #ddd0f2;
  color: #503d7c;
}
.theme-light .direct-chat-toast button {
  color: #303442;
}
@media (max-width: 620px) {
  .mobile-navigation {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .mobile-navigation.without-ableton {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .person-profile-actions {
    grid-column: 1 / -1;
  }
  .person-profile-stat {
    grid-column: auto;
  }
  .direct-chats-page {
    grid-template-columns: 1fr;
    height: calc(100dvh - 170px);
    min-height: 350px;
  }
  .direct-chats-page:not(.thread-open) .direct-chat-conversation {
    display: none;
  }
  .direct-chats-page.thread-open .direct-chats-list {
    display: none;
  }
  .direct-chat-back {
    display: inline-flex;
  }
  .direct-chat-toast {
    bottom: 82px;
    right: 12px;
  }
}
.synced-clip.focused-song-part {
  outline: 3px solid #f6de83;
  outline-offset: 2px;
  z-index: 2;
}
.project-chat-pin-song-action {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
.project-chat-pin-song-action:hover {
  border-color: #c2a0ff;
}
.issue-song-pin-action {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.issue-song-pin-action:hover {
  border-color: #c2a0ff;
}
.daw-project-list {
  max-height: clamp(96px, calc(100dvh - 430px), 296px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 2px 2px;
  scrollbar-color: #7056ad #252332;
  scrollbar-width: thin;
}
.daw-project-list:focus-visible,
.daw-project-list label:focus-within {
  outline: 2px solid #aa8aff;
  outline-offset: 1px;
}
.reference-main .project-content {
  margin-inline: 0;
  max-width: none;
  width: 100%;
}
.reference-main :is(.home-page, .issues-page, .projects-page, .explore-page, .people-page, .marketplace-page, .account-profile-page, .settings-page, .ableton-bridge-page) {
  max-width: none;
  min-width: 0;
  width: 100%;
}
.deleted-project-card {
  background: #22222a;
  border: 1px solid #464650;
  border-radius: 12px;
  color: #c2c0c9;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  overflow: hidden;
}
.deleted-project-card-mark {
  align-items: center;
  background: #2c2c35;
  color: #93919d;
  display: flex;
  height: 110px;
  justify-content: center;
}
.deleted-project-card-body {
  flex: 1;
  padding: 18px;
}
.deleted-project-card-body span {
  color: #aaa7b1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
}
.deleted-project-card-body h3 {
  color: #e1dfe5;
  font-size: 17px;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.deleted-project-card-body p {
  color: #aaa7b1;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.deleted-project-card footer {
  border-top: 1px solid #464650;
  padding: 12px 18px;
}
.deleted-project-card footer button {
  align-items: center;
  background: #33333d;
  border: 1px solid #55545f;
  border-radius: 6px;
  color: #e3e1e6;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  gap: 7px;
  padding: 8px 11px;
}
.deleted-project-card footer button:hover {
  background: #41414d;
}
.deleted-project-grid {
  margin-top: 14px;
}
.delete-project-settings {
  border-color: #7b484b;
  margin-top: 15px;
}
.delete-project-settings-body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px;
}
.delete-project-settings-body p {
  color: #aaa7b1;
  font-size: 11px;
  margin: 0;
}
.delete-project-settings-body button {
  align-items: center;
  background: #71353a;
  border: 1px solid #ad5e65;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  gap: 7px;
  padding: 8px 11px;
}
.delete-project-settings-body button:hover {
  background: #8d4047;
}
.delete-project-settings-body button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.theme-light .deleted-project-card {
  background: #ebecf0;
  border-color: #c8cbd2;
}
.theme-light .deleted-project-card-mark {
  background: #dfe1e7;
  color: #757b88;
}
.theme-light .deleted-project-card-body h3 {
  color: #353b47;
}
.theme-light .deleted-project-card-body p,
.theme-light .deleted-project-card-body span {
  color: #666d78;
}
.theme-light .deleted-project-card footer {
  border-color: #c8cbd2;
}
.theme-light .deleted-project-card footer button {
  background: #f5f6f8;
  border-color: #b8bcc6;
  color: #39404d;
}
.synced-measure-ruler {
  box-sizing: border-box;
  height: 32px;
  padding: 0 70px 0 276px;
}
.synced-measure-scale {
  flex: 1;
  min-width: 0;
  position: relative;
}
.synced-measure-scale span {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.synced-measure-scale span:first-child {
  transform: none;
}
.synced-track-effects.empty {
  background: #171722;
}
.synced-track.midi-track .synced-track-label svg {
  color: var(--track-color);
}
.theme-light .synced-track-effects.empty {
  background: #ffffff;
}
.theme-light .arrangement-scroll {
  color-scheme: light;
  scrollbar-color: #9b83db #f8f9fc;
}
.theme-light .arrangement-scroll::-webkit-scrollbar-track {
  background: #f8f9fc;
}
.theme-light .arrangement-scroll::-webkit-scrollbar-thumb {
  background: #9b83db;
  border-color: #f8f9fc;
}
.theme-light .arrangement-scroll::-webkit-scrollbar-button,
.theme-light .arrangement-scroll::-webkit-scrollbar-corner {
  background: #f8f9fc;
}
.theme-light .issues-empty strong {
  color: #303442;
}
.theme-light .issues-empty button {
  background: #f3f1fb;
  border-color: #cfc5ed;
  color: #4b388d;
}
.theme-light .issues-empty button:hover {
  background: #e9e5f9;
  border-color: #967ee1;
}
.theme-light .issue-take-button {
  background: #f3f1fb;
  border-color: #cfc5ed;
  color: #4b388d;
}
.theme-light .issue-take-button:hover:not(:disabled) {
  background: #e9e5f9;
  border-color: #967ee1;
  color: #382775;
}
.theme-light .issue-take-button:disabled {
  background: #f1f3f7;
  border-color: #d8dde6;
  color: #9299a8;
  cursor: not-allowed;
}
.theme-light .issue-finish-button {
  background: #e9f8f0;
  border-color: #a9ddbf;
  color: #236642;
}
.theme-light .issue-finish-button:hover {
  background: #ddf3e7;
  border-color: #75bf96;
  color: #174c30;
}
.theme-light .issue-filters button {
  color: #697080;
}
.theme-light .issue-filters button span {
  color: #858c9c;
}
.theme-light .issue-filters button:hover {
  color: #4b388d;
}
.theme-light .issue-filters button.active {
  border-color: #7652df;
  color: #3f2b80;
}
.theme-light .issue-filters button.active span {
  color: #6045b0;
}
.theme-light .issue-filters button:focus-visible {
  border-radius: 3px 3px 0 0;
  outline: 2px solid #a58ce8;
  outline-offset: 2px;
}
.theme-light .reference-main .issue-row footer .issue-status-open {
  background: #f1eefb;
  border-color: #ddd3f6;
  color: #5d469d;
}
.theme-light .reference-main .issue-row footer .issue-status-closed {
  background: #e9f8f0;
  border-color: #a9ddbf;
  color: #236642;
}
@media (max-width: 620px) {
  .synced-measure-ruler {
    padding-left: 188px;
    padding-right: 0;
  }
}
.synced-asset-timeline,
.theme-light .synced-asset-timeline {
  background-image: none;
}
.synced-track {
  border-bottom: 1px solid #2a2939;
}
.synced-track > .synced-track-label,
.synced-track > .synced-track-effects,
.synced-track > .synced-track-lane,
.synced-track > .track-mix {
  border-bottom: 0;
}
.theme-light .synced-track {
  border-color: #dfe3ec;
}
.synced-track-lane {
  background-image:
    linear-gradient(
      90deg,
      #242330 1px,
      transparent 1px);
  background-size: var(--timeline-grid-size, 8.333333%) 100%;
}
.synced-clip {
  min-width: 1px;
}
.theme-light .synced-track-lane {
  background-image:
    linear-gradient(
      90deg,
      #dfe3ec 1px,
      transparent 1px);
}
.collaborator-role-field > small {
  color: #8d8999;
  font-size: 10px;
  font-weight: 400;
}
.collaborator-role-picker {
  position: relative;
}
.collaborator-role-options {
  background: #201f2c;
  border: 1px solid #514a68;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
  left: 0;
  max-height: 220px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  scrollbar-color: #6f5a9d #201f2c;
  top: calc(100% + 4px);
  z-index: 20;
}
.collaborator-role-options button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #302e3d;
  color: #e6e3ec;
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 11px;
  min-height: 34px;
  padding: 7px 10px;
  text-align: left;
  width: 100%;
}
.collaborator-role-options button:last-of-type {
  border-bottom: 0;
}
.collaborator-role-options button:hover,
.collaborator-role-options button:focus-visible {
  background: #302a43;
  outline: 0;
}
.collaborator-role-options button.selected {
  background: #433669;
  color: #ffffff;
}
.collaborator-role-options p {
  color: #8d8999;
  font-size: 10px;
  margin: 0;
  padding: 10px;
}
.collaborator-results button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.theme-light .collaborator-role-field > small {
  color: #687080;
}
.theme-light .collaborator-role-options {
  background: #ffffff;
  border-color: #cfd6e2;
  box-shadow: 0 12px 28px rgba(46, 42, 66, .16);
  scrollbar-color: #9b83db #ffffff;
}
.theme-light .collaborator-role-options button {
  border-color: #e2e5ec;
  color: #303442;
}
.theme-light .collaborator-role-options button:hover,
.theme-light .collaborator-role-options button:focus-visible {
  background: #f0edfa;
  color: #3f2b80;
}
.theme-light .collaborator-role-options button.selected {
  background: #e5def8;
  color: #3f2b80;
}
.theme-light .collaborator-role-options p {
  color: #687080;
}
.preview-play {
  background:
    linear-gradient(
      145deg,
      #8d68f6,
      #6840dc);
  border: 1px solid #a98cff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 9px rgba(80, 45, 180, .34);
  color: #fff;
  height: 29px;
  padding: 0;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
  width: 29px;
}
.preview-play svg {
  filter: drop-shadow(0 1px 1px rgba(35, 16, 82, .3));
  transform: translateX(1px);
}
.preview-play.playing {
  background:
    linear-gradient(
      145deg,
      #a384ff,
      #7650e8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 3px rgba(139, 99, 244, .16);
}
.preview-play.playing svg {
  transform: none;
}
.preview-play:hover:not(:disabled) {
  background:
    linear-gradient(
      145deg,
      #9d7afb,
      #7650e8);
  border-color: #c1adff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 5px 13px rgba(80, 45, 180, .42);
  transform: translateY(-1px);
}
.preview-play:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(45, 23, 100, .3);
  transform: scale(.94);
}
.preview-play:focus-visible {
  outline: 2px solid #c9b8ff;
  outline-offset: 2px;
}
.preview-play:disabled {
  background: #292837;
  border-color: #464354;
  box-shadow: none;
  color: #777383;
}
.theme-light .preview-play {
  background:
    linear-gradient(
      145deg,
      #8761ed,
      #6942d7);
  border-color: #7650df;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 9px rgba(91, 57, 184, .24);
}
.theme-light .preview-play:hover:not(:disabled) {
  border-color: #5f39c7;
}
.theme-light .preview-play:focus-visible {
  outline-color: #7650df;
}
.theme-light .preview-play:disabled {
  background: #eceef4;
  border-color: #cfd4df;
  box-shadow: none;
  color: #969dac;
}
.everhit-mark .mark {
  stroke-width: 2;
}
/*# sourceMappingURL=main.css.map */