/* Studio chrome and template discovery. The composition itself has no UI overlays. */
:root {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  --bg: #0a0a0a;
  --panel: #161616;
  --line: #303032;
  --muted: #9a9a9a;
}
.main {
  background: #131314;
}
.sidebar {
  background: #101011;
}
.content {
  max-width: 1530px;
}
.homebar {
  height: 56px;
  background: #121213;
}
.hero {
  min-height: 248px;
  background: #151315;
  border-color: #393032;
  position: relative;
}
.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('./art/editorial/camera.webp');
  background-size: 54% auto;
  background-position: right 46%;
  background-repeat: no-repeat;
}
.hero:before {
  background: linear-gradient(
    90deg,
    #141315 0%,
    #151315 35%,
    #151315ee 46%,
    #15131545 64%,
    transparent 83%
  );
  z-index: -1;
}
.hero h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(40px, 4.15vw, 70px);
  line-height: 0.98;
  font-weight: 650;
  letter-spacing: -0.065em;
}
.hero small {
  color: #b7ada6;
}
.hero > div {
  padding: 26px 4%;
}
.home .heading h1 {
  font-weight: 580;
  letter-spacing: -0.06em;
}
.nav.current {
  background: #242021;
  border-color: #3e3031;
}
.nav.current svg {
  color: #ee625e;
}
.mode {
  border-color: #353437;
  background: #1c1c1e;
  padding-block: 16px;
}
.mode.m2 i {
  color: #d2d1cf;
  background: #323233;
}
.modegrid,
.cards {
  gap: clamp(12px, 1.3vw, 22px);
}
.sectiontitle h2 {
  font-weight: 580;
}
.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 23px;
}
.gallery-head .heading,
.gallery-head .search {
  margin: 0;
}
.search {
  background: #1c1c1e;
  border: 1px solid #38383a;
  border-radius: 7px;
  padding: 0 10px;
  min-height: 38px;
}
.search input {
  color: #eee;
  background: transparent;
  border: 0;
  outline: none !important;
}
.search:focus-within {
  border-color: #b4a774;
}
.search svg {
  color: #a7a7aa;
}
.genre {
  display: flex;
  gap: 6px;
  overflow: auto;
  border-bottom: 1px solid #323234;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.genre button {
  border: 1px solid transparent;
  border-radius: 6px;
  color: #bbb;
  background: transparent;
  white-space: nowrap;
  font-size: 12px;
  padding: 7px 12px;
}
.genre button:hover {
  background: #242426;
}
.genre button.active {
  color: #f5f4f0;
  background: #373639;
  border-color: #4d4a4b;
}
.gallery-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 22px;
}
.gallery-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-select span {
  font-size: 10px;
  color: #aaa;
}
.gallery-select select {
  font-size: 11px;
  background: #212123;
  max-width: 180px;
}
.gallery-filters > small {
  margin-left: auto;
  align-self: flex-end;
  font-size: 11px;
  padding-bottom: 5px;
}
.template {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  border: 0;
  text-align: left;
}
.template:hover {
  background: transparent;
}
.cover {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  padding: 0;
  background: color-mix(in srgb, var(--paper) 27%, #262627);
  border: 1px solid #ffffff16;
  border-radius: 9px;
  aspect-ratio: 1.67;
  transition:
    box-shadow 0.22s,
    border-color 0.22s;
}
.cover:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg, #ffffff0c, transparent 47%, #0002);
}
.cover img,
.cover video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: absolute;
  inset: 0;
}
.cover img {
  filter: drop-shadow(0 4px 10px #0004);
}
.cover video {
  z-index: 1;
}
.cover:hover {
  background: color-mix(in srgb, var(--paper) 27%, #262627);
  border-color: #8a8277;
  box-shadow: 0 5px 20px #0003;
}
.cover-type,
.cover-expand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  z-index: 2;
  color: white;
  background: #131315c9;
  backdrop-filter: blur(7px);
  border: 1px solid #ffffff26;
}
.cover-type {
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.025em;
}
.cover-expand {
  bottom: 8px;
  right: 8px;
  padding: 5px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
.cover:hover .cover-expand,
.cover:focus-visible .cover-expand {
  opacity: 1;
}
.template-meta {
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 1px 5px;
}
.template-meta small {
  font-size: 10px;
  color: #a4a2a3;
  margin: 0;
}
.template-meta small em {
  font-style: normal;
  color: #6c696b;
  margin: 0 3px;
}
.template-meta h3 {
  margin: 1px 0 0;
  font-size: 17px;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.use-template {
  background: #1d1d20;
  border: 1px solid #383739;
  border-radius: 5px;
  gap: 5px;
  font-size: 10px;
  white-space: nowrap;
  padding: 6px 8px;
}
.gallery-cards {
  row-gap: 20px;
}
.gallery-cards .cover {
  aspect-ratio: 1.36;
}
.gallery-empty {
  grid-column: 1/-1;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 9px;
}
.gallery-empty button {
  margin-top: 12px;
}
.preview-dialog {
  width: min(840px, 94vw);
  padding: 0;
  overflow: hidden;
  background: #19191a;
}
.preview-dialog .close {
  z-index: 3;
  border: 1px solid #ffffff36;
  border-radius: 50%;
  background: #202022cf;
  color: white;
  width: 31px;
  height: 31px;
  padding: 0;
}
.lightbox-art {
  display: grid;
  place-items: center;
  height: min(58dvh, 470px);
  background: color-mix(in srgb, var(--paper) 22%, #181818);
}
.lightbox-art img,
.lightbox-art video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lightbox-info {
  position: relative;
  padding: 21px 24px;
}
.lightbox-info h2 {
  margin: 4px 0;
  font-size: 28px;
}
.lightbox-info p {
  margin: 0;
}
.lightbox-info .primary {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.gallery-lightbox .eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  color: #b8a895;
}
.editorbar {
  background: #131314;
  padding-inline: 16px;
}
.editorbar > b {
  font-size: 10px;
  letter-spacing: 0.15em;
}
.editorbar > small:before {
  content: '';
  display: inline-block;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #a7ad96;
  margin-right: 5px;
}
.editorbar .bar-actions .primary {
  padding-inline: 16px;
}
.workarea {
  grid-template-columns: clamp(180px, 17vw, 258px) minmax(0, 1fr) clamp(228px, 20vw, 306px);
}
.paneltitle {
  font-weight: 650;
}
.monitor {
  background: #0b0b0c;
}
.monitor > .paneltitle {
  border-bottom: 1px solid #232324;
  background: #161617;
}
.stagebox {
  padding: 18px;
}
.transport {
  border-top: 1px solid #252526;
  gap: 12px;
  min-height: 46px;
}
.transport [data-act='play'] {
  border: 0;
  color: #151516;
  background: #efeee9;
  border-radius: 50%;
  width: 29px;
  height: 29px;
  padding: 0;
}
.transport [data-act='rewind'] {
  background: transparent;
  border: 0;
}
.transport [data-act='rewind'] span {
  display: none;
}
.transport code {
  font-size: 11px;
  letter-spacing: 0.03em;
}
.asset {
  gap: 8px;
  padding: 6px;
  background: #1f1f21;
}
.asset i:has(img) {
  width: 43px;
  height: 32px;
  border: 1px solid #ffffff12;
  background: #111;
  overflow: hidden;
}
.asset i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asset b {
  font-size: 11px;
}
.asset small {
  font-size: 10px;
}
.quick-layers {
  display: grid;
  gap: 4px;
}
.quick-layers button {
  justify-content: flex-start;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 7px;
  text-align: left;
  font-size: 11px;
  gap: 8px;
}
.quick-layers button:hover,
.quick-layers button.active {
  background: #302326;
  border-color: #503134;
}
.quick-layers button > svg {
  color: #bc8d84;
}
.quick-layers button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-layers small {
  margin-left: auto;
  font-size: 9px;
  color: #a59c9d;
}
.import {
  border: 1px solid #854343;
  background: #3f2324;
}
.fields label {
  min-height: 26px;
  font-size: 11px;
}
.fields .check {
  min-height: 19px;
}
.fields input,
.fields select {
  border-color: #333337;
}
.selection {
  border-color: #ce3e3a;
  background: #201d1f;
  border-radius: 3px;
  padding: 6px 9px;
}
.selection small {
  color: #d28c80;
  font-size: 8px;
}
.editor details > summary {
  font-size: 12px;
  color: #ddd;
}
.tracklabel,
.lane {
  height: 46px;
}
.trackbody {
  align-items: flex-start;
}
.tracklabels {
  min-height: 100%;
}
.trackscroll {
  min-height: 100%;
}
.tracklabel {
  border-right: 1px solid #333;
  background: #1a1a1b;
  gap: 3px;
}
.tracklabel button {
  font-weight: 500;
  border-color: #373738;
  color: #b4b3b3;
  line-height: 1.2;
}
.clip {
  height: 37px;
  top: 4px;
  border-radius: 4px;
  color: #f0eeeb;
  font-weight: 550;
}
.clip.video,
.clip.image {
  background: #443435;
  border-color: #745354;
}
.clip.audio {
  background: #263d3b;
  color: #dce8e4;
}
.clip.selected {
  border-color: #e5544b;
}
.clip.selected:before,
.clip.selected:after {
  z-index: 2;
  background: #ef8074aa;
  width: 4px;
}
.clip span {
  position: relative;
  z-index: 1;
}
.clip .filmstrip {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  opacity: 0.68;
}
.filmstrip img {
  height: 100%;
  flex: 1;
  min-width: 0;
  object-fit: cover;
}
.clip:has(.filmstrip) span {
  background: #100d10c7;
  border-radius: 3px;
  padding: 1px 5px;
}
.ruler {
  background: #19191b;
}
.timelinebar .iconbtn {
  background: #222224;
  border: 1px solid #353538;
}
.timelinebar > b svg {
  color: #c2b9b9;
}
.editor .wave {
  opacity: 0.8;
  color: #83ad9c;
}
.stagebox #stage {
  box-shadow: 0 5px 22px #0007;
}
@media (max-width: 1050px) {
  .use-template span {
    display: none;
  }
  .workarea {
    grid-template-columns: 166px minmax(0, 1fr) 210px;
  }
  .gallery-select select {
    max-width: 145px;
  }
}
@media (max-width: 760px) {
  .gallery-head {
    display: block;
    margin-bottom: 12px;
  }
  .gallery-head .search {
    margin-top: 14px;
    max-width: none;
  }
  .genre {
    gap: 1px;
  }
  .genre button {
    font-size: 11px;
    padding: 6px 8px;
  }
  .gallery-filters {
    gap: 6px;
    padding: 10px 0 14px;
  }
  .gallery-select {
    flex: 1;
    min-width: 0;
  }
  .gallery-select select {
    font-size: 10px;
    width: 100%;
    max-width: 100%;
  }
  .gallery-filters > small {
    display: none;
  }
  .hero {
    min-height: 196px;
  }
  .hero:after {
    background-size: 69% auto;
    background-position: right center;
  }
  .hero:before {
    background: linear-gradient(90deg, #141315 0%, #151315 24%, #151315dd 40%, transparent 80%);
  }
  .hero > div {
    padding: 17px;
  }
  .hero h2 {
    font-size: 37px;
  }
  .hero small {
    font-size: 8px;
  }
  .mode {
    padding: 8px 2px;
  }
  .content {
    padding-inline: 13px;
  }
  .gallery-cards {
    row-gap: 13px;
  }
  .cards .template:nth-child(3):last-child {
    grid-column: auto;
    max-width: 100%;
  }
  .template-meta {
    padding: 7px 0;
    gap: 4px;
  }
  .template-meta small {
    font-size: 8px;
  }
  .template-meta h3 {
    font-size: 14px;
  }
  .cover-type {
    font-size: 8px;
    right: 4px;
    top: 4px;
  }
  .use-template {
    padding: 5px;
  }
  .home .cards:has(> .template:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .home .cards:has(> .template:nth-child(3):last-child) .template-meta {
    flex-wrap: wrap;
  }
  .gallery-cards .cover {
    aspect-ratio: 1.02;
  }
  .gallery-cards {
    gap: 10px;
  }
  .lightbox-info .primary {
    position: static;
    transform: none;
    margin-top: 10px;
  }
  .lightbox-info {
    padding: 15px;
  }
  .lightbox-art {
    height: 46dvh;
  }
  .workarea {
    display: block;
  }
  .tracklabel,
  .lane {
    height: 38px;
  }
  .clip {
    height: 31px;
  }
  .editorbar {
    padding: 6px;
  }
  .stagebox {
    padding: 10px;
  }
  .quick-layers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-layers small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cover,
  .cover-expand {
    transition: none;
  }
}
.hero h2,
.home .heading h1 {
  letter-spacing: -0.045em;
}
.tracklabel b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracklabel > span {
  display: flex;
  gap: 3px;
  white-space: nowrap;
}
.tracklabel button {
  margin: 0;
}
.editor:has(.workarea[data-mobile='preview']) [data-act='tab-preview'],
.editor:has(.workarea[data-mobile='media']) [data-act='tab-media'],
.editor:has(.workarea[data-mobile='inspect']) [data-act='tab-inspect'] {
  border-color: #81423f;
  background: #352526;
  color: #ffe2df;
}
@media (max-width: 760px) {
  .home .cards.featured-cards:has(> .template:nth-child(3):last-child) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 1px 8px;
    scrollbar-width: thin;
  }
  .home .featured-cards .template {
    flex: 0 0 min(76vw, 300px);
    max-width: none;
    scroll-snap-align: start;
  }
  .home .featured-cards .use-template span {
    display: block;
  }
  .home .featured-cards .template-meta {
    flex-wrap: nowrap !important;
  }
  .tracklabels {
    width: 88px;
  }
  .tracklabel {
    padding-inline: 5px;
    gap: 2px;
  }
  .tracklabel b {
    font-size: 10px;
  }
  .tracklabel button {
    font-size: 8px;
    padding: 0 3px;
    line-height: 12px;
  }
}

/* Layout and interaction refinements for extended editing sessions. */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-actions .resume {
  background: #111114cc;
  color: #eee;
  border: 1px solid #ffffff40;
}
.hero-actions .resume svg {
  color: #e7c852;
}
.home .hero {
  isolation: isolate;
}
.home .sectiontitle {
  align-items: baseline;
}
.home .sectiontitle .link {
  min-height: 34px;
}
.template-meta h3 {
  line-height: 1.18;
}
.cover:focus-visible,
.clip:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #f2cf52;
  outline-offset: 2px;
}
.cover:focus-visible {
  outline-offset: -3px;
}
.gallery-lightbox {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: 86dvh;
}
.lightbox-art {
  min-height: 0;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  background: #101012;
}
.lightbox-art :is(img, video) {
  display: block;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}
.lightbox-info {
  background: #1d1d20;
  border-top: 1px solid #39393b;
}
.editorbar {
  border-bottom: 1px solid #343436;
}
.monitor .paneltitle,
.editor aside > .paneltitle {
  letter-spacing: 0.02em;
}
.monitor .paneltitle small {
  color: #98989f;
}
.stagebox {
  background: radial-gradient(ellipse at 50% 35%, #1d1e21, #0c0d0e 80%);
}
#stage {
  outline: 1px solid #ffffff20;
}
#time,
.ruler small,
#dimensions {
  font-variant-numeric: tabular-nums;
}
.fields label {
  color: #c7c6ca;
}
.fields :is(input:not([type='range']):not([type='checkbox']), select, textarea) {
  background: #111114;
  color: #f1f0ed;
}
.selection b {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.selection small {
  font-size: 9px;
  letter-spacing: 0.11em;
}
.timelinebar {
  background: #1b1b1e;
}
.timelinebar .fit-timeline {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
}
.ruler small {
  color: #c2c0c5;
}
.clip.selected {
  outline: 1px solid #ed8a80;
  outline-offset: 0;
}
.clip.text,
.clip.caption {
  color: #fff0e0;
}
#playhead {
  pointer-events: none;
}
.shortcuts {
  margin: 0;
}
.shortcuts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #343436;
}
.shortcuts dt {
  font-size: 13px;
}
.shortcuts dd {
  margin: 0;
}
kbd {
  font:
    12px ui-monospace,
    monospace;
  background: #141416;
  color: #e9dfbc;
  border: 1px solid #454447;
  border-radius: 4px;
  padding: 3px 6px;
  white-space: nowrap;
}
#import-status {
  background: #251f1e;
  color: #efe0bb;
  padding: 8px;
  border-left: 2px solid #c0a34c;
  font-size: 12px;
  overflow-wrap: anywhere;
}
dialog:has(.render-layout) {
  width: min(770px, 94vw);
  padding: clamp(18px, 3vw, 30px);
  background: #1a1a1d;
}
.render-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.render-visual {
  background: #111113;
  border: 1px solid #333337;
  border-radius: 8px;
  overflow: hidden;
}
.render-visual b,
.render-visual small {
  display: block;
  padding: 0 14px;
  overflow-wrap: anywhere;
}
.render-visual b {
  font-size: 14px;
  margin-top: 10px;
}
.render-visual small {
  font-size: 12px;
  color: #aba9ac;
  margin: 4px 0 13px;
}
#export-preview {
  display: block;
  width: 100%;
  height: clamp(150px, 25vh, 240px);
  max-height: none;
  background: #090a0b;
}
.render-settings label {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
  font-size: 12px;
  color: #d0cfd2;
}
.render-settings select {
  width: 100%;
  padding: 7px 9px;
  background: #111114;
}
.render-settings label[hidden] {
  display: none;
}
.render-settings .hint {
  font-size: 12px;
  line-height: 1.45;
  color: #a9a7ac;
}
.render-settings .primary {
  width: 100%;
  justify-content: center;
}
#dimensions {
  font-size: 12px;
  color: #e3d6a3;
}
#exp-prog {
  accent-color: #e4473d;
  height: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  dialog[open] {
    animation: studio-open 0.16s ease-out;
  }
  @keyframes studio-open {
    from {
      opacity: 0;
      translate: 0 5px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}
@media (max-width: 760px) {
  .hero-actions .resume {
    font-size: 11px;
    padding-inline: 8px;
  }
  .editorbar [data-act='shortcuts'] {
    display: none;
  }
  .mobile-tabs button {
    min-height: 32px;
  }
  .tracklabel button {
    line-height: 16px;
    min-width: 24px;
  }
  .transport [data-act='play'] {
    height: 34px;
    width: 34px;
  }
  .timelinebar .fit-timeline {
    min-height: 25px;
    padding-inline: 5px;
  }
  .timelinebar > div {
    overflow-x: auto;
  }
  .render-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #export-preview {
    height: clamp(95px, 18dvh, 160px);
  }
  .render-visual b {
    margin-top: 6px;
  }
  .render-visual small {
    margin-bottom: 7px;
  }
  dialog:has(.render-layout) {
    max-height: 92dvh;
  }
  .gallery .search input {
    font-size: 16px;
  }
  .lightbox-info .primary {
    position: static;
    transform: none;
  }
}

