.studio-workspace {
  color: #f3edff;
  background: #0b0b13;
  border: 1px solid #8451d3;
  border-radius: 8px;
  overflow: hidden;
  font:
    14px system-ui,
    sans-serif;
}
.studio-workspace button,
.studio-dialog button,
.studio-workspace input,
.studio-workspace select,
.studio-dialog input,
.studio-dialog select,
.studio-workspace textarea,
.studio-dialog textarea {
  font: inherit;
  color: inherit;
  background: #161123;
  border: 1px solid #7950bc;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  max-width: 100%;
}
.studio-workspace button,
.studio-dialog button {
  cursor: pointer;
}
.studio-workspace button:hover,
.studio-dialog button:hover {
  background: #352055;
}
.studio-workspace button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.studio-workspace button:focus-visible,
.studio-dialog button:focus-visible {
  outline: 2px solid #c6a5ff;
}
.studio-toolbar,
.studio-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #513777;
}
.studio-toolbar > input {
  width: 220px;
}
.studio-status {
  margin-right: auto;
  color: #b6a6ce;
  font-size: 12px;
}
.studio-columns {
  display: grid;
  grid-template-columns: 250px minmax(280px, 1fr) 250px;
  min-height: 410px;
}
.studio-bin,
.studio-inspector {
  padding: 12px;
  max-height: 540px;
  overflow: auto;
}
.studio-bin {
  border-right: 1px solid #513777;
}
.studio-bin > button {
  margin: 3px;
  max-width: 100%;
}
.studio-inspector {
  border-left: 1px solid #513777;
}
.studio-workspace h3 {
  font-size: 15px;
  margin: 12px 0;
}
.studio-workspace label,
.studio-dialog label {
  display: flex;
  gap: 6px;
  flex-direction: column;
  margin: 10px 0;
  color: #c8b9df;
}
.studio-workspace label:has(input[type="checkbox"]),
.studio-dialog label:has(input[type="checkbox"]) {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}
.studio-workspace input[type="checkbox"],
.studio-dialog input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  accent-color: #9155ff;
}
.studio-viewer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  background: #08080d;
}
.studio-viewer canvas {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  min-height: 160px;
}
.studio-controls {
  flex-wrap: wrap;
  border: 0;
}
.studio-controls input {
  flex: 1;
  min-width: 100px;
}
.studio-assets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 250px;
  overflow: auto;
  margin: 12px 0;
}
.studio-asset {
  min-width: 0;
  background: #15101f;
  padding: 5px;
  border-radius: 6px;
}
.studio-asset img {
  width: 100%;
  height: 60px;
  object-fit: cover;
}
.studio-asset span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}
.studio-asset button {
  font-size: 11px;
  padding: 4px;
  margin: 2px;
}
.studio-timeline {
  padding: 12px;
  border-top: 1px solid #8451d3;
}
.studio-timeline > h3,
.studio-timeline > label {
  display: inline-flex;
  margin-right: 16px;
}
.studio-track {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  border-top: 1px solid #2b203a;
  min-height: 42px;
  font-size: 12px;
}
.studio-lane {
  height: 36px;
  position: relative;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--timeline-tick, 10%) - 1px),
    #30243c calc(var(--timeline-tick, 10%) - 1px),
    #30243c var(--timeline-tick, 10%)
  );
}
.studio-lane button {
  position: absolute;
  top: 3px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px;
  background: #302048;
  border-color: #7652a5;
  font-size: 11px;
}
.studio-lane button.selected {
  background: #6533a8;
  outline: 1px solid #cfb5ff;
}
.studio-dialog {
  color: #f3edff;
  background: #100d19;
  border: 1px solid #9961ff;
  border-radius: 10px;
  width: min(640px, 90vw);
  max-height: 85vh;
  padding: 24px;
  overflow: auto;
  font:
    14px system-ui,
    sans-serif;
}
.studio-dialog::backdrop {
  background: #000b;
}
.studio-dialog > button {
  margin: 6px 5px 6px 0;
}
.studio-dialog > h2 {
  display: inline-block;
  margin: 0 20px 16px 0;
}
.studio-dialog textarea {
  width: 100%;
  min-height: 100px;
}
.studio-dialog video {
  display: block;
  width: 100%;
  max-height: 350px;
  margin: 12px 0;
}
.studio-dialog a {
  color: #cfaaff;
  margin: 10px;
}
.studio-library {
  display: grid;
  gap: 6px;
  max-height: 400px;
  overflow: auto;
}
@media (max-width: 1050px) {
  .studio-columns {
    grid-template-columns: 190px minmax(200px, 1fr);
  }
  .studio-inspector {
    grid-column: 1/-1;
    max-height: 280px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    border-top: 1px solid #513777;
  }
  .studio-toolbar {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .studio-columns {
    display: flex;
    flex-direction: column;
  }
  .studio-bin {
    max-height: 250px;
  }
  .studio-inspector {
    grid-template-columns: 1fr 1fr;
  }
  .studio-toolbar > input {
    width: 160px;
  }
  .studio-track {
    grid-template-columns: 85px 1fr;
  }
}
.studio-workspace .studio-lane button {
  min-height: 0;
}
.studio-workspace input[type="checkbox"] {
  min-height: 0;
}
.studio-workspace .studio-viewer canvas {
  aspect-ratio: auto;
}
.studio-workspace .studio-track {
  min-height: 44px;
}
.studio-toolbar > select {
  width: 100px;
  flex: none;
}
.studio-lane::after {
  content: "";
  position: absolute;
  left: var(--playhead, 0%);
  height: 100%;
  width: 2px;
  background: #bb8bff;
  pointer-events: none;
  z-index: 2;
}
.studio-dialog details {
  padding: 10px 0;
  color: #c8b9df;
}
.studio-dialog summary {
  cursor: pointer;
}
.studio-exports {
  padding: 12px;
  border-top: 1px solid #513777;
}
.studio-export-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
}
.studio-export-row span {
  margin-right: auto;
}
/* Studio is a compact editing surface; controls stay close to the canvas. */
#app-shell #main #view-lab-studio .phantom-page-banner {
  aspect-ratio: 12/1;
  overflow: hidden;
}
#app-shell #main #view-lab-studio .phantom-page-banner::before {
  width: 17cqw;
  height: 5.67cqw;
  top: -1cqw;
}
#app-shell #main #view-lab-studio .phantom-page-banner::after {
  width: 16cqw;
  height: 5.33cqw;
  top: 2cqw;
}
#app-shell #main #view-lab-studio .phantom-page-banner img {
  object-fit: cover;
}
#app-shell #main #view-lab-studio .studio-workspace {
  font:
    12px system-ui,
    sans-serif;
  border-radius: 6px;
  background: #090a11;
}
#app-shell
  #main
  #view-lab-studio
  .studio-workspace
  :is(button, input, select, textarea) {
  font: inherit;
  min-height: 0;
  line-height: 1.3;
  padding: 6px 9px;
  border-radius: 5px;
}
#app-shell #main #view-lab-studio .studio-workspace button {
  height: auto;
  min-width: 0;
  white-space: nowrap;
}
#app-shell #main #view-lab-studio .studio-workspace [hidden] {
  display: none !important;
}
#app-shell #main #view-lab-studio .studio-toolbar {
  padding: 7px 10px;
  min-height: 40px;
  gap: 8px;
  background: #10101b;
}
#app-shell #main #view-lab-studio .studio-toolbar input {
  width: 200px;
  background: transparent;
  border-color: transparent;
}
#app-shell #main #view-lab-studio .studio-toolbar > button:last-child,
.studio-bin-actions > button:first-child {
  background: #7840eb;
  color: white;
}
#app-shell #main #view-lab-studio .studio-columns {
  grid-template-columns: minmax(210px, 25%) minmax(280px, 1fr) minmax(
      210px,
      25%
    );
  height: clamp(300px, 39vh, 450px);
  min-height: 300px;
}
#app-shell #main #view-lab-studio :is(.studio-bin, .studio-inspector) {
  padding: 8px;
  max-height: none;
  min-height: 0;
  overflow: auto;
  display: block;
  grid-column: auto;
  background: linear-gradient(135deg, #12111d, #0b0b12);
}
.studio-tabs {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid #403057;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
#app-shell #main #view-lab-studio .studio-tabs button {
  flex: 1;
  padding: 6px 3px;
  background: transparent;
  border-color: transparent;
  font-size: 11px;
}
#app-shell
  #main
  #view-lab-studio
  :is(.studio-tabs, .studio-filters)
  button.active {
  background: #34205e;
  border-color: #9d66ff;
  color: #e3d3ff;
}
.studio-bin-actions {
  display: flex;
  gap: 6px;
}
.studio-bin-actions button {
  flex: 1;
}
.studio-filters {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
#app-shell #main #view-lab-studio .studio-filters button {
  font-size: 10px;
  flex: 1;
  padding: 4px;
  border-radius: 14px;
}
#app-shell #main #view-lab-studio .studio-assets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: none;
  gap: 6px;
  margin: 8px 0;
}
#app-shell #main #view-lab-studio .studio-asset {
  padding: 2px;
  background: transparent;
}
#app-shell #main #view-lab-studio .studio-asset img {
  height: 84px;
  border-radius: 6px;
  border: 1px solid #674f86;
}
#app-shell #main #view-lab-studio .studio-asset span {
  font-size: 11px;
}
#app-shell #main #view-lab-studio .studio-asset button {
  padding: 3px 5px;
  font-size: 10px;
}
.studio-bin-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
#app-shell #main #view-lab-studio .studio-viewer {
  padding: 7px;
  min-height: 0;
  overflow: hidden;
}
#app-shell #main #view-lab-studio .studio-viewer canvas {
  min-height: 0;
  height: calc(100% - 42px);
  flex: 1;
  object-fit: contain;
  max-height: none;
  background: #050508;
  border: 1px solid #29223b;
}
#app-shell #main #view-lab-studio .studio-controls {
  padding: 6px 0;
  gap: 5px;
  flex-wrap: nowrap;
}
#app-shell #main #view-lab-studio .studio-controls button {
  font-size: 10px;
  padding: 5px;
}
.studio-clock {
  white-space: nowrap;
  font-size: 10px;
}
#app-shell #main #view-lab-studio .studio-controls input {
  min-width: 35px;
  width: 50px;
  padding: 0;
}
#app-shell #main #view-lab-studio .studio-inspector label {
  display: grid;
  grid-template-columns: 1fr 100px;
  align-items: center;
  margin: 8px 0;
  gap: 6px;
  font-size: 11px;
}
#app-shell #main #view-lab-studio .studio-inspector label :is(input, select) {
  width: 100%;
  padding: 4px;
}
#app-shell #main #view-lab-studio .studio-inspector h3 {
  font-size: 11px;
  margin: 8px 0;
}
.studio-motion-presets {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
#app-shell #main #view-lab-studio .studio-motion-presets button {
  white-space: normal;
  flex: 1;
  font-size: 10px;
  background: linear-gradient(#423066, #191525);
  height: 45px;
}
#app-shell #main #view-lab-studio .studio-template-card {
  white-space: normal;
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0;
  padding: 10px;
  background: linear-gradient(125deg, #312047, #171322);
}
.studio-template-card small {
  display: block;
  color: #c2b5d4;
  font-size: 10px;
  margin-top: 5px;
  line-height: 1.5;
}
#app-shell #main #view-lab-studio .studio-timeline {
  padding: 6px 8px;
}
.studio-timeline-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
#app-shell #main #view-lab-studio .studio-timeline-tools h3 {
  margin: 0;
  font-size: 12px;
}
#app-shell #main #view-lab-studio .studio-timeline-tools label {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  font-size: 10px;
}
.studio-timeline-tools label:last-child {
  margin-left: auto !important;
}
.studio-timeline-tools input[type="range"] {
  width: 80px;
}
.studio-timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 3px;
}
.studio-timeline-sheet {
  width: 100%;
}
.studio-ruler {
  display: grid;
  grid-template-columns: 110px 1fr;
  height: 24px;
}
.studio-ruler > div {
  position: relative;
  border-bottom: 1px solid #756087;
  cursor: crosshair;
  margin-right: 0;
}
.studio-ruler > div span {
  position: absolute;
  font-size: 9px;
  color: #a99cbb;
  transform: translateX(-50%);
}
#app-shell #main #view-lab-studio .studio-track {
  grid-template-columns: 110px 1fr;
  min-height: 32px;
  font-size: 10px;
}
#app-shell #main #view-lab-studio .studio-lane {
  height: 32px;
}
#app-shell #main #view-lab-studio .studio-lane button {
  height: 26px;
  top: 3px;
  font-size: 9px;
  padding: 3px 6px;
  text-shadow:
    0 1px 3px #000,
    0 0 4px #000;
  background-size: auto 100%;
  background-repeat: repeat-x;
  color: white;
  text-align: left;
}
#app-shell #main #view-lab-studio .studio-track[data-track="music"] button {
  border-color: #b06bf7;
}
#app-shell #main #view-lab-studio .studio-track[data-track="voice"] button {
  border-color: #52b8e7;
}
#app-shell #main #view-lab-studio .studio-track[data-track="effect"] button {
  border-color: #4ea884;
}
.studio-lane::after {
  content: "";
  position: absolute;
  left: var(--playhead, 0%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: #b780ff;
  pointer-events: none;
  z-index: 3;
}
.studio-bottom-dock {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid #604086;
}
.studio-bottom-dock section {
  padding: 10px;
  border: 1px solid #684491;
  border-radius: 6px;
  background: linear-gradient(130deg, #1a1429, #0b0b12);
}
#app-shell #main #view-lab-studio .studio-bottom-dock h3 {
  margin: 0 0 3px;
  font-size: 14px;
}
.studio-bottom-dock p {
  color: #afa1c4;
  font-size: 11px;
  margin: 4px 0 9px;
}
.studio-bottom-dock button {
  margin: 3px;
}
.studio-sample-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #372544;
}
@media (max-width: 900px) {
  #app-shell #main #view-lab-studio .studio-columns {
    grid-template-columns: 190px minmax(220px, 1fr);
    height: auto;
  }
  #app-shell #main #view-lab-studio .studio-inspector {
    grid-column: 1/-1;
    max-height: 220px;
  }
  #app-shell #main #view-lab-studio .studio-viewer {
    height: 300px;
  }
}
@media (max-width: 640px) {
  #app-shell #main #view-lab-studio .phantom-page-banner {
    aspect-ratio: 5/1;
  }
  #app-shell #main #view-lab-studio .studio-columns {
    display: flex;
    flex-direction: column;
  }
  #app-shell #main #view-lab-studio .studio-bin {
    max-height: 230px;
  }
  #app-shell #main #view-lab-studio .studio-viewer {
    height: 230px;
    flex: none;
  }
  #app-shell #main #view-lab-studio .studio-inspector {
    max-height: 240px;
  }
  #app-shell #main #view-lab-studio .studio-timeline-tools {
    flex-wrap: wrap;
  }
  .studio-bottom-dock {
    grid-template-columns: 1fr;
  }
  .studio-timeline-sheet {
    min-width: 650px !important;
  }
}
.studio-template-dialog {
  width: min(950px, 92vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.studio-template-dialog:not([open]) {
  display: none;
}
.studio-template-dialog > :is(h2, p, details, textarea) {
  grid-column: 1/-1;
}
.studio-template-dialog > label:has(textarea) {
  grid-column: 1/-1;
}
.studio-template-dialog .studio-picture-choice {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #634586;
  padding: 8px;
  border-radius: 6px;
}
.studio-picture-choice img {
  width: 100%;
  height: 85px;
  object-fit: cover;
}
.studio-export-dialog > img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  background: #07070b;
}
@media (max-width: 640px) {
  .studio-template-dialog {
    grid-template-columns: 1fr;
  }
}
.studio-template-dialog[open] {
  display: block;
}
.studio-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.studio-dialog-heading h2 {
  margin: 0;
}
.studio-template-steps {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.2fr;
  gap: 20px;
  margin: 18px 0;
}
.studio-template-steps > section {
  padding: 12px;
  border: 1px solid #513676;
  border-radius: 7px;
  min-width: 0;
}
.studio-template-steps h3 {
  font-size: 14px;
  color: #cfaaff;
  margin: 0 0 16px;
}
.studio-template-steps label,
.studio-template-steps button {
  width: 100%;
}
.studio-template-steps button {
  font-size: 12px;
  margin: 5px 0;
}
.studio-template-steps .studio-picture-choice {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  align-items: center;
  font-size: 11px;
}
.studio-picture-choice img {
  grid-column: 1/-1;
  grid-row: 1;
}
.studio-template-dialog > button:last-child {
  display: block;
  margin-left: auto;
  background: #783be7;
}
@media (max-width: 640px) {
  .studio-template-steps {
    grid-template-columns: 1fr;
  }
}
.studio-viewer {
  position: relative;
}
.studio-viewer.show-safe-area::after {
  content: "";
  position: absolute;
  inset: 7% 7% 17%;
  border: 1px dashed #ddd7f0;
  pointer-events: none;
}
#app-shell #main #view-lab-studio .studio-controls label {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  font-size: 9px;
  white-space: nowrap;
}
#app-shell
  #main
  #view-lab-studio
  .studio-controls
  input[aria-label="Preview volume"] {
  flex: 0 0 45px;
}
.studio-track-title {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #10101a;
}
#app-shell #main #view-lab-studio .studio-track-title button {
  font-size: 8px;
  padding: 1px 2px;
  float: right;
  max-width: 36px;
}

