/* Studio: one screen that fits the window. The stage takes what's left after the controls and timelines */
body.studio { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none }
.st { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) }
.st-main { display: flex; flex-direction: column; min-height: 0; min-width: 0 }
.st-none { padding: 24px }
.st button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent }
.st button:disabled { opacity: .35; cursor: default }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }

/* the stage */
.st-stagebox { flex: 1; min-height: 120px; display: grid; place-items: center; background: var(--wash); overflow: hidden }
.st-stage { display: block; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--line), 0 8px 30px color-mix(in srgb, var(--charcoal) 18%, transparent) }
.st-stage .sel { stroke-width: 1.5; opacity: .75 }
.st-stage .sel.one { stroke-dasharray: 5 4 }

/* the transport and the tools */
.st-transport { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--line) }
.ib { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer }
.ib:hover:not(:disabled) { background: var(--wash2) }
.ib.big { width: 44px; height: 44px; background: var(--ink); color: var(--bg) }
.ib.big:hover { background: var(--ink); opacity: .88 }
.st-clock { display: flex; flex-direction: column; min-width: 0; margin-left: 6px; line-height: 1.25 }
.st-time { font: 500 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.st-scene { font-size: 12px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.st-sp { flex: 1 }
.st-tplbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 7px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer }
.st-tplbtn:hover { background: var(--wash2) }
.st-tplbtn .ic { width: 18px; height: 18px }
.st-tplbtn span { display: none }
@media (min-width: 1000px) { .st-tplbtn { padding: 0 12px 0 9px; border: 1px solid var(--line); margin-right: 6px } .st-tplbtn span { display: inline } }
.st-frame { height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 500 13px var(--mono); cursor: pointer; margin-left: 4px }
.st-tools { flex: none; display: flex; align-items: center; gap: 6px; padding: 2px 10px 8px; overflow-x: auto; scrollbar-width: none }
.st-tools::-webkit-scrollbar { display: none }
.pill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer }
.pill .ic { width: 17px; height: 17px }
.pill:hover { background: var(--wash) }
.pill.dim { opacity: .45 }
.st-where { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 12px; color: var(--soft); white-space: nowrap; padding-left: 4px }
.st-where .ib { width: 30px; height: 30px }
.st-where .ic { width: 17px; height: 17px }

/* the scene's timeline */
.st-lanesbox { flex: none; border-top: 1px solid var(--line) }
.st-lanes { max-height: clamp(130px, 27dvh, 280px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin }
.st-lanes-in { display: grid; position: relative; align-content: start }
.st-lbl { position: sticky; left: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; align-items: center; padding: 0 6px; min-width: 0 }
.st-track { position: relative; border-bottom: 1px solid var(--line) }
.st-track.r-layer.on { background: var(--wash) }
.st-ruler { height: 22px; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none }
.st-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font: 10px/22px var(--mono); color: var(--soft); padding-left: 3px; pointer-events: none }
.st-endh { position: absolute; top: 0; height: 22px; width: 16px; margin-left: -8px; touch-action: none; cursor: ew-resize; z-index: 3 }
.st-endh::after { content: ''; position: absolute; left: 6px; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--ink) }
.st-now { width: 100% }
.st-lname { display: block; width: 100%; border: 0; background: transparent; padding: 4px 5px; border-radius: 6px; font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer }
.st-lname.on { background: var(--ink); color: var(--bg) }
.st-lname.dim { color: var(--soft); font-weight: 600; cursor: default }
.st-empty { padding: 8px; font-size: 12px; color: var(--soft); white-space: nowrap }
.st-key { position: absolute; top: 3px; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); background: var(--ink); cursor: pointer; z-index: 1 }
.st-key::before { content: ''; position: absolute; inset: -7px }
.st-key.small { top: 5px; width: 6px; height: 6px; margin-left: -3px; background: var(--soft) }
.st-clip { position: absolute; height: 24px; box-sizing: border-box; border-radius: 6px; background: var(--wash2); border: 1px solid var(--line); font-size: 12px; line-height: 22px; padding: 0 16px 0 8px; white-space: nowrap; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; min-width: 14px; z-index: 1 }
.st-clip span { display: block; overflow: hidden; text-overflow: ellipsis; pointer-events: none }
.st-clip.line { background: color-mix(in srgb, var(--ink) 12%, transparent) }
.st-clip.sfx { border-style: dashed }
.st-clip.card { border-radius: 4px; border-width: 2px }
.st-clip.cam, .st-clip.mood { padding: 0 9px; background: var(--bg) }
.st-clip.mood { height: 20px; line-height: 18px; border-radius: 999px }
.st-clip.on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.st-clip.moving { cursor: grabbing; z-index: 3; box-shadow: 0 4px 12px color-mix(in srgb, var(--charcoal) 25%, transparent) }
.st-trim { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; touch-action: none }
.st-trim::after { content: ''; position: absolute; right: 4px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: currentColor; opacity: .5 }
.st-past { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bg) 60%, transparent); border-left: 1px dashed var(--soft); pointer-events: none; z-index: 2 }
.st-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; z-index: 3 }