.template-meta {
  column-gap: 6px;
}
.template-meta > div:first-child {
  flex: 1;
  min-width: 0;
}
.bookmark {
  padding: 5px;
  background: transparent;
  color: #a9a8ac;
  border-color: transparent;
}
.bookmark[aria-pressed='true'] {
  color: #edd071;
}
.bookmark[aria-pressed='true'] svg {
  fill: #edd071;
  stroke: #edd071;
}
@media (max-width: 760px) {
  .template-meta {
    flex-wrap: wrap;
  }
  .gallery-cards .template-meta > div:first-child {
    flex-basis: 100%;
  }
  .gallery-cards .template-meta .use-template span {
    display: inline;
    font-size: 10px;
  }
  .gallery-cards .template-meta .use-template {
    flex: 1;
    min-height: 28px;
  }
  .gallery-cards .bookmark {
    min-height: 28px;
  }
}

#timeline-size {
  height: 9px;
  background: #171719;
  cursor: ns-resize;
  touch-action: none;
  display: grid;
  place-items: center;
  border-top: 1px solid #363639;
}
#timeline-size:after {
  content: '';
  width: 34px;
  height: 2px;
  border-radius: 3px;
  background: #68686d;
}
#timeline-size:hover:after,
#timeline-size:focus-visible:after {
  background: #e1c65c;
}
#timeline[style*='--track-height'] .trackbody {
  height: var(--track-height);
}
.render-settings label {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}
@media (max-width: 380px) {
  .sidebar {
    padding-inline: 8px;
    gap: 4px;
  }
  .sidebar .nav svg {
    display: none;
  }
  .sidebar .nav {
    padding: 9px 6px;
  }
  .genre {
    min-width: 0;
    overflow-x: auto;
  }
}