/* Keep transport controls readable when the preview column narrows. */
#app-shell #main #view-lab-studio .studio-controls {
  flex-wrap: wrap;
}
#app-shell #main #view-lab-studio .studio-controls :is(button, label, .studio-clock) {
  flex-shrink: 0;
}
#app-shell #main #view-lab-studio .studio-controls input[type="checkbox"] {
  width: 17px;
  min-width: 17px;
}
@media (max-width: 640px) {
  #app-shell #main #view-lab-studio .studio-viewer {
    height: 310px;
  }
  #app-shell #main #view-lab-studio .studio-controls button {
    font-size: 12px;
    padding: 6px;
  }
  #app-shell #main #view-lab-studio .studio-controls input[aria-label="Timeline position"] {
    flex: 1 1 100%;
    order: -1;
  }
}
/* Studio editing: the page scrolls independently of the horizontal timeline. */
#app-shell #main #view-lab-studio.view-page {overflow-y:auto!important;overflow-x:hidden!important;min-height:0;padding-bottom:24px;}
#app-shell #main #view-lab-studio .studio-workspace {height:auto;min-height:0;flex-shrink:0;}
#app-shell #main #view-lab-studio .studio-bin {display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;overflow:hidden;}
#app-shell #main #view-lab-studio .studio-library-tabs {display:flex;flex-direction:column;align-self:start;border-bottom:0;border-right:1px solid #403057;padding-right:7px;}
#app-shell #main #view-lab-studio .studio-library-tabs button {flex:none;min-height:36px;}
.studio-bin-content {min-width:0;overflow:auto;}
#app-shell #main #view-lab-studio .studio-bin-actions {display:flex;flex-direction:column;}
#app-shell #main #view-lab-studio .studio-assets {grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible;}
.studio-timeline-sheet {position:relative;user-select:none;touch-action:pan-y;}
.studio-lane button[data-clip] {touch-action:none;cursor:grab;}
.studio-lane button[data-clip]:active {cursor:grabbing;}
.studio-trim {position:absolute;top:0;bottom:0;width:8px;background:#e0caff55;cursor:ew-resize;z-index:2;}
.studio-trim-left {left:0;}.studio-trim-right {right:0;}
.studio-marquee {position:absolute;border:1px solid #d9b5ff;background:#a56cff33;pointer-events:none;z-index:8;}
.studio-context-menu {position:fixed;z-index:10000;display:grid;gap:3px;width:220px;padding:8px;background:#191324;border:1px solid #a77be3;border-radius:10px;box-shadow:0 10px 35px #0009;}
.studio-context-menu button {color:#f6efff;background:transparent;border:0;text-align:left;padding:9px;cursor:pointer;border-radius:5px;}
.studio-context-menu button:is(:hover,:focus-visible) {background:#6935a4;}
.studio-library-layout {display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;}
.studio-library-categories {display:flex;flex-direction:column;gap:8px;padding-top:12px;}
.studio-library-categories button[aria-pressed=true] {background:#713bae;}
.studio-import-dialog {width:min(780px,92vw);}
.studio-library-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:50vh;overflow:auto;}
.studio-library-grid button {display:flex;flex-direction:column;text-align:left;gap:7px;min-width:0;}
.studio-library-grid img,.studio-library-placeholder {width:100%;height:95px;object-fit:cover;border-radius:5px;background:#211934;}
.studio-library-placeholder {display:grid;place-items:center;font-size:36px;}
.studio-library-grid span:not(.studio-library-placeholder) {overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.studio-library-grid small {color:#c7b1df;}
@media(max-width:640px) {.studio-library-layout{grid-template-columns:90px minmax(0,1fr);gap:8px}.studio-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.studio-shape-outline {position:absolute;border:2px dashed #dec3ff;box-sizing:border-box;cursor:move;touch-action:none;}
.studio-shape-outline[hidden] {display:none!important;}
.studio-shape-resize {position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#ad72f3;border:1px solid white;cursor:nwse-resize;}

.studio-asset[draggable="true"] { cursor: grab; }
.studio-drop-ready .studio-lane { outline: 1px dashed #b18aff; outline-offset: -2px; }
.studio-lane.studio-drop-hover { background: #6333a455; outline: 2px solid #b18aff; }
.studio-edit-hint { font-size: .8rem; color: #c9bfdc; margin: .5rem 0; }

.studio-asset {touch-action:none;user-select:none;}
.studio-drag-label {position:fixed;z-index:15000;pointer-events:none;max-width:240px;padding:8px 12px;border:1px solid #b18aff;background:#21142f;color:white;border-radius:8px;}

.studio-media-preview {width:min(620px,92vw);}
.studio-media-preview video,.studio-media-preview img {display:block;width:100%;max-height:50vh;object-fit:contain;background:#08070d;}
.studio-media-preview audio {width:100%;margin:12px 0;}
.studio-media-preview h3 {overflow-wrap:anywhere;}

body dialog.studio-dialog.studio-media-preview > header.studio-preview-heading {display:flex;justify-content:flex-end;align-items:center;min-height:100px;margin:-24px -24px 20px;padding:12px 20px;background:#160e25 url("assets/popup-library-identity-v3.svg") center/cover no-repeat;border-bottom:1px solid #8252b7;}
.studio-preview-heading .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);}
.studio-preview-heading button {background:#713bae;color:white;}

body dialog.studio-media-preview {overflow-x:hidden;box-sizing:border-box;}
@media(max-width:760px){body dialog.studio-dialog.studio-media-preview > header.studio-preview-heading {margin:-16px -16px 16px;padding:12px 16px;}}

/* Timeline-first workspace: detailed controls share a compact settings window. */
#app-shell #main #view-lab-studio .studio-columns {grid-template-columns:minmax(270px,330px) minmax(0,1fr);}
#app-shell #main #view-lab-studio .studio-columns > .studio-inspector[hidden] {display:none!important;}
#app-shell #main #view-lab-studio .studio-viewer {position:relative;min-height:260px;max-height:800px;}
#app-shell #main #view-lab-studio .studio-viewer canvas {flex:1;min-height:0;max-height:100%;height:calc(100% - 65px);}
.studio-viewer-grip {position:absolute;bottom:0;left:25%;width:50%;height:8px;cursor:ns-resize;touch-action:none;background:linear-gradient(transparent,#75569888);border-radius:6px;}
.studio-preview-fullscreen {position:absolute;top:12px;right:12px;z-index:12;min-width:36px;min-height:36px;padding:4px 8px;color:#fff8ed;background:#151025c9;border:1px solid #ad79ff99;border-radius:8px;font-size:22px;line-height:1;cursor:pointer;}
.studio-preview-fullscreen:focus-visible {outline:2px solid #d5b3ff;outline-offset:3px;}
#app-shell #main #view-lab-studio .studio-viewer:fullscreen {width:100vw;height:100vh!important;max-height:none;min-height:0;box-sizing:border-box;background:#08080d;}
.studio-viewer:fullscreen .studio-viewer-grip {display:none;}
.studio-timeline-scroll {overscroll-behavior-x:contain;}
body dialog.studio-advanced {width:min(860px,94vw);max-height:88vh;box-sizing:border-box;overflow:auto;}
.studio-settings-layout {display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;}
.studio-settings-tabs {display:flex;flex-direction:column;gap:8px;align-self:start;}
.studio-settings-tabs button {text-align:left;}
.studio-settings-tabs button[aria-pressed=true] {background:#713bae;}
.studio-settings-body {min-width:0;max-height:52vh;overflow:auto;padding:0 8px;}
.studio-settings-body .studio-inspector {border:0;padding:0;max-height:none;}
.studio-settings-footer {display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid #573477;margin-top:16px;}
.studio-settings-footer button {background:#8447eb;min-width:110px;}
.studio-effect-item {display:flex;gap:4px;margin:8px 0;}
.studio-effect-item button:first-child {flex:1;text-align:left;}
.studio-effect-item button[aria-pressed=true] {background:#713bae;}
.studio-project-list {display:grid;grid-auto-rows:max-content;gap:12px;max-height:48vh;overflow:auto;align-content:start;padding:3px;scrollbar-gutter:stable;}
body dialog.studio-dialog .studio-project-card > button:first-child {display:flex;flex-direction:column;text-align:left;gap:8px;min-width:0;height:auto;max-height:none;white-space:normal;overflow-wrap:anywhere;align-items:stretch;}
.studio-project-card > button:first-child > * {flex-shrink:0;}
.studio-project-title {display:block;line-height:1.4;}
.studio-project-list small {color:#c5b5dd;}
@media(max-width:760px){#app-shell #main #view-lab-studio .studio-columns{grid-template-columns:minmax(0,1fr)}.studio-settings-layout{grid-template-columns:95px minmax(0,1fr);gap:6px}.studio-settings-tabs button{font-size:12px;padding:8px}.studio-toolbar{flex-wrap:wrap}}
.studio-resize-nw{left:-6px;top:-6px;right:auto;bottom:auto}.studio-resize-ne{right:-6px;top:-6px;bottom:auto;cursor:nesw-resize}.studio-resize-sw{left:-6px;bottom:-6px;right:auto;cursor:nesw-resize}
body dialog.studio-dialog > header.studio-dialog-heading {position:relative;display:flex;justify-content:flex-end;align-items:center;height:110px;min-height:110px;margin:-24px -24px 18px;padding:12px 18px;background:#160e25;border-bottom:1px solid #8252b7;}
.studio-dialog-heading > svg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.studio-dialog-heading > h2.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);}
.studio-dialog-heading > button {position:relative;z-index:1;background:#713bae;color:white;}
body dialog.studio-dialog {box-sizing:border-box;overflow-x:hidden;}
@media(max-width:760px){body dialog.studio-dialog > header.studio-dialog-heading {margin:-16px -16px 16px;padding:12px 16px;height:90px;min-height:90px;}}
#app-shell #main #view-lab-studio .studio-columns {height:auto;align-items:start;}
#app-shell #main #view-lab-studio .studio-bin {height:420px;max-height:420px;}
.studio-columns > .studio-inspector[hidden]{display:none!important;}
.studio-columns{grid-template-columns:280px minmax(0,1fr);}
@media(max-width:760px){#app-shell #main #view-lab-studio .studio-bin{height:280px;max-height:280px}}
.studio-project-list {grid-template-columns:repeat(2,minmax(0,1fr));}
.studio-project-list img {width:100%;height:100px;object-fit:cover;border-radius:6px;}
@media(max-width:640px){.studio-project-list{grid-template-columns:minmax(0,1fr)}}
body dialog.studio-dialog > header.studio-dialog-heading {background:#160e25 url("assets/popup-library-identity-v3.svg") center/cover no-repeat;}
body dialog.studio-advanced .studio-settings-body .studio-inspector {display:block;max-height:none;}

/* Shared site branding owns the finished header when its enhancement is active. */
body dialog.studio-dialog > .studio-dialog-heading.phantom-secondary-artwork > svg {display:none;}

/* Keep everyday editing beside a compact preview; detailed settings stay in Advanced. */
.studio-columns,#app-shell #main #view-lab-studio .studio-columns {
  grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(230px,280px);
}
.studio-columns > .studio-inspector,#app-shell #main #view-lab-studio .studio-columns > .studio-inspector {
  display:block;max-height:420px;overflow:auto;min-width:0;
}
@media(max-width:1100px){
  .studio-columns,#app-shell #main #view-lab-studio .studio-columns{grid-template-columns:230px minmax(0,1fr)}
  .studio-columns > .studio-inspector,#app-shell #main #view-lab-studio .studio-columns > .studio-inspector{grid-column:1/-1;max-height:280px}
}
@media(max-width:760px){
  .studio-columns,#app-shell #main #view-lab-studio .studio-columns{grid-template-columns:minmax(0,1fr)}
}

/* Frame guides are editor chrome, never part of exported pixels. */
.studio-creation-wizard {max-width:min(760px,94vw);}
.studio-wizard-template {padding:14px;margin:12px 0;border:1px solid #7350a0;border-radius:12px;background:#21182d;}
.studio-wizard-template button,.studio-wizard-actions button {margin:6px;}
.studio-wizard-media {display:block;max-width:100%;width:100%;max-height:260px;object-fit:contain;margin:12px 0;border-radius:10px;}
.studio-wizard-progress {color:#cdb8ee;font-size:.9rem;}
.studio-wizard-actions {display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px;}
.studio-creation-wizard textarea {width:100%;min-height:100px;box-sizing:border-box;}
.studio-frame-edge {position:absolute;box-sizing:border-box;border:2px solid #59c9c1;pointer-events:none;z-index:2;}
.studio-timeline-navigation {display:flex;align-items:center;gap:12px;margin:8px 0;}
.studio-timeline-navigation input[type="range"] {flex:1;min-width:80px;}
.studio-ruler > div span {color:#d8cbea;font-variant-numeric:tabular-nums;}

#app-shell #main #view-lab-studio .studio-frame-edge {border:2px solid #59c9c1;}
#app-shell #main #view-lab-studio .studio-timeline > .studio-timeline-navigation {display:flex;flex-direction:row;align-items:center;width:100%;gap:12px;margin:8px 0;}
#app-shell #main #view-lab-studio .studio-timeline-navigation input[type="range"] {flex:1;width:0;min-width:80px;margin:0;padding:0;}

.studio-inspector [hidden], .studio-advanced [hidden] {display:none!important;}

/* Readable values beside compact effect sliders, rather than a long numeric form. */
.studio-settings-body .studio-inspector:is([data-tab="Audio"],[data-tab="Effects"]) > label:has(input[type="range"]) {
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin:12px 0;
}
.studio-settings-body .studio-inspector:is([data-tab="Audio"],[data-tab="Effects"]) > label > input[type="range"] {grid-column:1/-1;grid-row:2;width:100%;}
.studio-settings-body .studio-inspector:is([data-tab="Audio"],[data-tab="Effects"]) > label > output {grid-column:2;grid-row:1;text-align:right;}

/* Draggable playhead: wide hit target, thin visible line; clip gestures stay separate. */
.studio-ruler > div {touch-action:none;}
.studio-playhead-handle,.studio-playhead-hit {position:absolute;left:var(--playhead,0%);transform:translateX(-50%);width:16px;touch-action:none;cursor:ew-resize;z-index:8;}
.studio-playhead-handle {top:10px;bottom:0;background:#c69aff;clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%);}
.studio-playhead-handle:focus-visible {outline:2px solid white;outline-offset:2px;clip-path:none;}
.studio-playhead-hit {top:0;bottom:0;}
/* Unified contextual tools: one preview, one timeline, consistent editing surfaces. */
.studio-tools-heading{display:flex;align-items:center;gap:10px;color:#d3a7ff;margin-bottom:12px}
.studio-tools-heading img{object-fit:contain}
.studio-context-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.studio-context-tabs button{display:flex;align-items:center;gap:7px;min-height:38px;text-align:left;white-space:normal}
.studio-tool-icon{font-size:18px;width:20px;flex-shrink:0;text-align:center}
.studio-tools-help{font-size:12px;color:#c8badb;line-height:1.5}
.studio-preset-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}
.studio-preset{position:relative;display:flex;flex-direction:column;gap:6px;padding:5px!important;overflow:hidden;font-size:11px}
.studio-preset img{width:100%;height:52px;object-fit:cover;border-radius:4px;pointer-events:none}
.studio-preset-mark{position:absolute;top:8px;right:8px;background:#130e24cc;border-radius:4px;padding:1px 4px}
.studio-preset:hover,.studio-preset:focus-visible{border-color:#bc8aff;outline:1px solid #bc8aff}
.studio-inspector>label{display:grid;gap:6px;margin:12px 0}
.studio-inspector>label:has(input[type=range]){grid-template-columns:minmax(0,1fr) auto}
.studio-inspector>label>input[type=range]{grid-column:1/-1;grid-row:2;width:100%}
.studio-inspector>label>output{grid-column:2;grid-row:1}
.studio-columns>.studio-inspector,#app-shell #main #view-lab-studio .studio-columns>.studio-inspector{max-height:420px;padding:14px;border:1px solid #6d518b;border-radius:12px;background:linear-gradient(#131020df,#131020df),url('assets/phantom-cloud-surface-20261014.webp') center/cover}
.studio-columns,#app-shell #main #view-lab-studio .studio-columns{grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(290px,340px)}
.studio-settings-layout:has(.studio-settings-tabs:empty){grid-template-columns:minmax(0,1fr)}
.studio-settings-tabs:empty{display:none}
@media(max-width:1100px){.studio-columns,#app-shell #main #view-lab-studio .studio-columns{grid-template-columns:280px minmax(0,1fr)}.studio-columns>.studio-inspector,#app-shell #main #view-lab-studio .studio-columns>.studio-inspector{grid-column:1/-1;max-height:420px}}
@media(max-width:760px){.studio-columns,#app-shell #main #view-lab-studio .studio-columns{grid-template-columns:minmax(0,1fr)}.studio-columns>.studio-inspector{grid-column:auto}}
@media(forced-colors:active){.studio-columns>.studio-inspector{background-image:none!important}}
.studio-preset-demo{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;border-radius:4px;pointer-events:none}
.studio-clip-actions{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.studio-symbol-preview{display:grid;place-items:center;width:100%;height:52px;font-size:30px;background:linear-gradient(135deg,#342149,#171422);border-radius:5px}

.studio-project-card {position:relative;min-width:0;display:flex;}
body dialog.studio-dialog .studio-project-card > button:first-child {width:100%;height:auto;}
body dialog.studio-dialog .studio-project-more {position:absolute;top:12px;right:12px;width:32px;min-height:32px;padding:3px;background:#191324e8;border-radius:50%;}
.studio-project-more > span {display:none;}
.studio-dialog > a[download] {display:block;padding:12px;margin:10px 0;border:1px solid #7950bc;border-radius:6px;color:#f3edff;}

/* Right-click editing workspace; the main Studio inspector is unchanged. */
body dialog.studio-tools-popup{width:min(1140px,calc(100vw - 32px));max-width:1140px;max-height:92dvh;padding:24px;overflow:auto;background:linear-gradient(#14101de8,#14101de8),url('assets/phantom-cloud-surface-20261014.webp') center/cover}
.studio-tools-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;min-width:0}
.studio-tools-nav{display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:0}
.studio-tools-nav .studio-tools-heading{margin-bottom:12px}
.studio-tools-nav>button{display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border-radius:9px}
.studio-tools-nav>button.active{background:#7938cc;border-color:#b985ff}
.studio-tools-body{min-width:0;display:grid;gap:16px}
.studio-tools-preview{border:1px solid #6d518b;border-radius:12px;padding:12px;background:#0b0913}
.studio-tools-stage{position:relative;width:min(100%,620px);margin:auto;overflow:hidden;line-height:0}
.studio-tools-canvas{display:block;width:100%;height:auto;max-height:none;touch-action:none}
.studio-tools-outline{position:absolute;box-sizing:border-box;border:2px solid #c38dff;touch-action:none;cursor:move}
.studio-tools-outline[hidden]{display:none!important}
.studio-tools-transport{display:flex;align-items:center;gap:12px;margin-top:12px}
.studio-tools-transport input{min-width:50px;flex:1}
.studio-tools-time{font-size:12px;white-space:nowrap}
.studio-tools-caption{color:#c8bfd8;font-size:12px;margin:10px 0 0;line-height:1.5}
body dialog.studio-tools-popup .studio-popup-controls{max-height:none;overflow:visible;width:auto;border:1px solid #6d518b;border-radius:12px;padding:16px;background:#191326c9}
.studio-popup-controls>h3{margin:0 0 8px}
.studio-popup-controls .studio-preset-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.studio-popup-controls .studio-preset{min-width:0;padding:8px;min-height:100px}
.studio-popup-controls .studio-preset-demo{width:100%;height:auto;aspect-ratio:16/9}
.studio-tools-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:700px){.studio-tools-layout{grid-template-columns:minmax(0,1fr)}.studio-tools-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.studio-tools-nav .studio-tools-heading{grid-column:1/-1}.studio-tools-transport{flex-wrap:wrap}body dialog.studio-tools-popup{padding:16px;width:calc(100vw - 20px)}}

/* Subject mapping uses the actual image aspect; pointer positions never include letterboxing. */
.studio-subject-map{display:block;width:100%;height:auto;max-width:720px;max-height:none;margin:12px auto;touch-action:none;cursor:crosshair;border:1px solid #9c78ca;border-radius:8px}
.studio-subject-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.studio-subject-tabs [aria-pressed="true"]{background:#7938cc;border-color:#c99bff}
.studio-subject-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.studio-subject-fields input{width:100%;min-width:0;box-sizing:border-box}
.studio-subject-samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.studio-subject-samples figure{margin:0;padding:8px;border:1px solid #735594;border-radius:8px;background:#171222}
.studio-subject-samples canvas{display:block;width:100%;height:auto}
.studio-subject-samples figcaption{font-size:12px;padding-top:6px}
@media(max-width:600px){.studio-subject-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

.studio-template-player{position:relative;overflow:hidden;border:1px solid #7350a0;border-radius:10px;background:#100c1c;}
.studio-template-player canvas{display:block;width:100%;height:auto;margin:0;aspect-ratio:16/9;}
.studio-wizard-template .studio-template-play{position:absolute;left:12px;bottom:12px;width:44px;height:44px;margin:0;border-radius:50%;font-size:20px;background:#211338e8;color:#fff;}

.studio-crop-canvas{touch-action:none;cursor:grab}.studio-picture-confirm{padding:12px;border:1px solid #735594;border-radius:10px;margin-top:16px}.studio-subject-samples input[type=range]{width:100%;min-width:0}.studio-subject-samples label{display:block;font-size:13px;margin-top:8px}.studio-creation-wizard figure{margin-left:0;margin-right:0}
.studio-export-dialog .studio-export-preview{display:block;margin:12px auto;max-width:100%;max-height:260px;border:1px solid #a56cff66;border-radius:10px;background:#08080e}
.studio-export-settings,.studio-publish-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px 0}
.studio-export-settings label,.studio-publish-fields label{min-width:0}.studio-export-settings input,.studio-export-settings select,.studio-publish-fields input,.studio-publish-fields textarea,.studio-publish-fields select{width:100%;box-sizing:border-box}
.studio-publish-choice{display:flex!important;align-items:center;gap:12px;padding:14px;border:1px solid #9862d766;border-radius:10px;background:#28153866}.studio-publish-choice input{width:auto!important}
.studio-export-dialog [hidden]{display:none!important}.studio-export-dialog details{border-top:1px solid #9066bc66;padding:12px 0}.studio-export-dialog summary{cursor:pointer;color:#d6b5ff}
@media(max-width:600px){.studio-export-settings,.studio-publish-fields{grid-template-columns:1fr}}
.studio-export-footer{position:sticky;bottom:0;border-top:1px solid #9563bc66;background:#171024d9;padding:14px 0;text-align:right;backdrop-filter:blur(8px)}