.studio { --studio-coal: #151817; --studio-gold: #bd9950; --studio-ivory: #f8f5ec; }
.studio [hidden] { display: none !important; }
.studio-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: linear-gradient(125deg, #292519, #151817 68%); color: var(--studio-ivory);
  border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.studio-intro h2 { margin: .3rem 0; }
.studio-intro p:last-child { margin: .4rem 0 0; max-width: 54ch; color: #eee4ce; }
.studio-intro .eyebrow { color: #e1c181; }
.studio-spec {
  flex: 0 0 auto; display: grid; text-align: center; padding: .55rem .85rem; gap: .2rem;
  border: 1px solid #bd995075; border-radius: .75rem; color: #e1c181;
}
.studio-spec strong { font-size: 1.4rem; line-height: 1.2; }
.studio-spec span { font-size: .77rem; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.studio-editor, .studio-aside { display: grid; gap: 1rem; min-width: 0; }
.studio-card {
  background: #fffdfa; border: 1px solid #e0d8c6; border-radius: .9rem;
  padding: 1rem; min-inline-size: 0; margin: 0; color: var(--studio-coal);
}
.studio-card legend { padding: 0 .45rem; font-weight: 800; }
.studio-card h3 { margin: 0; font-size: 1.05rem; }
.studio-card label { display: grid; gap: .3rem; margin: .4rem 0 .75rem; font-weight: 700; }
.studio-card input:not([type=checkbox]), .studio-card textarea, .studio-card select {
  width: 100%; min-width: 0; border: 1px solid #d5c9b1; border-radius: .55rem;
  background: #fff; padding: .55rem .65rem; color: var(--studio-coal); font: inherit; font-weight: 400;
}
.studio-card textarea { resize: vertical; }
.studio-card p.small { margin: .55rem 0; }
.studio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .7rem; }
.studio-script label:last-child { grid-column: 1 / -1; }
.studio-templates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .2rem 0 .75rem; }
.studio-template {
  display: grid; align-content: center; gap: .2rem; min-height: 4rem; text-align: start;
  border-radius: .55rem; border: 2px solid transparent; padding: .45rem .55rem; color: #f8f5ec;
  font: inherit; cursor: pointer;
}
.studio-template span { color: #e6c584; font-size: .72rem; }
.studio-template b { font-size: .84rem; }
.studio-template[aria-pressed=true] { border-color: var(--studio-gold); outline: 1px solid var(--studio-gold); }
.studio-luxury { background: #2b251c; }
.studio-rental { background: #1b342d; }
.studio-investment { background: #192b34; }
.studio-land { background: #3b2d1f; }
.studio-photos { padding: 0; margin: .65rem 0; list-style: none; display: grid; gap: .4rem; }
.studio-photos li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center;
  gap: .55rem; border: 1px solid #eee6d5; padding: .35rem; border-radius: .6rem;
}
.studio-photos img { width: 3rem; height: 2.35rem; object-fit: cover; border-radius: .3rem; }
.studio-photos span { overflow-wrap: anywhere; font-size: .8rem; }
.studio-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.studio-photos button {
  color: #1d2420; background: #f4ecdc; border: 1px solid #dfd2b9; border-radius: .4rem;
  min-width: 1.8rem; height: 1.75rem; font: inherit; cursor: pointer;
}
.studio-photos button:disabled { opacity: .4; cursor: default; }
.studio-preview { display: grid; gap: .55rem; }
.studio-preview-head { display: flex; justify-content: space-between; align-items: center; gap: .65rem; }
.studio-pill { border-radius: 99px; background: #f2ead8; color: #55411d; font-size: .77rem; padding: .25rem .55rem; }
.studio-phone {
  aspect-ratio: 9 / 16; width: min(100%, 250px); justify-self: center;
  background: var(--studio-coal); overflow: hidden; border: 4px solid var(--studio-coal); border-radius: 1rem;
}
.studio-phone canvas, .studio-phone video { width: 100%; height: 100%; display: block; object-fit: contain; }
.studio-preview progress { width: 100%; accent-color: #9f7834; }
.studio-release-form { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.studio-release-form:disabled { opacity: .6; }
.studio-release-form label.studio-check { display: flex; align-items: flex-start; font-weight: 400; font-size: .88rem; }
.studio-check input { margin-top: .3rem; accent-color: #7a602b; }
.studio-releases { margin-top: 1rem; }
.studio-release { margin-top: .6rem; border: 1px solid #e8dfcc; border-radius: .55rem; padding: .7rem; }
.studio-release summary { cursor: pointer; line-height: 1.9; }
.studio-release-body { display: grid; grid-template-columns: minmax(100px, 150px) 1fr; gap: 1rem; padding-top: .65rem; }
.studio-release-body video { width: 100%; aspect-ratio: 9 / 16; background: var(--studio-coal); border-radius: .45rem; }
.studio-release-copy { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 870px) {
  .studio-layout { grid-template-columns: 1fr; }
  .studio-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 540px) {
  .studio-intro { padding: 1rem; flex-wrap: wrap; }
  .studio-aside, .studio-fields { grid-template-columns: 1fr; }
  .studio-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-release-body { grid-template-columns: 1fr; }
  .studio-release-body video { width: min(100%, 185px); }
}