/* 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 { position: relative; 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 }
.st-stage .hd { fill: var(--paper); stroke: currentColor; stroke-width: 1.5 }

/* 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; color: inherit; text-decoration: none }
.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.cue { border-style: dashed; cursor: pointer; touch-action: auto }
.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: 300px 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-range { width: 100%; max-width: 260px; height: 24px; margin: 0; background: transparent; accent-color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none }
.st-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--line) }
.st-range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line) }
.st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg) }
.st-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg) }
.st-range:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px }
.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 }
a.st-go, button.st-go:has(.ic) { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none }
.st-go .ic { width: 18px; height: 18px }
.st-progress { width: 100%; height: 8px; accent-color: var(--ink) }
.st-export-vid { width: 100%; max-height: 52vh; border-radius: 12px; background: #000 }
.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 }
}

/* signing in (in the top bar) and the save mark (beside the clock) */
.st-mark { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: 12px; font-weight: 600; cursor: default; flex: none }
.st-mark[hidden] { display: none }
.st-mark .ic { width: 17px; height: 17px }
.st-mark[data-state="saving"] .ic { animation: st-pulse 1s ease-in-out infinite alternate }
.st-mark[data-state="unsaved"], .st-mark[data-state="too-big"] { color: inherit }
.st-mark[data-state="unsaved"] { cursor: pointer }
@keyframes st-pulse { to { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .st-mark[data-state="saving"] .ic { animation: none; opacity: .5 } }

/* sounds: made clips, stale ones, the sounds sheet */
.st-clip.made { border-left: 3px solid var(--ink) }
.st-clip.on.made { border-left-color: var(--bg) }
.st-stale { position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); pointer-events: none }
.st-clip.on .st-stale { background: var(--bg) }
.st-vlist { display: flex; flex-direction: column; gap: 0; align-self: stretch }
.st-vi { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line) }
.st-vi.on { box-shadow: inset 3px 0 0 var(--ink); padding-left: 10px }
.st-vi b { font-size: 14px }
.st-vi small { display: block; font-size: 12px; color: var(--soft); font-weight: 500 }
.st-vi .st-row { justify-content: flex-end }
.st-vi .st-in { grid-column: 1 / -1; font-size: 13px; padding: 6px 9px }
.st-filter { display: flex; flex-direction: column; gap: 8px; align-self: stretch }
.st-busy { font: 500 12.5px var(--mono); color: var(--soft) }

/* the library: a screen of its own on a phone, the left panel on a desk */
.st [hidden], .st-sheet [hidden] { display: none !important }
.pill.bad { border-style: dashed }
.st-side { display: none }
.st-lib { position: absolute; inset: 0; z-index: 40; background: var(--bg); overflow: auto; overscroll-behavior: contain }
.st-libin { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px max(24px, env(safe-area-inset-bottom)); max-width: 920px; margin: 0 auto; box-sizing: border-box }
.st-libtop { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 0; background: var(--bg) }
.st-libtop b { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-libsec { display: flex; flex-direction: column; gap: 10px }
.st-carry { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: transparent; text-align: left; cursor: pointer }
.st-carry .st-fcpic { width: 72px; flex: none }
.st-carrybody { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.st-recents { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none }
.st-recents::-webkit-scrollbar { display: none }
.st-recents .st-fc { flex: none; width: 128px }
.st-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 10px }
.st-fc { position: relative; min-width: 0 }
.st-fcopen { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer }
.st-fcpic { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line) }
.st-fcpic svg { display: block; width: 100%; height: 100% }
.st-fcname, .st-fcmeta { padding-right: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-fcname { font-size: 13.5px; font-weight: 700 }
.st-fcmeta { font: 500 11.5px var(--mono); color: var(--soft) }
.st-fc .st-fcmore { position: absolute; right: -4px; bottom: 6px; width: 32px; height: 32px }
.st-fc.on .st-fcpic { box-shadow: inset 0 0 0 2px var(--ink) }
.st-badge { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 700; pointer-events: none }
.st-frow { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line) }
.st-frow.sub { padding-left: 22px }
.st-fopen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 2px; border: 0; background: transparent; text-align: left; font-size: 14px; font-weight: 600; cursor: pointer }
.st-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-fopen small, .st-binrow small { color: var(--soft); font: 500 12px var(--mono) }
.st-fopen.on { font-weight: 800 }
.st-binrow { padding: 8px 0; gap: 10px }
.st-moves { gap: 0 }
.st-moveto { border-bottom: 1px solid var(--line) }
.st-moveto.sub { padding-left: 24px }
.st-warn { font-weight: 700 }
.st-newopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.st-newopt { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: transparent; text-align: left; cursor: pointer }
.st-newopt:hover { background: var(--wash) }
.st-newopt b { display: block; font-size: 14px }
.st-newopt small { display: block; font-size: 12px; color: var(--soft) }
.st-newopt.off { opacity: .45; cursor: default }
.st-menu .st-act { align-self: stretch }
a.st-act { color: inherit; text-decoration: none }
@media (min-width: 1000px) {
  .st-lib, .st-filmsbtn { display: none }
  .st-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid var(--line) }
  .st-tabs { flex: none; display: flex; padding: 6px 6px 0; border-bottom: 1px solid var(--line) }
  .st-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 11.5px; font-weight: 700; color: var(--soft); cursor: pointer }
  .st-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink) }
  .st-pane { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 40px }
  .st-pane .st-libin { padding: 0; max-width: none }
  .st-pane[data-pane="chars"], .st-pane[data-pane="tpls"], .st-pane[data-pane="sounds"] { padding-top: 12px }
  .st-side .st-fgrid, .st-side .st-tpls { grid-template-columns: 1fr 1fr; gap: 8px }
  .st-side .st-tplpic { height: 120px; padding: 8px }
  .st-side .st-tplpitch { display: none }
  .st-side .st-recents .st-fc { width: 110px }
}
.st-script { font-family: ui-monospace, Menlo, monospace; font-size: 13px; min-height: 220px }
.st-bad { margin: 6px 0 0; padding-left: 18px; font-weight: 400 }

/* a toggle that's on, like Close up */
.st-act[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }