@font-face {
  font-family:Studio;
  src:local("Segoe UI Variable"),local("Segoe UI");
  font-display:swap
}
* {
  box-sizing:border-box
}
:root {
  font-family:Studio,"Segoe UI",sans-serif;
  font-size:14px;
  color:#273247;
  background:#f4f6fa;
  --ink:#202a40;
  --muted:#768197;
  --purple:#6754cf;
  --line:#e4e8f0;
  --sidebar:#182136;
  --focus:#7867df
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.45;
  cursor:not-allowed
}
button,a {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,article:focus-visible,tr:focus-visible {
  outline:3px solid #a196ed;
  outline-offset:3px
}
button svg,a svg {
  width:17px;
  height:17px;
  flex-shrink:0
}
svg {
  width:21px;
  height:21px;
  flex-shrink:0
}
button {
  border:0
}
a {
  color:var(--purple)
}
#app {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:222px;
  flex-shrink:0;
  background:var(--sidebar);
  color:#c1cbdf;
  padding:30px 17px 20px;
  position:fixed;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
  z-index:10
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#f6f7ff;
  text-decoration:none;
  padding:0 7px;
  margin-bottom:34px;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.5px
}
.brand small {
  display:block;
  font-size:10px;
  color:#a7b2ca;
  font-weight:400;
  letter-spacing:.3px;
  margin-top:3px
}
.brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:38px;
  color:#bdb1ff
}
.brand-mark svg {
  width:33px;
  height:33px
}
.new-project {
  background:#7561db;
  color:white;
  border-radius:7px;
  padding:12px 16px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 4px 12px #090f2326
}
.new-project:hover {
  background:#8170e3
}
.sidebar-label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#9ba8c4;
  margin:31px 9px 14px
}
.sidebar-label span {
  background:#ffffff0b;
  border-radius:4px;
  padding:0 5px
}
.project-list {
  overflow-y:auto;
  flex:1
}
.project-item {
  display:flex;
  width:100%;
  text-align:left;
  align-items:center;
  gap:10px;
  background:transparent;
  color:#afbad1;
  border-radius:7px;
  padding:12px 11px;
  margin-bottom:5px
}
.project-item svg {
  width:18px;
  height:18px
}
.project-item span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:550
}
.project-item small {
  display:block;
  color:#8897b4;
  font-size:10px;
  font-weight:400;
  margin-top:5px
}
.project-item.active {
  background:#30354f;
  color:#eeeaff;
  box-shadow:inset 3px 0 #a89afa
}
.project-item.active small {
  color:#b0a9d5
}
.project-item:hover {
  background:#ffffff09
}
.sidebar-empty {
  font-size:12px;
  color:#8f9eb9;
  padding:0 9px;
  line-height:1.6
}
.sidebar-bottom {
  padding-top:24px
}
.connection-mini {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 12px;
  border-top:1px solid #ffffff0e
}
.connection-mini span:not(.dot) {
  font-size:12px;
  color:#d4dced
}
.connection-mini small {
  display:block;
  color:#8e9eb9;
  font-size:10px;
  margin-top:5px
}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7a8498;
  flex-shrink:0
}
.dot.on {
  background:#6ac5a4
}
.nav-button {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 12px;
  background:none;
  color:#aebbd2;
  font-size:12px;
  text-align:left;
  border-radius:6px
}
.nav-button:hover {
  background:#ffffff0a;
  color:white
}
.local-note {
  display:flex;
  align-items:center;
  gap:7px;
  margin:24px 12px 0;
  font-size:10px;
  color:#7e8eab
}
.local-note svg {
  width:13px;
  height:13px
}
.workspace {
  margin-left:222px;
  flex:1;
  min-width:0;
  padding-bottom:76px
}
.topbar {
  height:72px;
  border-bottom:1px solid var(--line);
  background:#ffffffb0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px
}
.breadcrumbs {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:12px;
  color:#8590a3
}
.breadcrumbs svg {
  width:12px;
  height:12px;
  color:#a7b0c1
}
.breadcrumbs span {
  color:#4e5a70
}
.top-actions {
  display:flex;
  align-items:center;
  gap:20px
}
.top-actions>span:first-child {
  font-size:10px;
  color:#8b94a5
}
.avatar {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid #ddd9f2;
  background:#eeebfa;
  border-radius:50%;
  font-size:10px;
  color:#6958a5
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:5px;
  background:transparent;
  color:#7c879b;
  padding:5px
}
.icon-button:hover {
  background:#eaeef5;
  color:#34415d
}
.project-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 36px 23px;
  gap:20px
}
.project-type {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#7b7b99;
  margin-bottom:8px
}
.project-type svg {
  width:14px;
  height:14px
}
.project-heading h1 {
  margin:0;
  font-size:29px;
  letter-spacing:-.8px;
  color:var(--ink);
  font-weight:650
}
.title-button {
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  background:none;
  color:inherit;
  text-align:left;
  padding:0
}
.project-heading-main p {
  font-size:11px;
  color:#8a93a5;
  margin:9px 0 0
}
.project-heading-main p span {
  margin:0 9px;
  color:#b0b8c9
}
.heading-actions {
  display:flex;
  gap:10px;
  align-items:center
}
.primary,.secondary,.quiet,.danger-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 15px;
  border-radius:6px;
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap
}
.primary {
  background:var(--purple);
  color:white;
  border:1px solid var(--purple);
  box-shadow:0 2px 4px #5a3ca011
}
.primary:hover {
  background:#5946bd
}
.secondary {
  background:white;
  color:#536078;
  border:1px solid #dfe4ed;
  box-shadow:0 1px 2px #19213c03
}
.secondary:hover {
  background:#f7f7fc;
  border-color:#c9c5e4
}
.quiet {
  background:none;
  color:#768198;
  font-weight:500
}
.quiet:hover {
  background:#e9edf5
}
.small {
  font-size:11px;
  padding:8px 11px
}
.small svg {
  width:14px;
  height:14px
}
.full {
  width:100%
}
.danger {
  color:#b8656d
}
.danger-button {
  background:#ad4c58;
  color:white
}
.project-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 36px;
  border-bottom:1px solid #dfe4ef;
  height:48px
}
.tabs {
  display:flex;
  height:100%;
  gap:24px
}
.tabs button {
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  color:#8a94a7;
  font-size:12px;
  padding:0 0 13px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px
}
.tabs button svg {
  width:15px;
  height:15px
}
.tabs button.selected {
  color:#6351bd;
  border-bottom-color:#7564cc;
  font-weight:600
}
.studio-layout {
  display:grid;
  grid-template-columns:minmax(340px,1fr) 310px;
  min-height:calc(100vh - 311px);
  margin:0 0 0 36px
}
.board-area {
  padding:25px 29px 35px 0;
  min-width:0
}
.board-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  gap:12px
}
.board-toolbar h2 {
  font-size:14px;
  margin:0 0 6px;
  color:#3b475e;
  font-weight:600
}
.board-toolbar>div>span {
  font-size:11px;
  color:#969eb0
}
.shot-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px
}
.shot-card {
  border-radius:9px;
  background:white;
  border:1px solid #e1e5ee;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  min-width:0
}
.shot-card:hover {
  border-color:#b8b0df;
  box-shadow:0 3px 12px #3432530b
}
.shot-card.selected {
  border:1px solid #8d7ddb;
  box-shadow:0 0 0 2px #7463d01a
}
.shot-preview {
  aspect-ratio:16/9;
  position:relative;
  background:#e8ecf3;
  overflow:hidden;
  border-bottom:1px solid #e9ecf3
}
.shot-card:nth-child(3n+2) .shot-preview {
  background:#e9e8f1
}
.shot-card:nth-child(3n+3) .shot-preview {
  background:#e4edf0
}
.shot-preview>img,.shot-preview>video {
  width:100%;
  height:100%;
  object-fit:cover
}
.shot-number {
  position:absolute;
  top:10px;
  left:11px;
  background:#ffffffe0;
  min-width:26px;
  height:23px;
  padding:4px 6px;
  border-radius:4px;
  color:#5c6780;
  font-size:10px;
  text-align:center;
  font-weight:600
}
.duration {
  position:absolute;
  right:10px;
  bottom:10px;
  background:#263149b5;
  color:white;
  border-radius:4px;
  padding:4px 6px;
  font-size:9px;
  letter-spacing:.3px
}
.composition-guide {
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:9px;
  color:#9ba6bb;
  isolation:isolate
}
.composition-guide>svg {
  width:30px;
  height:30px;
  opacity:.6
}
.composition-guide>span:last-child {
  font-size:10px
}
.composition-guide:before {
  content:'';
  position:absolute;
  inset:19% 17%;
  border:1px solid #bcc7da55;
  z-index:-1
}
.guide-h {
  position:absolute;
  left:0;
  right:0;
  top:33.33%;
  height:33.33%;
  border-block:1px solid #bec8d522;
  z-index:-1
}
.guide-v {
  position:absolute;
  inset:0 33.33%;
  border-inline:1px solid #bec8d522;
  z-index:-1
}
.reference-label {
  position:absolute;
  bottom:9px;
  left:10px;
  background:#ffffffdf;
  border-radius:4px;
  color:#615b7c;
  font-size:9px;
  padding:4px 7px
}
.shot-card-info {
  padding:15px
}
.shot-title-line {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center
}
.shot-title-line h3 {
  font-size:13px;
  font-weight:600;
  letter-spacing:-.1px;
  margin:0;
  color:#36415a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.shot-title-line>svg {
  width:13px;
  height:13px;
  color:#a2a9b9
}
.shot-card-info>p {
  font-size:11px;
  line-height:1.65;
  color:#8993a5;
  margin:9px 0 15px;
  min-height:36px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.shot-card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px
}
.shot-card-footer>span:last-child {
  font-size:9px;
  color:#98a1b1
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#f1f3f7;
  border:1px solid #e6eaf1;
  color:#8c96a8;
  border-radius:4px;
  padding:4px 6px;
  font-size:9px;
  line-height:1.2;
  white-space:nowrap
}
.pill>span {
  width:4px;
  height:4px;
  background:currentColor;
  border-radius:50%
}
.pill.done {
  background:#edf8f3;
  border-color:#d8ede4;
  color:#4f9178
}
.pill.running {
  background:#f0edfc;
  border-color:#e0d8f8;
  color:#7863c8
}
.pill.queued {
  background:#fff8e9;
  border-color:#f5e9c8;
  color:#ad8b40
}
.pill.failed,.pill.interrupted {
  background:#fcf0f1;
  border-color:#f3dfe2;
  color:#b26473
}
.add-shot-tile {
  border:1px dashed #cfd6e4;
  border-radius:9px;
  background:#ffffff3b;
  min-height:239px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-direction:column;
  color:#929bb0;
  font-size:11px
}
.add-shot-tile svg {
  width:24px;
  height:24px;
  border:1px solid #dce1eb;
  border-radius:50%;
  padding:4px;
  box-sizing:content-box;
  background:#ffffff94
}
.add-shot-tile:hover {
  background:#f0eef9;
  color:#7c6fb5;
  border-color:#b3a8df
}
.workflow-note {
  display:flex;
  gap:12px;
  padding:19px;
  margin-top:24px;
  border:1px solid #dce4ee;
  background:#eff3f9;
  border-radius:7px;
  color:#8b93aa
}
.workflow-note>svg {
  width:20px;
  height:20px
}
.workflow-note strong {
  font-size:11px;
  color:#69788d;
  font-weight:600
}
.workflow-note p {
  font-size:11px;
  line-height:1.7;
  margin:6px 0 0;
  max-width:65ch
}
.inspector {
  border-left:1px solid var(--line);
  background:#fcfdff;
  display:flex;
  flex-direction:column;
  min-width:0;
  position:sticky;
  top:0;
  height:calc(100vh - 76px);
  max-height:900px
}
.inspector-top {
  padding:23px 22px 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #edf0f5
}
.inspector-top span {
  font-size:10px;
  color:#a1a8b8
}
.inspector-top h2 {
  font-size:14px;
  color:#48536a;
  margin:6px 0 0;
  font-weight:600
}
.inspector-top>div:last-child {
  display:flex
}
.inspector-scroll {
  padding:21px 22px;
  overflow-y:auto;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:#d9dfeb transparent
}
label {
  font-size:11px;
  color:#657087;
  display:block;
  margin:0 0 16px;
  font-weight:500
}
input:not([type=radio]),textarea,select {
  display:block;
  width:100%;
  background:white;
  border:1px solid #dce2ed;
  border-radius:5px;
  margin-top:7px;
  padding:10px 11px;
  color:#536078;
  font-size:12px;
  outline:none;
  line-height:1.5;
  min-width:0
}
input:focus,textarea:focus,select:focus {
  border-color:#9b8bdc;
  box-shadow:0 0 0 2px #9b8bdc15
}
input::placeholder,textarea::placeholder {
  color:#a2aabc
}
textarea {
  resize:vertical;
  min-height:50px
}
select {
  padding-right:20px
}
.form-caption {
  font-size:10px;
  line-height:1.65;
  color:#9aa3b5;
  margin:-6px 0 18px
}
.reference-box {
  border:1px dashed #d7dfeb;
  border-radius:6px;
  background:#f9fbfe;
  margin-top:8px
}
.upload-button {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:14px 11px;
  background:none;
  color:#98a2b7
}
.upload-button>svg {
  width:17px;
  height:17px
}
.upload-button>span {
  font-size:10px;
  flex:1;
  text-align:left
}
.upload-button>svg:last-child {
  width:14px;
  height:14px
}
.reference-box>select {
  font-size:10px;
  border:0;
  border-top:1px solid #e5eaf3;
  border-radius:0;
  margin:0;
  background:transparent
}
.reference-file {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px
}
.reference-file>img {
  width:34px;
  height:34px;
  border-radius:3px;
  object-fit:cover
}
.reference-file>span {
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1
}
.field-divider {
  height:1px;
  background:#e8ecf3;
  margin:23px 0
}
.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}
.provider-detail {
  display:flex;
  gap:8px;
  font-size:10px;
  padding:12px;
  background:#f2effa;
  color:#7d6da6;
  border-radius:5px;
  margin:0 0 16px;
  word-break:break-word
}
.provider-detail svg {
  width:15px;
  height:15px
}
.provider-detail small {
  display:block;
  font-size:9px;
  margin-top:5px;
  line-height:1.6;
  color:#998eb1
}
.inspector details {
  border-top:1px solid var(--line);
  padding:15px 0
}
.inspector details summary {
  font-size:11px;
  color:#8590a5;
  cursor:pointer;
  margin-bottom:15px
}
.inspector-bottom {
  padding:15px 20px 11px;
  border-top:1px solid #e9edf5;
  background:#fcfdff
}
.inspector-bottom>.secondary {
  margin-top:8px
}
.inspector-tools {
  display:flex;
  justify-content:space-between;
  margin-top:9px
}
.inspector-tools .quiet {
  font-size:10px
}
.inspector-tools svg {
  width:12px;
  height:12px
}
.inspector-empty {
  display:grid;
  place-items:center;
  align-content:center;
  height:300px;
  color:#a2adbf;
  font-size:12px;
  text-align:center;
  padding:30px
}
.takes {
  border-top:1px solid var(--line);
  padding-top:12px
}
.takes h3 {
  font-size:12px;
  font-weight:600
}
.take {
  border:1px solid var(--line);
  padding:10px;
  border-radius:5px;
  margin:10px 0
}
.take>p {
  font-size:10px;
  color:#8c97ab;
  line-height:1.6
}
.take-media video,.take-media img {
  width:100%;
  max-height:240px;
  object-fit:contain;
  background:#182136;
  border-radius:4px
}
.take-media audio {
  width:100%
}
.take-media a {
  display:block;
  font-size:11px;
  margin:9px 0
}
.text-link {
  font-size:11px;
  color:#7a68bc;
  background:none;
  padding:0;
  text-align:left
}
.take-media .text-link {
  margin:3px 0 12px
}
.queue-bar {
  position:fixed;
  bottom:0;
  left:222px;
  right:0;
  height:76px;
  background:#fff;
  border-top:1px solid #e1e6ef;
  display:flex;
  align-items:center;
  padding:0 30px 0 35px;
  gap:25px;
  z-index:11;
  box-shadow:0 -3px 14px #1a223803
}
.queue-summary {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:190px;
  background:none;
  text-align:left;
  color:#57637a
}
.queue-summary>span:last-child {
  font-size:12px;
  font-weight:550
}
.queue-summary small {
  font-size:10px;
  display:block;
  color:#98a2b5;
  margin-top:5px;
  font-weight:400
}
.queue-icon {
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border:1px solid #e5e7f0;
  background:#f4f3fa;
  border-radius:7px;
  color:#9485c7
}
.queue-icon svg {
  width:18px;
  height:18px
}
.queue-current {
  flex:1;
  font-size:11px;
  color:#a4adbc;
  text-align:center
}
.queue-bar>.quiet {
  font-size:10px
}
.empty-board {
  min-height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  color:#a0aabd;
  padding:35px
}
.empty-board>svg {
  width:40px;
  height:40px;
  color:#b4bbd0;
  stroke-width:1
}
.empty-board h3 {
  font-size:18px;
  font-weight:550;
  color:#7c87a0;
  margin:18px 0 0
}
.empty-board p {
  font-size:12px;
  line-height:1.7;
  margin:10px 0 23px;
  max-width:40ch
}
.no-inspector {
  grid-template-columns:1fr;
  margin-right:7px
}
.asset-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px
}
.asset-card {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:white;
  padding:0 12px 12px
}
.asset-preview {
  height:160px;
  margin:0 -12px 12px;
  background:#e7ebf3;
  display:flex;
  align-items:center;
  justify-content:center
}
.asset-preview img,.asset-preview video {
  width:100%;
  height:100%;
  object-fit:contain
}
.asset-preview audio {
  max-width:100%
}
.asset-card>strong {
  font-size:11px;
  font-weight:500;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.asset-card>span {
  font-size:10px;
  color:#97a0b2;
  display:block;
  margin-top:6px
}
.asset-card>a {
  padding-left:0;
  margin-top:8px
}
.table-wrap {
  overflow:auto
}
.shots-table {
  border-collapse:collapse;
  width:100%;
  font-size:11px
}
.shots-table th {
  color:#949fb4;
  text-align:left;
  font-size:10px;
  font-weight:500;
  padding:10px;
  border-bottom:1px solid var(--line)
}
.shots-table td {
  padding:15px 10px;
  border-bottom:1px solid var(--line);
  color:#8793a8
}
.shots-table td:nth-child(2) {
  width:50%
}
.shots-table strong {
  color:#59647d;
  font-size:12px;
  font-weight:550
}
.shots-table p {
  max-width:35ch;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
  margin-bottom:0;
  color:#98a2b6
}
.shots-table tr {
  cursor:pointer
}
.shots-table tbody tr:hover {
  background:#f0eef8
}
.shots-table tr.selected {
  background:#edebf7
}
.welcome {
  max-width:1100px;
  margin:0 auto;
  padding:53px 48px;
  text-align:center
}
.welcome h1 {
  font-size:37px;
  letter-spacing:-1.3px;
  font-weight:600;
  color:#35415a;
  margin:14px 0
}
.welcome>p {
  max-width:53ch;
  font-size:14px;
  line-height:1.8;
  color:#8994a9;
  margin:0 auto 25px
}
.welcome-types {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
  margin-top:55px
}
.welcome-types>button {
  background:#fff;
  border:1px solid #e1e6f0;
  border-radius:8px;
  min-height:145px;
  padding:21px 15px;
  text-align:left;
  color:#8893a8
}
.welcome-types svg {
  color:#9b8aca;
  width:22px;
  height:22px
}
.welcome-types strong {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#5d6982;
  margin:15px 0 8px
}
.welcome-types span {
  font-size:10px;
  line-height:1.7;
  display:block
}
.welcome-types>button:hover {
  border-color:#a89cda;
  background:#fdfcfe
}
.welcome .welcome-footnote {
  font-size:10px;
  color:#a6aebd;
  margin-top:28px
}
.welcome-illustration {
  width:185px;
  height:130px;
  margin:0 auto;
  position:relative
}
.scene-sheet {
  position:absolute;
  width:125px;
  height:95px;
  background:#fff;
  border:1px solid #cfd4e7;
  border-radius:5px;
  box-shadow:0 6px 18px #3e44630a
}
.scene-sheet.back {
  top:0;
  right:2px;
  transform:rotate(12deg);
  background:#e7e4f5;
  border-color:#d8d2ee
}
.scene-sheet.front {
  left:7px;
  bottom:6px;
  transform:rotate(-5deg);
  padding:9px
}
.frame-corners {
  border:1px solid #dfdfec;
  height:50px;
  background:#f5f4fa;
  display:grid;
  place-items:center
}
.frame-corners svg {
  width:25px;
  height:25px;
  color:#a99dcc
}
.sheet-line {
  height:3px;
  width:68%;
  background:#e4e6ee;
  margin-top:8px
}
.sheet-line.short {
  width:45%;
  margin-top:4px
}
.scene-dot {
  width:18px;
  height:18px;
  background:#c5bcdf;
  border:5px solid #eeeaf8;
  position:absolute;
  right:7px;
  bottom:0;
  border-radius:50%
}
#toast {
  position:fixed;
  bottom:94px;
  left:calc(50% + 90px);
  transform:translate(-50%,10px);
  z-index:100;
  background:#313a53;
  color:white;
  padding:12px 19px;
  border-radius:7px;
  font-size:12px;
  box-shadow:0 5px 20px #14204422;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s,transform .15s;
  max-width:min(600px,90vw);
  line-height:1.65
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
#toast.error {
  background:#854c5b
}
dialog {
  border:1px solid #e1e5ef;
  padding:0;
  border-radius:12px;
  width:min(520px,94vw);
  max-height:88vh;
  box-shadow:0 30px 120px #10183055;
  color:#46526c
}
dialog.wide {
  width:min(820px,94vw)
}
dialog::backdrop {
  background:#16213970;
  backdrop-filter:blur(3px)
}
.modal-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 26px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#fff;
  z-index:2
}
.modal-heading h2 {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.4px;
  margin:0;
  color:#38435d
}
.modal-body {
  padding:24px 26px
}
.modal-body>p {
  font-size:12px;
  line-height:1.8
}
.modal-intro {
  color:#8993a8;
  font-size:12px;
  line-height:1.8;
  margin:0 0 24px;
  max-width:70ch
}
.modal-footer {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:20px;
  border-top:1px solid var(--line);
  margin-top:22px
}
.modal-footer>span {
  flex:1;
  font-size:10px;
  color:#9b95b0
}
.type-options {
  display:flex;
  flex-direction:column;
  gap:9px
}
.type-option {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  border:1px solid var(--line);
  padding:12px;
  border-radius:6px;
  cursor:pointer
}
.type-option:has(input:checked) {
  background:#f5f2fc;
  border-color:#ada0d8
}
.type-option input {
  accent-color:var(--purple)
}
.type-option>svg {
  color:#9d8fc1;
  width:19px;
  height:19px
}
.type-option strong {
  font-size:12px;
  font-weight:550;
  color:#61708b
}
.type-option small {
  display:block;
  font-size:10px;
  color:#9aA3b4;
  margin-top:4px
}
.settings-section {
  padding:0 0 24px;
  margin:0 0 25px;
  border-bottom:1px solid var(--line)
}
.settings-title {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px
}
.settings-title>svg {
  width:24px;
  height:24px;
  color:#a396cc
}
.settings-title>div {
  flex:1
}
.settings-title h3 {
  font-size:14px;
  font-weight:600;
  margin:0 0 5px
}
.settings-title p {
  font-size:11px;
  margin:0;
  color:#929db1
}
.connection-result {
  font-size:11px;
  line-height:1.8;
  color:#969fb1;
  margin:13px 0 20px;
  overflow-wrap:anywhere
}
.workflow-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  gap:16px
}
.workflow-row strong {
  font-size:12px;
  font-weight:550;
  display:block
}
.workflow-row small {
  display:block;
  font-size:10px;
  color:#9da6b6;
  margin-top:5px
}
.workflow-settings {
  border-bottom:0;
  margin:0;
  padding:0
}
.workflow-settings>.form-caption {
  margin-top:18px
}
.mapping-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.mapping-grid select {
  font-size:10px
}
.mapping-grid option {
  padding:3px
}
.cloud-note {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#a294bd;
  line-height:1.6;
  align-self:center
}
.cloud-note>svg {
  width:22px;
  height:22px
}
.plan-review {
  padding-top:20px;
  margin-top:20px;
  border-top:1px solid var(--line)
}
.plan-review h3 {
  font-size:15px;
  font-weight:600
}
.plan-review>p {
  font-size:11px;
  color:#969eb0
}
.plan-shot {
  display:flex;
  gap:15px;
  padding:17px 0;
  border-bottom:1px solid var(--line)
}
.plan-shot>span {
  font-size:12px;
  color:#ad9cce;
  padding-top:3px
}
.plan-shot strong {
  font-size:12px;
  font-weight:600
}
.plan-shot p {
  font-size:11px;
  line-height:1.8;
  color:#909aaf;
  max-width:75ch
}
.plan-shot small {
  font-size:10px;
  color:#a998be
}
.plan-review>button {
  margin-top:20px
}
.queue-modal-top {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.queue-modal-top>p {
  font-size:11px;
  color:#949eb1
}
.queue-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.queue-row>div {
  flex:1;
  min-width:0
}
.queue-provider {
  color:#a99acb
}
.queue-row strong {
  font-size:12px;
  font-weight:550
}
.queue-row p {
  font-size:11px;
  line-height:1.65;
  color:#919bae;
  margin:6px 0
}
.queue-row small {
  display:block;
  font-size:9px;
  line-height:1.6;
  color:#a6aebe;
  overflow-wrap:anywhere
}
.modal-empty {
  text-align:center;
  padding:45px;
  color:#a8b0c0
}
.modal-empty>svg {
  width:34px;
  height:34px
}
.modal-empty h3 {
  font-size:17px;
  font-weight:500
}
.modal-empty p {
  font-size:12px;
  line-height:1.7
}
.help-steps {
  padding-left:22px;
  margin:0
}
.help-steps li {
  padding:0 0 15px 8px;
  color:#9f96bd
}
.help-steps strong {
  font-size:12px;
  color:#65728b;
  font-weight:600
}
.help-steps p {
  font-size:11px;
  color:#929cb1;
  line-height:1.8
}
.render-line {
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  width:100%;
  background:linear-gradient(90deg,#b7aaee,#7561db,#b7aaee);
  background-size:200% 100%;
  animation:render 2s linear infinite
}
@keyframes render {
  to {
    background-position:-200% 0
  }
}
@media(min-width:1600px) {
  .studio-layout {
    grid-template-columns:minmax(340px,1fr) 350px
  }
  .shot-grid {
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr))
  }
  .inspector-scroll {
    padding:24px 27px
  }
  .inspector-top {
    padding-inline:27px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:190px;
    padding-inline:13px
  }
  .workspace {
    margin-left:190px
  }
  .queue-bar {
    left:190px
  }
  .topbar {
    padding-inline:25px
  }
  .project-heading {
    padding:25px
  }
  .project-nav {
    margin-inline:25px
  }
  .studio-layout {
    margin-left:25px;
    grid-template-columns:minmax(280px,1fr) 285px
  }
  .board-area {
    padding-right:23px
  }
  .heading-actions .secondary {
    font-size:11px;
    padding:10px
  }
  .project-heading h1 {
    font-size:25px
  }
  .shot-grid {
    gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
  }
  .queue-current {
    display:none
  }
  .queue-summary {
    flex:1
  }
  .welcome-types {
    grid-template-columns:repeat(3,1fr)
  }
  .welcome {
    padding-inline:35px
  }
  .tabs {
    gap:18px
  }
  .project-nav>.quiet {
    font-size:10px
  }
}
@media(max-width:950px) {
  .sidebar {
    width:170px
  }
  .brand {
    font-size:18px;
    gap:7px
  }
  .brand-mark svg {
    width:27px
  }
  .workspace {
    margin-left:170px
  }
  .queue-bar {
    left:170px
  }
  .studio-layout {
    grid-template-columns:minmax(230px,1fr) 270px;
    margin-left:20px
  }
  .project-heading {
    padding:23px 20px;
    align-items:flex-start
  }
  .project-heading h1 {
    font-size:23px
  }
  .heading-actions {
    flex-direction:column;
    align-items:stretch
  }
  .project-heading-main p {
    max-width:230px;
    line-height:1.8
  }
  .project-nav {
    margin-inline:20px
  }
  .project-nav>.quiet {
    font-size:0;
    gap:0
  }
  .project-nav>.quiet svg {
    width:17px;
    height:17px
  }
  .board-area {
    padding-right:18px
  }
  .board-toolbar {
    align-items:flex-start
  }
  .board-toolbar>div>span {
    display:none
  }
  .inspector-scroll {
    padding:18px
  }
  .inspector-top {
    padding:22px 18px
  }
  .shot-grid {
    grid-template-columns:1fr
  }
  .tabs {
    gap:15px
  }
  .tabs button {
    font-size:11px
  }
  .queue-bar {
    padding-inline:18px
  }
  .welcome-types {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:720px) {
  .sidebar {
    position:relative;
    width:68px;
    padding:20px 9px;
    min-height:100vh
  }
  .brand {
    margin-bottom:25px;
    padding:0;
    justify-content:center
  }
  .brand>span:last-child {
    display:none
  }
  .new-project {
    font-size:0;
    padding:12px;
    justify-content:center;
    gap:0
  }
  .new-project svg {
    width:20px;
    height:20px
  }
  .sidebar-label {
    font-size:0;
    margin:25px 0 12px;
    justify-content:center
  }
  .sidebar-label span {
    font-size:10px
  }
  .project-item {
    padding:13px;
    justify-content:center
  }
  .project-item span {
    display:none
  }
  .project-item svg {
    width:20px;
    height:20px
  }
  .sidebar-bottom {
    position:sticky;
    bottom:20px
  }
  .connection-mini {
    padding:16px 0;
    justify-content:center
  }
  .connection-mini>span:last-child {
    display:none
  }
  .nav-button {
    font-size:0;
    gap:0;
    justify-content:center;
    padding:13px
  }
  .nav-button svg {
    width:20px;
    height:20px
  }
  .local-note {
    display:none
  }
  .workspace {
    margin-left:0
  }
  .topbar {
    height:58px;
    padding:0 17px
  }
  .breadcrumbs {
    font-size:10px;
    gap:6px
  }
  .top-actions {
    gap:6px
  }
  .top-actions>span:first-child {
    display:none
  }
  .project-heading {
    padding:21px 17px;
    gap:9px
  }
  .project-type {
    font-size:10px
  }
  .project-heading h1 {
    font-size:21px
  }
  .project-heading-main p {
    font-size:10px;
    max-width:200px
  }
  .heading-actions {
    gap:6px
  }
  .heading-actions .primary,.heading-actions .secondary {
    font-size:10px;
    padding:8px
  }
  .heading-actions svg {
    width:13px;
    height:13px
  }
  .project-nav {
    margin-inline:17px
  }
  .tabs {
    gap:13px
  }
  .tabs button {
    font-size:10px;
    gap:4px
  }
  .tabs button svg {
    width:13px;
    height:13px
  }
  .studio-layout {
    display:flex;
    flex-direction:column;
    margin-left:17px;
    margin-right:17px
  }
  .board-area {
    padding-right:0
  }
  .shot-grid {
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr))
  }
  .inspector {
    position:relative;
    height:auto;
    max-height:none;
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:25px
  }
  .inspector-scroll {
    max-height:none
  }
  .inspector-empty {
    height:140px
  }
  .queue-bar {
    left:68px;
    height:70px;
    padding-inline:11px;
    gap:8px
  }
  .queue-summary {
    gap:8px;
    min-width:0;
    padding:0
  }
  .queue-summary>span:last-child {
    font-size:10px
  }
  .queue-summary small {
    font-size:9px
  }
  .queue-icon {
    width:28px;
    height:28px
  }
  .queue-bar>.quiet {
    font-size:9px;
    max-width:110px;
    white-space:normal;
    padding:6px
  }
  .workspace {
    padding-bottom:70px
  }
  .welcome {
    padding:35px 20px
  }
  .welcome h1 {
    font-size:29px
  }
  .welcome>p {
    font-size:12px
  }
  .welcome-types {
    grid-template-columns:1fr 1fr;
    margin-top:35px;
    gap:9px
  }
  .welcome-types>button {
    padding:15px;
    min-height:140px
  }
  .welcome-types strong {
    font-size:11px
  }
  .welcome-types span {
    font-size:10px
  }
  .welcome-illustration {
    transform:scale(.85)
  }
  .mapping-grid {
    grid-template-columns:1fr
  }
  .modal-body {
    padding:20px
  }
  .modal-heading {
    padding:18px 20px
  }
  .modal-heading h2 {
    font-size:17px
  }
  .modal-footer {
    flex-wrap:wrap
  }
  .queue-row {
    gap:8px
  }
  .queue-row .pill {
    font-size:8px
  }
  .queue-provider {
    display:none
  }
  #toast {
    left:calc(50% + 20px);
    max-width:calc(100vw - 95px);
    font-size:11px
  }
  .type-option {
    gap:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Keep the primary shot action visible above the queue on desktop. */
.model-download{padding:16px 0;border-bottom:1px solid #e7eaf1}
.model-download>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.model-download strong{font-size:12px;font-weight:550;color:#68738b}
.model-download progress{display:block;width:100%;height:7px;margin-top:13px;accent-color:#8270cf}
.model-download small{display:block;font-size:10px;color:#9ba5b7;margin-top:7px}
.settings-section details{margin-top:22px;color:#8c96a9;font-size:11px}
.settings-section details summary{margin-bottom:18px;cursor:pointer}
.workflow-row>span{min-width:0;overflow-wrap:anywhere}
@media(max-width:720px){.topbar{gap:10px}.breadcrumbs{min-width:0;overflow:hidden}.breadcrumbs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-actions .quiet{padding:5px;font-size:9px}.top-actions>.icon-button{display:none}}
.login-page{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background:#f2f4f9}
.login-brand{display:flex;align-items:center;gap:10px;color:#3b415a;font-size:25px;font-weight:650;letter-spacing:-.6px;margin-bottom:26px}
.login-panel{width:min(450px,100%);border:1px solid #e0e3ef;border-radius:12px;padding:35px;background:white;box-shadow:0 20px 55px #252b4b08}
.login-panel h1{font-size:28px;letter-spacing:-.8px;color:#35415a;font-weight:600;line-height:1.25;margin:18px 0 12px}
.login-panel p{font-size:12px;color:#8a93a7;line-height:1.8;margin-bottom:26px}
.login-panel small{display:block;font-size:10px;color:#a2aabd;line-height:1.8;margin-top:22px}
.login-art{color:#9b8acb}
.login-art svg{width:30px;height:30px}
.pairing-code{display:block;padding:18px;background:#f1eefb;border:1px solid #dcd5f2;font-size:20px;letter-spacing:2px;border-radius:7px;color:#6955ad;margin-top:10px;overflow-wrap:anywhere}
.inspector {
  height:calc(100vh - 310px);
  min-height:360px;
  max-height:none
}
@media(max-width:720px) {
  .inspector {
    height:auto;
    min-height:0
  }
}
:root{--purple:#4c65b1;--focus:#4c65b1}
.brand{background:none;text-align:left;width:100%;padding:0}
.project-hub{padding:38px 36px 55px;max-width:1600px;margin:auto}
.hub-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hub-heading{margin-bottom:30px}.hub-heading h1{font-family:Bahnschrift,"Arial Narrow",Studio,sans-serif;font-size:40px;line-height:1.12;font-weight:600;letter-spacing:-1.5px;margin:0 0 12px}
.hub-heading p,.section-heading p{color:var(--muted);max-width:64ch;line-height:1.6;margin:6px 0}
.featured-production{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);background:#fff;border:1px solid var(--line);margin-bottom:38px;overflow:hidden}
.featured-production>div:first-child{padding:30px}.featured-production h2{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:15px 0}.featured-production p{color:#768197;line-height:1.6;max-width:56ch;max-height:78px;overflow:hidden}
.contact-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:#243047;padding:12px;border-top:8px dotted #101a2a;border-bottom:8px dotted #101a2a;min-height:240px}
.contact-frame{position:relative;background:#1c283e;min-height:110px;display:flex;align-items:center;justify-content:center;color:#7f91ad;overflow:hidden}.contact-frame img,.contact-frame video{width:100%;height:100%;position:absolute;object-fit:cover}.contact-frame small{position:absolute;bottom:0;left:0;right:0;color:white;background:#192436cc;padding:7px 10px;font-size:10px}.empty-contact{grid-column:1/-1;gap:12px;color:#bac6dd;font-size:13px}
.project-register .section-heading{margin-bottom:15px}.section-heading h2,.section-heading h3{font-size:19px;font-weight:650;margin:0}.section-heading>span{font-size:12px;color:var(--muted)}
.production-row{display:grid;grid-template-columns:45px minmax(140px,1.4fr) .5fr 1fr .6fr 20px;align-items:center;gap:18px;width:100%;padding:20px 12px;background:none;border-top:1px solid var(--line);text-align:left;color:#728096;font-size:12px}.production-row:hover{background:#edf1f8}.production-row strong{display:block;color:var(--ink);font-size:14px;margin-bottom:7px}.production-row small{font-size:11px}.production-symbol{width:40px;height:40px;display:grid;place-items:center;background:#e7ecf7;color:#586ba4;border-radius:9px}
.start-templates{margin-top:40px}.start-templates>h2{font-size:20px}.start-templates>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.start-templates button{text-align:left;background:none;padding:20px 0;border-top:2px solid #cdd7ea;color:var(--ink)}.start-templates button>svg{color:#6d7fa8;margin-bottom:14px}.start-templates strong{display:block;font-size:13px}.start-templates p{font-size:11px;line-height:1.6;color:var(--muted)}
.stage-nav{display:flex;gap:4px;padding:0 32px;border-bottom:1px solid var(--line);overflow:auto;background:#f8faff}.stage-nav button{display:flex;gap:9px;align-items:center;background:none;color:#8c96a8;white-space:nowrap;padding:16px 17px 15px;border-bottom:3px solid transparent;font-size:12px}.stage-nav button span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d8dfeb;border-radius:50%;font-size:10px}.stage-nav button.active{color:#405797;border-color:#4c65b1;font-weight:650}.stage-nav button.active span{background:#4c65b1;border-color:#4c65b1;color:white}
.creative-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:42px;padding:32px 36px 60px;max-width:1450px;margin:auto}.creative-main{min-width:0}.creative-main>.section-heading{margin-bottom:26px}.creative-main label{font-size:12px}.creative-main textarea{font-size:13px;line-height:1.65;resize:vertical}.creative-guidance{border-left:1px solid #dfe5ef;padding:0 0 0 26px;color:#7c889d;font-size:12px;line-height:1.8;align-self:start;position:sticky;top:25px}.creative-guidance h3{color:#455775;font-size:17px;line-height:1.4}.creative-guidance button{margin-top:18px}.guidance-symbol{display:grid;place-items:center;width:42px;height:42px;background:#e4eaf9;color:#516baa;border-radius:12px}
.planning-actions{display:grid;grid-template-columns:1fr 1fr;gap:20px}.planning-card{text-align:left;background:#fff;border:1px solid var(--line);padding:24px;min-height:205px;color:var(--ink)}.planning-card>svg{color:#7085b5}.planning-card h3{font-size:17px;margin:16px 0 10px}.planning-card p{font-size:12px;line-height:1.7;color:var(--muted)}.planning-card>span{display:flex;gap:10px;color:#526ba7;font-size:11px;align-items:center;margin-top:20px}.context-summary{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}.context-summary>div{display:grid;grid-template-columns:150px 1fr;gap:20px;font-size:12px;border-bottom:1px solid #e5eaf2;padding:14px 0}.context-summary strong{color:#5d6d89}.context-summary p{white-space:pre-wrap;margin:0;line-height:1.7;color:var(--muted)}
.subview-tools{display:flex;align-items:center;gap:6px}.subview-tools .quiet{font-size:11px}.timeline-panel{padding:15px 36px 50px;max-width:1400px;margin:auto}.timeline-shot{padding:24px 0;border-bottom:1px solid #dae2ef}.timeline-shot-header{display:flex;align-items:center;gap:15px;margin-bottom:18px}.timeline-shot-header>div{flex:1}.timeline-shot-header h3{font-size:16px;margin:0 0 7px}.timeline-shot-header p{font-size:11px;color:#8b98ae;margin:0}.timecode{font-family:Bahnschrift,Studio,sans-serif;font-size:24px;color:#90a0bb}.take-comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}.take-comparison>div>span{font-size:11px;color:#8493a9;display:block;margin-bottom:10px}.take-comparison video{width:100%;aspect-ratio:16/9;background:#142138}.media-placeholder{height:100%;min-height:150px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#e9eef6;color:#91a0b8;font-size:12px}.take-choice{max-width:420px;margin-top:16px}
.workflow-intro,.director-intro{display:flex;gap:16px;align-items:center;margin-bottom:26px}.workflow-intro>span{width:48px;height:48px;border-radius:12px;background:#e6ecf8;display:grid;place-items:center;color:#667eaf}.workflow-intro h3,.director-intro h3{font-size:17px;margin:0 0 6px}.workflow-intro p,.director-intro p{color:var(--muted);line-height:1.6;font-size:12px;margin:0}.director-intro>div{flex:1}.director-intro>small{color:#8a97ab;font-size:10px;line-height:1.8;text-align:right}
.analysis-preview{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;margin-bottom:22px}.analysis-preview video{width:100%;max-height:150px;background:#152339}.analysis-preview h3{font-size:18px;margin:0 0 10px}.analysis-preview p{color:var(--muted);font-size:12px;line-height:1.7}.analysis-preview small{color:#8c99b0;font-size:11px}.segment-head,.segment-row{display:grid;grid-template-columns:36px minmax(110px,1fr) 85px 85px 60px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #e4e9f2}.segment-head{color:#8b98ad;font-size:10px}.segment-row input{min-width:0;margin:0!important;font-size:11px;padding:8px}.segment-row input[type=checkbox]{width:16px;height:16px;accent-color:#526cb0}.segment-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#8c99ad;font-size:11px}.check-label{display:flex;gap:10px;align-items:center;line-height:1.5}.check-label input{width:16px;margin:0;accent-color:#526cb0}.check-label+.form-caption{margin:8px 0 20px 26px}
.processing-orbit{margin:10px auto 22px;width:70px;height:70px;background:#e9eef8;border-radius:50%;display:grid;place-items:center;color:#6680b6}.processing-orbit svg{width:30px;height:30px}#media-watch{text-align:center;padding:25px}#media-watch p{color:#8491a8;line-height:1.7}#media-watch progress{width:min(350px,100%);accent-color:#536fb0;height:7px}.completion-state{text-align:center;padding:35px 30px}.completion-state>svg{color:#5a8f8c;width:48px;height:48px}.completion-state p{color:var(--muted);line-height:1.8;max-width:54ch;margin:15px auto 25px}.output-review video{width:100%;max-height:420px;background:#172335}.output-review p{color:var(--muted)}.button-link{display:inline-flex;text-decoration:none;align-items:center;gap:9px}.output-review audio{width:100%}
.director-conversation{min-height:180px;max-height:40vh;overflow:auto;padding:4px 6px 12px;scrollbar-width:thin}.director-message{padding:16px 0;border-bottom:1px solid #e6ebf3;font-size:12px;line-height:1.8}.director-message>strong{display:block;margin-bottom:8px;color:#536b9e;font-size:11px}.director-message.from-user{padding:14px 18px;background:#edf1f8;border:none;border-radius:8px;margin:15px 0}.director-message.from-user>strong{color:#7b8aa3}.director-message-text{white-space:pre-wrap;overflow-wrap:anywhere}.director-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.director-actions>span{display:flex;gap:5px;align-items:center;font-size:10px;color:#69838b;background:#edf4f5;border-radius:4px;padding:3px 7px}.director-actions svg{width:12px;height:12px}.director-actions .failed{color:#ad6b63;background:#fcf0ed}.director-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}.director-suggestions button{background:#edf1f8;border-radius:5px;font-size:10px}.director-empty{text-align:center;padding:30px;color:#8795ab}.director-empty h3{color:#455978;font-size:20px}.director-empty p{max-width:50ch;margin:10px auto;font-size:12px;line-height:1.8}.director-mode-note{font-size:10px;color:#8d98aa;line-height:1.7;margin-top:8px}#director-form{border-top:1px solid #dfe6f0;padding-top:18px}#director-form label{max-width:330px}#director-form textarea{margin:12px 0 0;font-size:13px}#director-status{font-size:11px;color:#8390a6}
.delivery-workspace{padding:20px 36px 60px;max-width:1250px;margin:auto}.delivery-heading{text-align:center;padding:35px 20px 50px}.delivery-heading>svg{width:48px;height:48px;color:#7f92b8}.delivery-heading h2{font-size:28px;letter-spacing:-.6px}.delivery-heading p{max-width:60ch;color:var(--muted);line-height:1.8;font-size:13px;margin:0 auto 25px}.delivery-heading>.quiet{display:block;margin:15px auto 0}.export-row{display:flex;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}.export-row>div{flex:1}.export-row p{font-size:12px;color:var(--muted);line-height:1.6}
@media(max-width:1150px){.creative-workspace{grid-template-columns:minmax(0,1fr) 220px;gap:25px}.stage-nav{padding:0 20px}.stage-nav button{padding:14px 10px}.subview-tools .quiet{font-size:0;gap:0}.subview-tools .quiet svg{width:18px;height:18px}.featured-production{grid-template-columns:1fr}.start-templates>div{grid-template-columns:repeat(3,1fr)}.production-row{grid-template-columns:40px 1.4fr .5fr 1fr 20px}.production-row>span:nth-last-child(2){display:none}}
@media(max-width:800px){.hub-heading{align-items:flex-start}.hub-heading h1{font-size:30px}.project-hub,.creative-workspace,.timeline-panel,.delivery-workspace{padding-left:20px;padding-right:20px}.creative-workspace{grid-template-columns:1fr}.creative-guidance{position:static;border-left:0;border-top:1px solid var(--line);padding:20px 0}.planning-actions{grid-template-columns:1fr}.stage-nav{padding:0 10px}.stage-nav button{font-size:11px;padding:12px 9px}.stage-nav button span{display:none}.context-summary>div{grid-template-columns:1fr;gap:8px}.take-comparison{gap:10px}.analysis-preview{grid-template-columns:150px 1fr;gap:16px}.director-intro>small{display:none}.production-row{gap:10px;grid-template-columns:35px 1fr 20px}.production-row>span:nth-child(3),.production-row>span:nth-child(4){display:none}.start-templates>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.hub-heading{display:block}.hub-heading>.primary{margin-top:15px}.featured-production>div:first-child{padding:22px}.segment-head,.segment-row{grid-template-columns:24px minmax(70px,1fr) 62px 62px 30px;gap:5px}.analysis-preview{grid-template-columns:1fr}.take-comparison{grid-template-columns:1fr}.creative-main>.section-heading{display:block}.creative-main>.section-heading>button{margin-top:15px}.director-suggestions{gap:4px}.director-suggestions button{font-size:9px}.stage-nav button{padding:12px 8px}.delivery-heading h2{font-size:23px}}

.provider-controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}.inspector-scroll{min-height:0}.inspector-bottom{flex-shrink:0}

.vision-report{border-top:1px solid var(--line);margin-top:26px;padding-top:24px}.vision-report h4{margin:18px 0 5px;font-size:12px;color:#4a5870}.vision-report p,.vision-report li{font-size:12px;line-height:1.75;white-space:pre-wrap}.vision-report small{font-size:10px;color:#8793a8}.vision-report ol{padding-left:18px}.subview-tools{flex-wrap:wrap;justify-content:flex-end}@media(max-width:720px){.export-row{display:grid;grid-template-columns:minmax(0,1fr) auto}.export-row>div{grid-column:1/-1}.export-row p{overflow-wrap:anywhere}.subview-tools{justify-content:flex-start}}

.pill.waiting-worker{background:#fff4dd;color:#916214}.pill.waiting-worker>span{background:#c58b21}

.from-director .director-message-text{white-space:normal}.director-message-text p{margin:0 0 10px}.director-message-text h4{font-size:13px;color:#344763;margin:16px 0 8px}.director-message-text h4:first-child{margin-top:0}.director-message-text ul,.director-message-text ol{padding-left:20px;margin:10px 0}.director-message-text li{margin:7px 0}.director-message-text pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f4fa;padding:12px;border-radius:5px}.director-message-text code{font-size:11px}

.director-live-actions{font-size:11px;line-height:1.7;color:#567080;overflow-wrap:anywhere;margin:12px 0}.director-live-actions:empty{display:none}

.director-active-request{font-size:12px;line-height:1.7;background:#edf1f8;border-radius:6px;padding:12px 15px;max-height:120px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.director-active-request:empty{display:none}