/* Keep the dashboard launch targets distinct while preserving space for project names. */
.mode {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mode:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, #1c1c1efc 28%, #1c1c1ee8 56%, #1c1c1e7a), var(--workspace-art);
  background-size: cover;
  background-position:
    center,
    right 45%;
  z-index: -1;
}
.mode.m0 {
  --workspace-art: url('./art/editorial/camera.webp');
}
.mode.m1 {
  --workspace-art: url('./art/editorial/atelier.webp');
}
.mode.m2 {
  --workspace-art: url('./art/editorial/sampler.webp');
}
.mode:hover {
  border-color: #77706f;
}
.mode > svg {
  color: #e1dcdb;
}
.gallery-head .search {
  min-height: 40px;
}
.lightbox-info .editable-details {
  margin-top: 8px;
  color: #c7bca9;
  font-size: 12px;
}
.use-template:hover,
.use-template:focus-visible {
  background: #392426;
  border-color: #8f4645;
}
.editor #right .fields textarea {
  width: 100%;
  max-width: none;
  min-height: 58px;
  resize: vertical;
}
.editor #right .fields label:has(textarea) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.render-visual small {
  font-variant-numeric: tabular-nums;
}
.render-settings :is(select, .primary) {
  min-height: 37px;
}
.render-settings #dimensions:not(:empty) {
  border-top: 1px solid #363436;
  padding-top: 10px;
  margin-block: 12px;
}
@media (max-width: 760px) {
  .mode:before {
    background-image: linear-gradient(0deg, #1c1c1efc, #1c1c1eaa 75%), var(--workspace-art);
  }
  .gallery-filters {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr;
  }
  .gallery-select select,
  .gallery-head .search input {
    min-height: 36px;
    font-size: 12px;
  }
  .gallery-head .search input {
    font-size: 16px;
  }
  .genre button {
    min-height: 35px;
  }
  .template-meta small {
    font-size: 10px;
  }
  .gallery-cards .use-template,
  .gallery-cards .bookmark {
    min-height: 36px;
  }
  .mobile-tabs button {
    min-height: 36px;
  }
  #right .fields label {
    gap: 8px;
    font-size: 12px;
  }
  #right .fields :is(input:not([type='range']):not([type='checkbox']), select) {
    min-height: 32px;
  }
  #right .fields input[type='range'] {
    min-height: 25px;
  }
  .render-settings :is(select, .primary) {
    min-height: 42px;
  }
  .lightbox-info .primary {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
}
@media (min-width: 761px) and (max-width: 940px) and (orientation: portrait) {
  .mobile-tabs {
    display: flex;
    padding: 5px 10px;
    gap: 6px;
    background: #19191a;
  }
  .mobile-tabs button {
    flex: 1;
    min-height: 36px;
  }
  .workarea {
    display: block;
  }
  .workarea > :where(#left, #right, .monitor) {
    display: none;
    height: 100%;
  }
  .workarea[data-mobile='media'] > #left,
  .workarea[data-mobile='inspect'] > #right {
    display: block;
  }
  .workarea[data-mobile='preview'] > .monitor {
    display: flex;
  }
}
@media (max-height: 510px) and (orientation: landscape) {
  dialog:has(.render-layout) {
    max-height: 94dvh;
    overflow-y: auto;
  }
  #export-preview {
    height: 100px;
  }
}