/* the film strip, with the soundtrack under it */
.st-filmbox { flex: none; border-top: 1px solid var(--line); padding: 8px 0 max(8px, env(safe-area-inset-bottom)) }
.st-film { overflow-x: auto; scrollbar-width: none }
.st-film::-webkit-scrollbar { display: none }
.st-film-in { position: relative; display: inline-flex; flex-direction: column; gap: 4px; min-width: 100%; box-sizing: border-box }
.st-blocks { display: flex; height: 56px }
.st-block { position: relative; flex: none; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x; transition: box-shadow .15s }
.st-block.on { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 1px var(--ink) }
.st-block.lift { z-index: 5; opacity: .92; box-shadow: 0 8px 22px color-mix(in srgb, var(--charcoal) 35%, transparent); transition: none }
.st-thumb { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none }
.st-thumb svg { display: block; width: 100%; height: 100% }
.st-bname { position: absolute; left: 5px; top: 3px; font-size: 11px; font-weight: 800; pointer-events: none }
.st-blen { position: absolute; right: 17px; bottom: 3px; font: 10px var(--mono); opacity: .8; pointer-events: none }
.st-edge { position: absolute; right: 0; top: 0; bottom: 0; width: 16px; cursor: ew-resize; touch-action: none }
.st-edge::after { content: ''; position: absolute; right: 5px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: currentColor; opacity: .7 }
.st-addscene { flex: none; width: 44px; margin-left: 6px; display: grid; place-items: center; border: 1px dashed var(--soft); border-radius: 7px; background: transparent; cursor: pointer }
.st-music { display: flex; align-items: center; gap: 6px; height: 22px; box-sizing: border-box; padding: 0 8px; border: 1px dashed var(--line); border-radius: 6px; font-size: 11px; color: var(--soft); white-space: nowrap; overflow: hidden }
.st-music .ic { width: 14px; height: 14px }
.st-fph { position: absolute; top: -4px; bottom: -2px; left: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; z-index: 6 }

