.workspace-viewbar {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 32px;
  padding: 3px 15px;
  background: #181719;
  border-bottom: 1px solid #383438;
}
.workspace-viewbar strong {
  font-size: 11px;
  color: #e4dfe1;
  margin-right: auto;
  font-weight: 600;
}
.workspace-viewbar strong::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #e6be55;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.workspace-viewbar button {
  font-size: 11px;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 5px;
}
.workspace-viewbar [data-view-auto] {
  border-color: transparent;
  background: transparent;
  color: #c6bec1;
}
.desktop-jumps,
.studio-sheet-close {
  display: none;
}
.editor .monitor > .paneltitle {
  gap: 9px;
  justify-content: flex-start;
}
.monitor .paneltitle #canvas-size {
  margin-left: auto;
}
.monitor [data-full-preview] {
  padding: 3px 7px;
  min-height: 25px;
  gap: 4px;
  font-size: 10px;
  font-weight: 550;
}
.editor[data-studio-view='desktop'] .mobile-tabs {
  display: none;
}
.editor[data-studio-view='desktop'] .workarea {
  display: grid;
}
.editor[data-studio-view='desktop'] .workarea > #left,
.editor[data-studio-view='desktop'] .workarea > #right {
  display: block;
}
.editor[data-studio-view='desktop'] .workarea > .monitor {
  display: flex;
}
.editor[data-studio-view='mobile'] {
  height: 100dvh;
  min-height: 0;
}
.editor[data-studio-view='mobile'] .workarea {
  display: block;
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}
.editor[data-studio-view='mobile'] .workarea > .monitor {
  display: flex;
  height: 100%;
}
.editor[data-studio-view='mobile'] .workarea > :is(#left, #right) {
  display: none;
  position: absolute;
  top: 46%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: auto;
  max-width: 720px;
  margin-inline: auto;
  background: #1c1b1e;
  border: 1px solid #484047;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  padding: 42px 14px 14px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-shadow: 0 -8px 26px #0007;
}
.editor[data-studio-view='mobile'] .workarea[data-mobile='media'] > #left,
.editor[data-studio-view='mobile'] .workarea[data-mobile='inspect'] > #right {
  display: block;
}
.editor[data-studio-view='mobile']
  .workarea:is([data-mobile='media'], [data-mobile='inspect'])
  > .monitor {
  height: 46%;
  visibility: visible;
}
.editor[data-studio-view='mobile'] .workarea:not([data-mobile='preview']) {
  background: #0e0e10;
}
.editor[data-studio-view='mobile'] .workarea:not([data-mobile='preview']) > .studio-sheet-close {
  position: absolute;
  z-index: 3;
  display: block;
  top: 46%;
  right: max(9px, calc((100% - 720px) / 2 + 7px));
  height: 40px;
  min-height: 40px;
  padding: 0 7px;
  font-size: 11px;
  border: 0;
  background: #1c1b1e;
  color: #e3c274;
}
.editor[data-studio-view='mobile'] .mobile-tabs {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 4px;
  padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  background: #141315;
  border-top: 1px solid #484046;
  order: 10;
}
.editor[data-studio-view='mobile'] .mobile-tabs button {
  padding: 5px 8px;
  flex: 0 0 auto;
  min-width: 61px;
  min-height: 45px;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  border: 1px solid transparent;
  color: #c7c2c5;
  border-radius: 7px;
}
.editor[data-studio-view='mobile'] .mobile-tabs button span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
}
.editor[data-studio-view='mobile'] .mobile-tabs [aria-pressed='true'] {
  background: #322125;
  border-color: #88414b;
  color: #fff1ec;
}
.editor[data-studio-view='mobile'] .mobile-tabs button:hover {
  background: #2d292d;
}
.editor[data-studio-view='mobile'] .toolgrid {
  grid-template-columns: repeat(auto-fit, minmax(106px, 1fr));
}
.editor[data-studio-view='mobile'] .workarea .toolgrid button,
.editor[data-studio-view='mobile'] .workarea button.import {
  min-height: 42px;
}
.editor[data-studio-view='mobile'] .workarea #right [data-act='key'] {
  min-height: 42px;
}
.editor[data-studio-view='mobile'] .workarea .asset {
  min-height: 43px;
}
.editor[data-studio-view='mobile'] #timeline {
  flex: none;
}
.editor[data-studio-view='mobile'] #left,
.editor[data-studio-view='mobile'] #right {
  scroll-padding-block: 5px;
}
.editor[data-studio-view='mobile'] .stagebox {
  padding: 6px;
}
.editor[data-studio-view='mobile'] .transport {
  min-height: 40px;
}
.editor[data-studio-view='mobile'] .monitor .paneltitle {
  min-height: 30px;
  padding-block: 3px;
}
.editor[data-studio-view='mobile'] .monitor [data-full-preview] {
  min-height: 40px;
  padding: 4px 8px;
}
.editor[data-studio-view='mobile'] .mobile-tabs [data-studio-tool='record'][aria-pressed='true'] {
  background: #8c2028;
  border-color: #ee5960;
  color: #fff;
}
.editor[data-studio-view='mobile'] .trackbody {
  height: clamp(98px, 20dvh, 200px);
}
.editor[data-studio-view='mobile'] #timeline[style*='--track-height'] .trackbody {
  height: var(--track-height);
}
body:has(.editor[data-studio-view='mobile']) dialog.looks-dialog[open] {
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  max-width: 100vw;
}
@media (min-width: 941px) {
  .editor[data-studio-view='mobile'] .mobile-tabs {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .workspace-viewbar {
    gap: 4px;
    min-height: 34px;
    padding-inline: 8px;
  }
  .workspace-viewbar button {
    min-height: 36px;
    padding-inline: 6px;
  }
  .editor[data-studio-view='desktop'] .workarea {
    grid-template-columns: 155px minmax(270px, 1fr) 218px;
    overflow: auto;
    scroll-behavior: auto;
  }
  .editor[data-studio-view='desktop'] .desktop-jumps {
    display: flex;
    gap: 4px;
    padding: 3px 6px;
    border-bottom: 1px solid #363438;
    background: #181719;
  }
  .desktop-jumps button {
    flex: 1;
    font-size: 11px;
    min-height: 29px;
    padding: 3px;
  }
}
@media (min-width: 761px) and (max-width: 940px) and (orientation: portrait) {
  .editor[data-studio-view='desktop'] .workarea {
    grid-template-columns: 165px minmax(0, 1fr) 225px;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  .editor[data-studio-view='mobile']:not([data-stage-expanded]) {
    display: grid;
    grid-template-columns: 52% minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .editor[data-studio-view='mobile'] > .editorbar {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .editor[data-studio-view='mobile'] > .workspace-viewbar {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .editor[data-studio-view='mobile'] > .workarea {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
  }
  .editor[data-studio-view='mobile'] > #timeline {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    border-left: 1px solid #44383e;
    display: flex;
    flex-direction: column;
  }
  .editor[data-studio-view='mobile'] > .mobile-tabs {
    grid-column: 1/-1;
    grid-row: 4;
  }
  .editor[data-studio-view='mobile'] #timeline-size {
    display: none;
  }
  .editor[data-studio-view='mobile'] #timeline .timelinebar {
    display: block;
    overflow-x: auto;
    flex: none;
    padding: 5px;
  }
  .editor[data-studio-view='mobile'] #timeline .timelinebar > div {
    width: max-content;
    margin-top: 4px;
  }
  .editor[data-studio-view='mobile'] #timeline .trackbody {
    height: auto !important;
    flex: 1;
    min-height: 0;
  }
  .editor[data-studio-view='mobile'] .director-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    max-height: 44px;
  }
  .editor[data-studio-view='mobile'] .director-strip button {
    flex: none;
    white-space: nowrap;
  }
  .workspace-viewbar {
    min-height: 24px;
    padding-block: 0;
  }
  .workspace-viewbar button {
    min-height: 36px;
    padding-block: 2px;
  }
  .editor[data-studio-view='mobile'] .mobile-tabs {
    padding-block: 2px;
  }
  .editor[data-studio-view='mobile'] .mobile-tabs button {
    min-height: 40px;
    flex-direction: row;
    gap: 4px;
  }
  .editor[data-studio-view='mobile'] .trackbody {
    height: clamp(58px, 16dvh, 85px);
  }
  .editor[data-studio-view='mobile'] .workarea > :is(#left, #right) {
    top: 0;
    left: 46%;
    max-width: none;
    border-radius: 10px 0 0;
  }
  .editor[data-studio-view='mobile'] .workarea:not([data-mobile='preview']) > .studio-sheet-close {
    top: 0;
    height: 40px;
  }
  .editor[data-studio-view='mobile']
    .workarea:is([data-mobile='media'], [data-mobile='inspect'])
    > .monitor {
    width: 46%;
    height: 100%;
  }
}
.editor[data-stage-expanded] > :not(.workarea) {
  display: none;
}
.editor[data-stage-expanded] .workarea {
  display: flex;
  position: fixed;
  inset: 0;
  background: #070707;
  z-index: 30;
  height: 100dvh;
  width: 100vw;
  margin: 0;
  padding: 0;
}
.editor[data-stage-expanded] .workarea > :not(.monitor) {
  display: none;
}
.editor[data-stage-expanded] .workarea > .monitor {
  display: flex;
  visibility: visible;
  width: 100%;
  height: 100%;
  flex: 1;
}
.editor[data-stage-expanded] .monitor .stagebox {
  min-height: 0;
  flex: 1;
  padding: 4px;
}
.editor[data-stage-expanded] [data-full-preview] {
  border-color: #d0aa50;
  color: #eece7b;
}
/* The effects dialog lives in the top layer, outside the editor element. */
body:has(.editor[data-studio-view='mobile']) .looks-dialog .look-mobile {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid #3a3739;
}
body:has(.editor[data-studio-view='mobile']) .looks-dialog .look-mobile button {
  flex: 1;
  min-height: 35px;
}
body:has(.editor[data-studio-view='mobile']) .looks-dialog .looks-main {
  display: flex;
  flex-direction: column;
}
body:has(.editor[data-studio-view='mobile']) .looks-dialog .looks-catalog,
body:has(.editor[data-studio-view='mobile']) .looks-dialog .look-inspect {
  flex: 1;
  min-height: 0;
}
body:has(.editor[data-studio-view='mobile']) .looks-dialog[data-pane='library'] .look-inspect,
body:has(.editor[data-studio-view='mobile']) .looks-dialog[data-pane='stack'] .looks-catalog {
  display: none;
}
body:has(.editor[data-studio-view='mobile']) .looks-dialog .look-monitor {
  width: 100%;
}
.editor[data-stage-expanded] .workarea > :is(#right, #left) {
  display: none;
}
body:has(.editor[data-studio-view='mobile']) #status {
  max-width: min(calc(100vw - 20px), 380px);
  width: max-content;
  bottom: auto;
  top: 90px;
  pointer-events: none;
  font-size: 12px;
  padding: 7px 12px;
  border: 1px solid #5c555b;
  color: #eee8e8;
  background: #242225f5;
}
body:has(.editor[data-stage-expanded]) #status {
  visibility: hidden;
}
.workspace-viewbar [data-view-switch] {
  white-space: nowrap;
}
@media (max-height: 540px) and (orientation: landscape) {
  body:has(.editor[data-studio-view='mobile']) #status {
    bottom: auto;
    top: 80px;
  }
}