/* Project opening and recovery use the same local project identity as the dashboard. */
#project-opening {
  position: fixed;
  inset: auto 16px max(18px, env(safe-area-inset-bottom)) auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 13px 17px;
  border: 1px solid #52494b;
  border-radius: 9px;
  background: #222023;
  color: #faf8f4;
  box-shadow: 0 5px 22px #0007;
}
#project-opening > div {
  min-width: 0;
}
#project-opening strong {
  font-size: 14px;
}
#project-opening p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #cfc7c7;
  overflow-wrap: anywhere;
}
.opening-spinner {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid #715152;
  border-top-color: #ff918b;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .opening-spinner {
    animation: opening-spin 0.8s linear infinite;
  }
}
@keyframes opening-spin {
  to {
    transform: rotate(360deg);
  }
}
.manage-project > label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.manage-project > label input {
  width: 100%;
}
.manage-project .choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.manage-project .choices button {
  padding: 8px;
  font-size: 12px;
}
.recovery-available {
  margin: 17px 0;
  padding: 12px;
  border-left: 3px solid #d9b454;
  border-radius: 4px;
  background: #272422;
}
.recovery-available h3 {
  margin: 0;
  font-size: 15px;
}
.recovery-available p {
  font-size: 12px;
  color: #cec3b3;
  margin: 3px 0 10px;
  overflow-wrap: anywhere;
}
.recovery-available button {
  width: 100%;
  justify-content: flex-start;
}
.manage-project > [data-act='delete'] {
  border: 0;
  color: #e29e9a;
  background: transparent;
  padding-left: 0;
  font-size: 12px;
}
@media (min-width: 1000px) {
  .timelinebar .iconbtn:is([data-act='split'], [data-act='mixer'], [data-act='marker']) {
    width: auto;
    padding-inline: 8px;
    gap: 5px;
  }
  .timelinebar .iconbtn:is([data-act='split'], [data-act='mixer'], [data-act='marker']) span {
    display: inline;
    font-weight: 550;
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .look-entry div button {
    min-height: 38px;
  }
  .timelinebar {
    gap: 3px;
  }
  .timelinebar > div {
    min-width: 0;
    justify-content: flex-start;
    padding: 2px 0 4px;
    scrollbar-width: thin;
  }
  .timelinebar > div > .iconbtn {
    min-width: 33px;
    min-height: 33px;
  }
  .timelinebar > div > label {
    min-height: 33px;
  }
  .tracklabel button {
    min-height: 21px;
  }
  .transport [data-act='play'] {
    min-width: 40px;
    min-height: 40px;
  }
  .transport [data-act='rewind'] {
    min-width: 34px;
    min-height: 34px;
  }
  .editorbar .iconbtn {
    min-width: 34px;
    min-height: 36px;
  }
  .gallery-cards .cover-type {
    backdrop-filter: none;
    background: #141414ed;
  }
  .render-settings :is(select, .primary) {
    font-size: 14px;
  }
  dialog::backdrop {
    backdrop-filter: none;
    background: #060608d1;
  }
}
@media (max-width: 480px) {
  .gallery-head + .genre,
  #library .genre {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  #library .genre button {
    width: 100%;
    min-height: 32px;
    padding: 4px;
  }
}
@media (max-height: 650px) {
  .render-layout .render-settings [data-act='render'] {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
}
@media (max-height: 510px) and (orientation: landscape) {
  .editor {
    min-height: 0;
    height: 100dvh;
  }
  .editorbar {
    min-height: 40px;
    padding: 4px 10px;
  }
  .editorbar img {
    width: 26px;
    height: 26px;
  }
  .editor .paneltitle {
    padding-block: 4px;
  }
  .editor .transport {
    padding-block: 2px;
  }
  .editor .timelinebar {
    padding: 3px 8px;
  }
  .editor .trackbody {
    height: clamp(75px, 24dvh, 105px);
  }
  .editor .stagebox {
    padding: 5px;
  }
  .editor .workarea {
    min-height: 0;
  }
}
@media (min-width: 761px) and (max-width: 940px) and (max-height: 510px) and (orientation: landscape) {
  .editor .workarea {
    grid-template-columns: 157px minmax(0, 1fr) 247px;
  }
}