/* the inspector: a column on a desk */
.st-insp { display: none }
@media (min-width: 1000px) {
  .st { grid-template-columns: minmax(0, 1fr) 340px }
  .st-insp { display: block; border-left: 1px solid var(--line); overflow: auto; padding: 16px 18px 40px }
  .st-insp-top { margin-bottom: 14px; font-size: 17px }
  .st-lanes { max-height: clamp(160px, 30dvh, 340px) }
}
.st-form { display: flex; flex-direction: column; gap: 14px }
.st-field { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.st-field > .st-in { align-self: stretch }
.st-flabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft) }
.st-in { font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); box-sizing: border-box; width: 100% }
.st-in:focus { outline: 2px solid var(--ink); outline-offset: -1px }
textarea.st-in { resize: vertical; line-height: 1.4 }
.st-in.num { width: 110px }
.st-seg { display: flex; flex-wrap: wrap; gap: 5px }
.st-seg button { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer }
.st-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.st-act { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: transparent; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; align-self: flex-start }
.st-act:hover { background: var(--wash) }
.st-act .ic { width: 17px; height: 17px }
.st-act.small { padding: 5px 10px; font-size: 12px }
.st-act.off { opacity: .35; pointer-events: none }
.st-act.bad { border-style: dashed }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.st-list { display: flex; flex-direction: column; align-self: stretch }
.st-li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600 }
.st-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--soft) }
.st-val { font: 500 13px var(--mono) }
.st-h { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 800 }

/* sheets: up from the bottom on a phone, a panel in the middle on a desk */
.st-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--charcoal) 40%, transparent); animation: st-fade .15s }
.st-sheet-in { width: 100%; max-width: 560px; max-height: 84dvh; overflow: auto; box-sizing: border-box; background: var(--bg); color: var(--ink); border-radius: 18px 18px 0 0; padding: 10px 16px max(18px, env(safe-area-inset-bottom)); animation: st-up .2s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain }
.st-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 16px }
.st-sheet button { font-family: inherit; color: inherit }
@media (min-width: 700px) { .st-sheet { align-items: center } .st-sheet-in { border-radius: 18px; padding-bottom: 20px } }
@keyframes st-fade { from { opacity: 0 } }
@keyframes st-up { from { transform: translateY(30px); opacity: 0 } }
.st-pick { display: flex; flex-direction: column; gap: 14px }
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px }
.st-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border: 1px solid var(--line); border-radius: 12px; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; min-width: 0 }
.st-card span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-card:hover { background: var(--wash) }
.st-card.on { box-shadow: 0 0 0 2px var(--ink); border-color: transparent }
.st-cardpic { width: 100%; height: 86px; color: var(--ink) }
.st-cardpic svg { width: 100%; height: 100%; display: block }
.st-go { padding: 13px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg) !important; font-size: 15px; font-weight: 700; cursor: pointer }
.st-go.ghost { background: transparent; color: var(--ink) !important; border: 1px solid var(--line) }
.st-form > .st-in { width: 100% }

/* templates: a card per film, each one playing itself */
.st-sheet-in.wide { max-width: 920px }
.st-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px }
.st-tpl { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: transparent; text-align: left; cursor: pointer; overflow: hidden }
.st-tpl:hover { background: var(--wash) }
.st-tpl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.st-tplpic { display: grid; place-items: center; height: 168px; padding: 10px; box-sizing: border-box; background: var(--wash) }
.st-tplpic svg { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 0 1px var(--line) }
.st-tplpic.tall svg { width: auto; aspect-ratio: 9 / 16 }
.st-tplpic:not(.tall) svg { height: auto; aspect-ratio: 16 / 9 }
.st-tplbody { display: flex; flex-direction: column; gap: 4px; padding: 0 11px }
.st-tplbody b { font-size: 14px; line-height: 1.25 }
.st-tplpitch { font-size: 12.5px; line-height: 1.4; color: var(--soft) }
.st-tplmeta { font: 500 11.5px var(--mono); color: var(--soft) }
@media (max-width: 420px) { .st-tpls { grid-template-columns: 1fr 1fr; gap: 8px } .st-tplpic { height: 132px; padding: 8px } .st-tplbody { padding: 0 9px } }

.st-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; z-index: 60; max-width: min(90vw, 460px); padding: 10px 15px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600; text-align: center; pointer-events: none; transition: opacity .2s, transform .2s }
.st-toast.on { opacity: 1; transform: translate(-50%, 0) }

/* a phone: the site's top bar kept thin, so the stage keeps its room (the pages are in its menu) */
@media (max-width: 640px) {
  body.studio .top { padding: 8px 12px }
}