:root {
  --bg: #161616;
  --panel: #1f1f1f;
  --panel-2: #262626;
  --raised: #2e2e2e;
  --line: #333;
  --line-2: #3d3d3d;
  --text: #e8e8e8;
  --muted: #9b9b9b;
  --faint: #6c6c6c;
  --accent: #0d99ff;
  --accent-2: #3dadff;
  --playhead: #0d99ff;
  --video: #6d5bd0;
  --video-2: #8a7be0;
  --audio: #2f8f5b;
  --audio-2: #4fc184;
  --words: #c0457a;
  --music: #b07a2a;
  --ok: #4fc184;
  --warn: #e3a33b;
  --err: #f06464;
  --r: 6px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--bg);
  height: 100%;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font: 13px / 1.4 Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

main, #app {
  height: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: #0d99ff55;
}

.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tracks-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  border: 2px solid var(--panel);
  background: #3a3a3a;
  border-radius: 10px;
}

.tracks-scroll::-webkit-scrollbar-thumb {
  border: 2px solid var(--panel);
  background: #3a3a3a;
  border-radius: 10px;
}

.login-wrap {
  background: radial-gradient(1200px 600px at 70% -10%, #0d99ff1c, transparent 60%), var(--bg);
  place-items: center;
  min-height: 100%;
  padding: 24px 16px;
  display: grid;
}

.login {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%;
  max-width: 360px;
  padding: 32px 28px;
  box-shadow: 0 30px 80px #0008;
}

.login h1 {
  letter-spacing: -.5px;
  margin: 0;
  font-size: 30px;
  font-weight: 650;
}

.login h1 span, .brand span {
  color: var(--accent);
}

.lead {
  color: var(--muted);
  margin: 6px 0 24px;
}

.login form {
  gap: 12px;
  display: grid;
}

.login label {
  color: var(--muted);
  gap: 6px;
  font-size: 12px;
  display: grid;
}

.login input {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  padding: 10px 12px;
}

.login input:focus, .field:focus, .search:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px #0d99ff33;
}

.login button {
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 10px 12px;
  font-weight: 600;
}

.login button:disabled {
  opacity: .5;
}

.error {
  color: var(--err);
  margin: 6px 0 0;
  font-size: 12px;
}

.health {
  color: var(--muted);
  margin: 20px 0 0;
  font-size: 12px;
}

.health:before {
  content: "● ";
  color: var(--faint);
}

.health.ok:before {
  color: var(--ok);
}

.health.warn:before {
  color: var(--warn);
}

.health.err:before {
  color: var(--err);
}

.editor {
  background: #0c0c0c;
  grid-template: "top top top" 44px
                 "assets monitor inspector" minmax(0, 1fr)
                 "timeline timeline timeline" 268px
                 / 264px minmax(0, 1fr) 296px;
  gap: 1px;
  height: 100vh;
  display: grid;
}

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  grid-area: top;
  align-items: center;
  gap: 16px;
  padding: 0 10px 0 14px;
  display: flex;
}

.brand {
  letter-spacing: -.3px;
  font-size: 16px;
  font-weight: 700;
}

.crumbs {
  min-width: 0;
  color: var(--muted);
  flex: 1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.crumbs .here {
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.crumbs .sep {
  color: var(--faint);
}

.tenant-select {
  border-radius: var(--r);
  color: var(--text);
  background: none;
  border: 1px solid #0000;
  padding: 4px 6px;
}

.tenant-select:hover {
  border-color: var(--line-2);
  background: var(--panel-2);
}

.topbar .right {
  align-items: center;
  gap: 8px;
  display: flex;
}

.avatar {
  background: linear-gradient(135deg, #0d99ff, #6d5bd0);
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

button.primary, a.button {
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  text-align: center;
  border: 0;
  padding: 6px 14px;
  font-weight: 600;
  text-decoration: none;
}

button.primary:hover:not(:disabled), a.button:hover {
  background: var(--accent-2);
}

button.primary:disabled {
  background: var(--raised);
  color: var(--faint);
  cursor: default;
}

button.ghost {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: none;
  padding: 6px 14px;
}

button.ghost:hover {
  background: var(--panel-2);
}

.wide {
  width: 100%;
  margin-top: 10px;
  display: block;
  padding: 8px 14px !important;
}

button.icon {
  border-radius: var(--r);
  color: var(--muted);
  background: none;
  border: 0;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
}

button.icon:hover:not(:disabled) {
  background: var(--raised);
  color: var(--text);
}

button.icon:disabled {
  opacity: .35;
  cursor: default;
}

.panel {
  background: var(--panel);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.assets {
  grid-area: assets;
}

.inspector {
  grid-area: inspector;
}

.panel-head, .monitor-head, .tl-head {
  text-transform: uppercase;
  letter-spacing: .06em;
  height: 32px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.search {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg);
  margin: 8px;
  padding: 6px 10px;
}

.assets section {
  padding: 4px 0 10px;
}

.assets h3 {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  justify-content: space-between;
  align-items: center;
  margin: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.assets h3 .add {
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
}

.assets h3 .add:hover {
  background: var(--raised);
  color: var(--text);
}

.item {
  text-align: left;
  width: 100%;
  color: var(--text);
  background: none;
  border: 0;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  display: grid;
}

.item:hover {
  background: var(--panel-2);
}

.item.on {
  box-shadow: inset 2px 0 0 var(--accent);
  background: #0d99ff26;
}

.item .name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item .meta {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.meta.queued, .meta.rendering, .meta.generating {
  color: var(--warn);
}

.meta.failed {
  color: var(--err);
}

.swatch {
  border-radius: 3px;
  width: 10px;
  height: 10px;
}

.swatch.film, .swatch.video {
  background: var(--video);
}

.swatch.prompter {
  background: #555;
}

.swatch.audio {
  background: var(--audio);
}

.item.settings {
  border-top: 1px solid var(--line);
  color: var(--muted);
  grid-template-columns: 1fr;
  padding: 10px 12px;
}

.monitor {
  background: var(--bg);
  flex-direction: column;
  grid-area: monitor;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.monitor-head {
  background: var(--panel);
  justify-content: space-between;
}

.tc {
  font-family: var(--mono);
  color: var(--accent-2);
  letter-spacing: .02em;
  text-transform: none;
  font-size: 12px;
}

.tc.dim {
  color: var(--muted);
}

.stage {
  background: repeating-conic-gradient(#1a1a1a 0% 25%, #171717 0% 50%) 50% / 24px 24px;
  flex: 1;
  place-items: center;
  min-height: 0;
  padding: 18px;
  display: grid;
}

.frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #000a, 0 0 0 1px #ffffff10;
}

@supports not (aspect-ratio: 16 / 9) {
  .frame {
    width: 100%;
  }
}

.frame video {
  object-fit: contain;
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.frame video.hidden {
  visibility: hidden;
}

.slate {
  text-align: center;
  background: radial-gradient(600px 300px at 50% 40%, #0d99ff14, #0000 70%), #0e0e0e;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px;
  display: flex;
  position: absolute;
  inset: 0;
}

.slate.over {
  background: #0e0e0ee6;
}

.slate-title {
  letter-spacing: -.4px;
  font-size: 26px;
  font-weight: 650;
}

.slate-sub {
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.slate-msg {
  color: var(--muted);
  max-width: 520px;
}

.transport {
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  display: grid;
}

.transport .tc:last-child {
  text-align: right;
}

.buttons {
  gap: 2px;
  display: flex;
}

.buttons .play {
  min-width: 40px;
  color: var(--text);
  background: var(--raised);
}

.inspector .group {
  border-bottom: 1px solid var(--line);
  gap: 6px;
  padding: 12px;
  display: grid;
}

.inspector h4 {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
}

.prop {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 24px;
  display: grid;
}

.prop .label {
  color: var(--faint);
}

.prop .value {
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  display: flex;
  overflow: hidden;
}

.badge {
  font-family: var(--mono);
  background: var(--raised);
  border: 1px solid var(--line-2);
  color: var(--accent-2);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}

.dot {
  background: var(--faint);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.dot.done {
  background: var(--ok);
}

.dot.queued, .dot.rendering, .dot.generating {
  background: var(--warn);
  box-shadow: 0 0 0 3px #e3a33b33;
}

.field {
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--bg);
  resize: vertical;
  width: 100%;
  padding: 7px 9px;
}

.lbl {
  color: var(--faint);
  margin-top: 4px;
  font-size: 11px;
}

.hint {
  color: var(--faint);
  margin: 2px 0 0;
  font-size: 12px;
}

.text {
  color: var(--muted);
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.5;
}

.empty {
  color: var(--faint);
  padding: 12px;
}

.keyrow {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  display: grid;
}

.keyrow code {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
}

.timeline {
  background: var(--panel);
  flex-direction: column;
  grid-area: timeline;
  min-height: 0;
  display: flex;
}

.tl-head .zoom {
  text-transform: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  display: flex;
}

.zoom input[type="range"] {
  width: 120px;
  accent-color: var(--accent);
}

.tl-body {
  flex: 1;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.track-names {
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.ruler-name {
  border-bottom: 1px solid var(--line);
  height: 26px;
}

.tname {
  height: 50px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  display: flex;
}

.tname b {
  font-family: var(--mono);
  color: var(--text);
  background: var(--raised);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
}

.tracks-scroll {
  background: #1b1b1b;
  min-width: 0;
  overflow: auto;
}

.lanes {
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  min-width: 100%;
  position: relative;
}

.ruler {
  z-index: 3;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  height: 26px;
  position: sticky;
  top: 0;
}

.tick {
  border-left: 1px solid var(--line-2);
  position: absolute;
  top: 0;
  bottom: 0;
}

.tick span {
  font-family: var(--mono);
  color: var(--faint);
  font-size: 10px;
  position: absolute;
  top: 5px;
  left: 4px;
}

.lane {
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, #0000 0 59px, #ffffff05 59px 60px);
  height: 50px;
  position: relative;
}

.clip {
  border: 1px solid #fff2;
  border-radius: 5px;
  position: absolute;
  top: 5px;
  bottom: 5px;
  overflow: hidden;
}

.clip-label {
  color: #fff;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: 3px;
  left: 6px;
}

.clip.video {
  background-color: var(--video);
  box-shadow: inset 0 0 0 1px var(--video-2);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.clip.video:after {
  content: "";
  background: linear-gradient(#6d5bd0aa, #0000 45%);
  position: absolute;
  inset: 0;
}

.clip.ghost-clip {
  border: 1px dashed var(--video-2);
  background: repeating-linear-gradient(135deg, #6d5bd022 0 8px, #6d5bd011 8px 16px);
}

.clip.audio {
  box-shadow: inset 0 0 0 1px var(--audio);
  background: #1f4a33;
}

.clip.audio .wave {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.clip.audio .wave path {
  stroke: var(--audio-2);
  stroke-width: 2px;
  stroke-linecap: round;
}

.clip.music {
  box-shadow: inset 0 0 0 1px var(--music);
  background: repeating-linear-gradient(90deg, #4a3612 0 6px, #523c15 6px 12px);
}

.lane.words {
  background-color: #1d1820;
}

.word {
  white-space: nowrap;
  text-overflow: clip;
  color: #f3c6da;
  background: #c0457a33;
  border: 1px solid #c0457a88;
  border-radius: 4px;
  height: 26px;
  padding: 0 3px;
  font-size: 11px;
  line-height: 24px;
  position: absolute;
  top: 12px;
  overflow: hidden;
}

.word.now {
  background: var(--words);
  color: #fff;
  border-color: #f07aaa;
}

.playhead {
  border-left: 1.5px solid var(--playhead);
  z-index: 4;
  pointer-events: none;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.playhead .head {
  background: var(--playhead);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  width: 13px;
  height: 14px;
  margin-left: -7px;
  position: sticky;
  top: 0;
}

@media (width <= 900px) {
  .editor {
    grid-template: "top" 44px
                   "assets" 220px
                   "monitor" minmax(240px, 1fr)
                   "timeline" 260px
                   "inspector"
                   / 1fr;
    height: auto;
    min-height: 100vh;
  }
}

.assets h3.fold, .assets h3 .fold {
  cursor: pointer;
}

.assets h3.fold:hover, .assets h3 .fold:hover {
  color: var(--muted);
}

.inspector .scroll > .wide, .inspector .scroll > a.wide {
  width: calc(100% - 24px);
  margin: 12px 12px 0;
}

.inspector .scroll > .error {
  padding: 0 12px;
}

.hidden-input {
  display: none;
}

.assets.dropping {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: #0d99ff10;
}

.drop-hint {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--faint);
  text-align: center;
  margin: 4px 12px 8px;
  padding: 14px 12px;
  font-size: 12px;
}

.swatch.src-pdf {
  background: #e2574c;
}

.swatch.src-image {
  background: #d18cf0;
}

.swatch.src-audio {
  background: var(--audio);
}

.swatch.src-video {
  background: var(--video);
}

.swatch.src-other {
  background: #555;
}

.swatch.busy {
  background: var(--warn);
  animation: 1s ease-in-out infinite alternate pulse;
}

@keyframes pulse {
  from {
    opacity: .35;
  }

  to {
    opacity: 1;
  }
}

.item.uploading {
  color: var(--warn);
  cursor: default;
}

.meta.stored {
  color: var(--warn);
}

.meta.unreadable {
  color: var(--err);
}

.frame img.picture {
  object-fit: contain;
  background: #0b0b0b;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.gone {
  display: none !important;
}

.project {
  margin: 2px 0 8px;
}

.project-name {
  color: var(--muted);
  justify-content: space-between;
  padding: 4px 12px;
  font-weight: 600;
  display: flex;
}

.project-name .meta {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.item.episode {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  padding-left: 18px;
}

.dot.draft {
  background: var(--faint);
  box-shadow: inset 0 0 0 1px var(--muted);
  background: none;
}

.script {
  background: var(--bg);
  flex: 1;
  min-height: 0;
  padding: 22px 28px 40px;
  overflow: auto;
}

.script-title {
  letter-spacing: -.3px;
  background: none;
  border: 0;
  border-bottom: 1px solid #0000;
  width: 100%;
  margin-bottom: 14px;
  padding: 4px 0 8px;
  font-size: 26px;
  font-weight: 650;
}

.editor :focus:not(:focus-visible) {
  outline: none;
}

.editor button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.editor a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.editor [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.script-title:focus {
  border-bottom-color: var(--accent);
  outline: none;
}

.rows {
  gap: 6px;
  display: grid;
}

.row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 26px 92px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  display: grid;
}

.row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #0d99ff22;
}

.row.cam {
  border-left: 3px solid var(--warn);
}

.row .num {
  font-family: var(--mono);
  color: var(--faint);
  padding-top: 8px;
  font-size: 11px;
}

.row .mode {
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
}

.row.cam .mode {
  color: var(--warn);
  background: #e3a33b22;
  border-color: #e3a33b88;
}

.row .line {
  resize: none;
  background: none;
  border: 0;
  width: 100%;
  min-height: 32px;
  padding: 5px 2px;
  font-size: 14px;
  line-height: 1.45;
  display: block;
  overflow: hidden;
}

.row .line:focus, .row .src:focus {
  outline: none;
}

.row .src {
  background: var(--bg);
  border: 1px solid var(--line-2);
  width: 100%;
  max-width: 440px;
  color: var(--text);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 12px;
}

.row-tools {
  opacity: .5;
  gap: 0;
  transition: opacity .12s;
  display: flex;
}

.row:hover .row-tools {
  opacity: 1;
}

.row:focus-within .row-tools {
  opacity: 1;
}

.add-row {
  margin-top: 10px;
}

img.presenter {
  object-fit: cover;
  border-radius: var(--r);
  width: 100%;
  max-height: 220px;
  margin-top: 6px;
}

.pad {
  padding: 0 12px;
}

.inspector .scroll > .approve {
  border-color: var(--ok);
  color: var(--ok);
}

.item.kit {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.kit-chips {
  border-radius: 4px;
  display: inline-flex;
  overflow: hidden;
  box-shadow: 0 0 0 1px #fff2;
}

.kit-chips i {
  width: 7px;
  height: 12px;
  display: block;
}

.meta.approved {
  color: var(--ok);
}

.meta.draft {
  color: var(--faint);
}

.swatches {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.sw {
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  display: grid;
}

.sw i {
  border-radius: 5px;
  width: 22px;
  height: 22px;
  box-shadow: inset 0 0 0 1px #fff2;
}

.sw span {
  color: var(--muted);
  font-size: 12px;
}

.sw code {
  font-family: var(--mono);
  color: var(--faint);
  font-size: 11px;
}

.logos {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.logo-tile {
  border-radius: var(--r);
  place-items: center;
  height: 70px;
  padding: 10px;
  display: grid;
}

.logo-tile img {
  max-width: 100%;
  max-height: 100%;
}

.shapes {
  gap: 8px;
  margin: 4px 0;
  display: flex;
}

.shape-tile {
  border-radius: var(--r);
  background: var(--panel-2);
  justify-items: center;
  gap: 4px;
  width: 70px;
  padding: 8px;
  display: grid;
}

.shape-tile svg {
  width: 46px;
  height: 46px;
}

.shape-tile span {
  color: var(--muted);
  font-size: 11px;
}

.rules {
  color: var(--muted);
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
  display: grid;
}

.lane-busy {
  color: var(--warn);
  align-items: center;
  gap: 8px;
  margin: 0;
  display: flex;
}

.board {
  grid-template-rows: 1fr 14%;
  grid-template-columns: 1.6fr 1fr;
  display: grid;
  position: absolute;
  inset: 0;
}

.board-main {
  flex-direction: column;
  justify-content: center;
  gap: 4%;
  padding: 8%;
  display: flex;
}

.board-logo {
  object-fit: contain;
  object-position: left;
  width: 46%;
  max-height: 30%;
}

.board-logo.small {
  object-position: center;
  width: 60%;
}

.board-tagline {
  font: 600 clamp(14px, 2.6vw, 34px) / 1.2 Georgia, serif;
}

.board-cta {
  letter-spacing: .08em;
  border-radius: 10px;
  align-self: flex-start;
  padding: 1.4% 3%;
  font-size: clamp(11px, 1.2vw, 18px);
  font-weight: 600;
}

.board-side {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12%;
  padding: 6%;
  display: flex;
}

.board-shapes {
  justify-content: center;
  align-items: flex-end;
  gap: 14%;
  width: 100%;
  height: 34%;
  display: flex;
}

.board-shapes svg {
  width: auto;
  max-width: 40%;
  height: 100%;
}

.board-swatches {
  grid-column: 1 / -1;
  grid-template-columns: repeat(6, 1fr);
  display: grid;
}

.board-swatches i {
  display: block;
}

.swatch.person {
  background: #f0a868;
  border-radius: 50%;
}

img.avatar-sm {
  object-fit: cover;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.item:has(img.avatar-sm) {
  grid-template-columns: 14px minmax(0, 1fr) auto;
}

.refs {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  display: grid;
}

.ref {
  background: var(--panel-2);
  aspect-ratio: 1;
  border: 2px solid #0000;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
}

.ref img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.ref.on {
  border-color: var(--accent);
}

.consent {
  background: #e3a33b0d;
}

.clip-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  display: grid;
}

.clip-row .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.dot.failed {
  background: var(--err);
}

label.check {
  color: var(--text);
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 12px;
  display: flex;
}

.shots {
  gap: 2px;
  margin-top: 8px;
  display: grid;
}

button.ghost.small {
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 11px;
}

button.brand {
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
}

kbd {
  font: 11px var(--mono);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--muted);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
}

.search-btn {
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--faint);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-width: 220px;
  padding: 5px 8px 5px 12px;
  display: flex;
}

.search-btn:hover {
  border-color: var(--accent);
  color: var(--muted);
}

.badge.warn {
  color: var(--warn);
  background: #e3a33b22;
}

.badge.ok {
  color: var(--ok);
  background: #4fc18422;
}

button.small, .ghost.small, .primary.small {
  padding: 3px 10px;
  font-size: 12px;
}

.monitor {
  overflow: hidden;
}

.prod {
  height: 100%;
  padding: 28px 32px 60px;
  overflow: auto;
}

.prod-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 26px;
  display: flex;
}

.prod-head .focus {
  min-width: 0;
  max-width: 100%;
}

.prod-head > button, .prod-head .cost-pill {
  white-space: nowrap;
}

.prod h1 {
  letter-spacing: -.4px;
  margin: 0;
  font-size: 26px;
}

.focus {
  color: var(--text);
  background: linear-gradient(90deg, #0d99ff26, #0d99ff08);
  border: 1px solid #0d99ff66;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  font-weight: 500;
  animation: 2.4s ease-in-out infinite glow;
  display: flex;
}

.focus:hover {
  border-color: var(--accent);
  background: #0d99ff30;
}

.focus-label {
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

@keyframes glow {
  50% {
    box-shadow: 0 0 0 4px #0d99ff1a;
  }
}

.prod-project {
  margin-bottom: 34px;
}

.prod-project-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.prod-project-head h2 {
  margin: 0 6px 0 0;
  font-size: 16px;
}

.kit-pill {
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: none;
  border-radius: 20px;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-size: 12px;
  display: inline-flex;
}

.kit-pill:hover {
  border-color: var(--muted);
}

.prod-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.prod-row {
  border-top: 1px solid var(--line);
  cursor: pointer;
  grid-template-columns: 30px minmax(120px, 1fr) repeat(4, minmax(92px, 1fr));
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  display: grid;
  position: relative;
}

.prod-row:first-child {
  border-top: 0;
}

.prod-row:hover {
  background: var(--panel-2);
}

.prod-labels {
  cursor: default;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .6px;
  background: var(--panel);
  font-size: 11px;
}

.prod-labels:hover {
  background: var(--panel);
}

.prod-row .num {
  font: 12px var(--mono);
  color: var(--faint);
}

.prod-row .title {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 550;
  overflow: hidden;
}

.prod-row .go {
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  background: var(--panel-2);
  box-shadow: -24px 0 18px var(--panel-2);
  pointer-events: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  transition: opacity .15s;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.prod-row:hover .go {
  opacity: 1;
}

.cell {
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  font-size: 12px;
  display: flex;
  overflow: hidden;
}

.cell:hover {
  background: var(--raised);
  color: var(--text);
}

.cell i {
  border: 1.5px solid var(--faint);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.cell.done i {
  background: var(--ok);
  border-color: var(--ok);
}

.cell.busy i {
  border-color: var(--accent);
  border-top-color: #0000;
  animation: .9s linear infinite spin;
}

.cell.failed i {
  background: var(--err);
  border-color: var(--err);
}

.cell.failed {
  color: var(--err);
}

.cell.skip {
  color: var(--faint);
}

.cell.skip i {
  border-style: dashed;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.steps {
  background: var(--line);
  border-bottom: 1px solid var(--line);
  flex: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  display: grid;
}

.step {
  background: var(--panel);
  text-align: left;
  color: var(--muted);
  border: 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  display: flex;
  position: relative;
}

.step:hover {
  background: var(--panel-2);
  color: var(--text);
}

.step.on {
  background: var(--bg);
  color: var(--text);
}

.step.on:after {
  content: "";
  background: var(--accent);
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.step-mark {
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.step.done .step-mark {
  background: var(--ok);
  border-color: var(--ok);
  color: #0c2b1a;
}

.step.failed .step-mark {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
}

.step.busy .step-mark {
  border-color: var(--accent);
  color: #0000;
  border-top-color: #0000;
  animation: .9s linear infinite spin;
}

.step.skip .step-mark {
  color: var(--faint);
  border-style: dashed;
}

.step.next:not(.done) .step-mark {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px #0d99ff22;
}

.step-body {
  min-width: 0;
  display: grid;
}

.step-name {
  font-size: 13px;
  font-weight: 600;
}

.step-state {
  color: var(--faint);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  overflow: hidden;
}

.step.failed .step-state {
  color: var(--err);
}

.step-page {
  flex: 1;
  max-width: 980px;
  min-height: 0;
  padding: 0 32px 40px;
  overflow: auto;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 14px;
}

.card-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.card-row .meta {
  color: var(--muted);
  margin-left: auto;
  font-size: 12px;
}

.empty-card p {
  margin: 0 0 6px;
}

.voice-card.done {
  border-color: #4fc18455;
}

.shot-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.shot {
  padding: 0;
  overflow: hidden;
}

.shot .card-row, .shot .error, .shot button {
  width: auto;
  margin: 10px 12px;
}

.shot button.wide {
  width: calc(100% - 24px);
}

.shot-pic {
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}

.shot-pic img, .shot-pic video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.shot.planned .shot-pic img {
  filter: grayscale(.6) brightness(.7);
}

.shot-time {
  font: 11px var(--mono);
  background: #000a;
  border-radius: 4px;
  padding: 1px 6px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.shot.done {
  border-color: #4fc18455;
}

.next-step {
  white-space: nowrap;
}

.film-bar {
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.film-state {
  min-width: 0;
  color: var(--muted);
  flex: 180px;
  gap: 1px;
  display: grid;
}

.film-title {
  color: var(--text);
  font-size: 13px;
}

.film-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

a.ghost-link {
  border: 1px solid var(--line-2);
  color: var(--text);
  background: none;
  padding: 6px 14px;
  font-weight: 500;
}

a.ghost-link:hover {
  background: var(--panel-2);
}

.field.share {
  flex-basis: 100%;
  font-size: 12px;
}

.dot.todo, .dot.skip {
  border: 1.5px solid var(--faint);
  background: none;
}

.dot.busy {
  background: var(--accent);
}

.rail-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--faint);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 14px 12px 4px;
  font-size: 10px;
}

.rail-toggle {
  color: var(--faint);
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 12px 6px 32px;
  font-size: 11px;
}

.rail-toggle:hover {
  color: var(--accent);
}

button.project-name {
  width: 100%;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
}

button.project-name.on, button.project-name:hover {
  color: var(--accent);
}

.activity {
  position: relative;
}

.activity-btn {
  border-radius: var(--r);
  color: var(--faint);
  white-space: nowrap;
  background: none;
  border: 1px solid #0000;
  padding: 5px 10px;
  font-size: 12px;
}

.activity-btn:hover {
  border-color: var(--line-2);
}

.activity-btn.busy {
  color: var(--accent);
  background: #0d99ff12;
  border-color: #0d99ff55;
}

.activity-pop {
  z-index: 30;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  width: 300px;
  padding: 8px;
  position: absolute;
  top: 36px;
  right: 0;
  box-shadow: 0 20px 50px #000a;
}

.activity-pop .hint {
  margin: 6px;
}

.activity-item {
  text-align: left;
  width: 100%;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  display: flex;
}

.activity-item:hover {
  background: var(--raised);
}

.spinner {
  border: 2px solid var(--accent);
  border-top-color: #0000;
  border-radius: 50%;
  flex: none;
  width: 12px;
  height: 12px;
  animation: .9s linear infinite spin;
}

.toasts {
  z-index: 40;
  gap: 10px;
  width: 360px;
  display: grid;
  position: fixed;
  bottom: 18px;
  right: 18px;
}

.toast {
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  background: #2a2a2aee;
  border-radius: 12px;
  gap: 10px;
  padding: 12px 14px;
  animation: .25s ease-out rise;
  display: grid;
  box-shadow: 0 18px 40px #000a;
}

.toast-text {
  gap: 2px;
  display: grid;
}

.toast-text span {
  color: var(--muted);
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 12px;
  display: -webkit-box;
  overflow: hidden;
}

.toast-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.toast.celebrate {
  background: linear-gradient(135deg, #1f3a2cf2, #232323f2);
  border-color: #4fc18488;
}

.toast.celebrate b:before {
  content: "🎬  ";
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.palette-back {
  z-index: 50;
  background: #0008;
  place-items: start center;
  padding-top: 14vh;
  display: grid;
  position: fixed;
  inset: 0;
}

.palette {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  width: min(640px, 92vw);
  animation: .15s ease-out rise;
  overflow: hidden;
  box-shadow: 0 40px 90px #000c;
}

.palette-input {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  outline: none;
  width: 100%;
  padding: 16px 18px;
  font-size: 16px;
}

.palette-list {
  max-height: 52vh;
  padding: 6px;
  overflow: auto;
}

.palette-group {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--faint);
  padding: 10px 10px 4px;
  font-size: 10px;
}

.palette-item {
  text-align: left;
  width: 100%;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 8px;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  display: flex;
}

.palette-item .meta {
  color: var(--faint);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.palette-item.on {
  background: var(--accent);
}

.palette-item.on .meta {
  color: #fffb;
}

.palette-foot {
  border-top: 1px solid var(--line);
  color: var(--faint);
  padding: 8px 14px;
  font-size: 11px;
}

.palette-item .meta kbd {
  margin-left: 8px;
}

.palette-item > span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.palette-empty {
  color: var(--muted);
  margin: 0;
  padding: 18px 12px;
  font-size: 13px;
}

.keys {
  color: var(--muted);
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  font-size: 12px;
  display: grid;
}

.keys kbd {
  justify-self: start;
}

.howto {
  color: var(--muted);
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  display: grid;
}

.progress {
  background: var(--raised);
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
}

.progress i {
  background: linear-gradient(90deg, var(--accent), var(--ok));
  height: 100%;
  transition: width .4s;
  display: block;
}

.clip.shot-clip {
  border: 1px dashed var(--video-2);
  background: #6d5bd055;
}

.clip.shot-clip.done {
  background: var(--video);
  border-style: solid;
}

.clip.shot-clip.failed {
  border-color: var(--err);
}

.editor.quiet {
  grid-template-rows: 44px minmax(0, 1fr) 0;
}

.editor.quiet .timeline {
  display: none;
}

.prod-labels span {
  white-space: nowrap;
}

.inspector {
  position: relative;
}

.chat-btn {
  color: #c4b5fd;
  border-radius: var(--r);
  background: none;
  border: 1px solid #a78bfa55;
  padding: 5px 10px;
  font-weight: 600;
}

.chat-btn:hover, .chat-btn.on {
  background: #a78bfa22;
  border-color: #a78bfa;
}

.chat {
  z-index: 5;
  background: var(--panel);
  flex-direction: column;
  display: flex;
  position: absolute;
  inset: 0;
}

.chat-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.chat-title {
  color: #c4b5fd;
  white-space: nowrap;
  font-weight: 700;
}

.chat-pick {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
}

.chat-list {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding: 14px 12px;
  display: flex;
  overflow: auto;
}

.chat-empty p {
  color: var(--muted);
  margin: 0 0 14px;
}

.chat-suggest {
  text-align: left;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  width: 100%;
  color: var(--text);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 9px 12px;
  display: block;
}

.chat-suggest:hover {
  border-color: #a78bfa;
}

.msg {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 4px;
  align-self: flex-start;
  gap: 8px;
  max-width: 92%;
  padding: 10px 12px;
  display: grid;
}

.msg.mine {
  background: #0d99ff22;
  border-color: #0d99ff44;
  border-radius: 12px 12px 4px;
  align-self: flex-end;
}

.msg-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.msg-cost {
  font: 10px var(--mono);
  color: var(--faint);
  justify-self: end;
}

.typing {
  gap: 4px;
  padding: 4px 0;
  display: flex;
}

.typing i {
  background: #c4b5fd;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.2s infinite blink;
}

.typing i:nth-child(2) {
  animation-delay: .2s;
}

.typing i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes blink {
  50% {
    opacity: .2;
  }
}

.proposal {
  background: #a78bfa12;
  border: 1px solid #a78bfa66;
  border-radius: 10px;
  justify-items: start;
  gap: 6px;
  padding: 10px;
  display: grid;
}

.proposal.done {
  background: #4fc18410;
  border-color: #4fc18466;
}

.proposal-head {
  gap: 2px;
  display: grid;
}

.proposal-head .meta {
  color: var(--muted);
  font-size: 11px;
}

.proposal .hint {
  margin: 0;
}

.proposal-lines {
  color: var(--muted);
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  display: grid;
}

.proposal-lines li.cam {
  color: var(--warn);
}

.linkish {
  color: #c4b5fd;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
}

.proposal-open {
  justify-self: start;
}

.chat-input {
  border-top: 1px solid var(--line);
  gap: 6px;
  padding: 10px;
  display: grid;
}

.chat-input textarea {
  resize: none;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  width: 100%;
  padding: 9px 10px;
  line-height: 1.4;
}

.chat-input textarea:focus {
  border-color: #a78bfa;
  outline: none;
}

.chat-input-foot {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.chat-input-foot .hint {
  margin: 0;
}

.cost-pill {
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: none;
  border-radius: 20px;
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
}

.cost-pill:hover {
  border-color: var(--muted);
  color: var(--text);
}

.film-cost {
  color: var(--faint);
  font-size: 12px;
}

.cost-total {
  gap: 4px;
  max-width: 640px;
  margin-bottom: 18px;
  display: grid;
}

.cost-total .big {
  letter-spacing: -.5px;
  font-size: 34px;
  font-weight: 700;
}

.cost-row {
  border-top: 1px solid var(--line);
  grid-template-columns: 1.4fr 1fr 70px 1.2fr 140px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  display: grid;
}

.cost-row:first-child {
  border-top: 0;
}

.cost-row .usd {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
}

.cost-row .usd.billed {
  color: var(--faint);
  font-family: inherit;
  font-size: 12px;
}

.step-sub {
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--faint);
  margin: 22px 0 10px;
  font-size: 12px;
}

.image-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}

.scene {
  flex-direction: column;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.scene-pic {
  aspect-ratio: 3 / 2;
  background: #000;
}

.scene-pic img {
  object-fit: cover;
  cursor: zoom-in;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-wait {
  height: 100%;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: repeating-linear-gradient(45deg, #1b1b1b, #1b1b1b 8px, #202020 8px 16px);
  place-items: center;
  font-size: 11px;
  display: grid;
}

.scene-text {
  color: var(--muted);
  margin: 10px 12px 12px;
  font-size: 12px;
}

.scene .error, .scene button {
  width: auto;
  margin: 0 12px 12px;
}

.scene button.wide {
  width: calc(100% - 24px);
}

.scene.done {
  border-color: #4fc18455;
}

.seg {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  display: inline-flex;
  overflow: hidden;
}

.seg button {
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 5px 10px;
  font-size: 12px;
}

.seg button.on {
  background: var(--raised);
  color: var(--text);
}

.feedback {
  background: #4fc18408;
}

.fb {
  border-left: 3px solid var(--line-2);
  margin-bottom: 8px;
  padding: 4px 0 6px 10px;
}

.fb.approve {
  border-color: var(--ok);
}

.fb.comment {
  border-color: var(--warn);
}

.fb-head {
  align-items: center;
  gap: 8px;
  display: flex;
}

.fb-head .meta {
  color: var(--faint);
  margin-left: auto;
  font-size: 11px;
}

.fb p {
  color: var(--muted);
  white-space: pre-wrap;
  margin: 4px 0 0;
  font-size: 12px;
}

.fb-at {
  background: var(--raised);
  font: 11px var(--mono);
  color: var(--accent);
  border: 0;
  border-radius: 4px;
  padding: 0 6px;
}

.live-card {
  border-color: #f0646488;
  margin-bottom: 12px;
}

.live-card b {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.live-dot {
  background: var(--err, #f06464);
  border-radius: 50%;
  width: 9px;
  height: 9px;
  animation: 1.6s ease-out infinite live-pulse;
  box-shadow: 0 0 #f0646499;
}

@keyframes live-pulse {
  70% {
    box-shadow: 0 0 0 7px #f0646400;
  }

  100% {
    box-shadow: 0 0 #f0646400;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

.live-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  border-radius: 8px;
  width: 100%;
  margin-top: 10px;
  display: block;
}

.record-card {
  background: linear-gradient(135deg, #f0646410, #0000);
  border-color: #f0646455;
}

.row-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.new-project {
  max-width: 620px;
}

.two {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.intake {
  margin-bottom: 10px;
}

.intake.done {
  border-color: #4fc18455;
}

.intake.failed {
  color: var(--err);
  border-color: #f0646455;
}

.intake .card-row {
  gap: 10px;
}

.chips {
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
  display: flex;
}

.chip {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--muted);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11px;
}

.chip:hover, .chip.on {
  border-color: var(--accent);
  color: var(--text);
}

.wide-seg {
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  width: 100%;
  display: grid;
}

.wide-seg button {
  padding: 6px 4px;
  font-family: inherit;
}

.range {
  width: 100%;
  accent-color: var(--accent);
}

.scene-dir {
  color: #c4b5fd;
  margin: 0 12px 6px;
  font-size: 11px;
}

.scene-redo {
  margin: 0 12px 12px;
}

.shoot-card {
  background: linear-gradient(135deg, #f0646410, #0000);
  border-color: #f0646455;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  display: flex;
}

.shoot-card .hint {
  margin: 4px 0 8px;
}

.shoot-card .field {
  font-size: 12px;
}

.shoot-card > button {
  white-space: nowrap;
  flex: none;
}

.scene-sound, .suggest {
  margin: 0 12px 8px;
}

.suggest-row {
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.suggest-pick {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  cursor: pointer;
  width: 50%;
  color: var(--muted);
  background: none;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  display: grid;
  overflow: hidden;
}

.suggest-pick img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  display: block;
}

.suggest-pick span {
  padding: 0 0 5px;
}

.suggest-pick:hover {
  border-color: var(--accent);
  color: var(--text);
}

.take-ok {
  color: var(--ok);
  font-size: 12px;
}

.take-miss {
  color: var(--warn);
  font: 11px var(--mono);
}

.suspects {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.suspect-row {
  align-items: center;
  margin-bottom: 6px;
}

.suspect-say {
  gap: 6px;
  display: flex;
}

.take-video {
  border-radius: var(--r);
  background: #000;
  width: 100%;
  max-height: 360px;
  margin: 4px 0 10px;
  display: block;
}

.source-preview {
  border-radius: var(--r);
  object-fit: contain;
  background: #000;
  width: calc(100% - 24px);
  max-height: 320px;
  margin: 12px;
  display: block;
}

audio.source-preview {
  background: none;
}

.scene-direct {
  gap: 6px;
  margin: 0 12px 12px;
  display: grid;
}

.site {
  min-height: 100%;
  color: var(--text);
  background: linear-gradient(#ffffff06 1px, #0000 1px) 0 0 / 48px 48px, linear-gradient(90deg, #ffffff06 1px, #0000 1px) 0 0 / 48px 48px, radial-gradient(1400px 700px at 75% -10%, #0d99ff22, #0000 60%), #111112;
  font-size: 16px;
  line-height: 1.55;
}

.site a {
  color: inherit;
}

.site {
  --faint: #8f8f8f;
}

.site main {
  height: auto;
}

.site main:focus {
  outline: none;
}

.site .skip-link {
  z-index: 50;
  color: #fff;
  background: #0a6fc2;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 600;
  text-decoration: none;
  position: absolute;
  top: -100px;
  left: 16px;
}

.site .skip-link:focus {
  top: 12px;
}

.site :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.site-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-wrap.narrow {
  max-width: 880px;
}

.site .wordmark {
  letter-spacing: -.6px;
  font-size: 22px;
  font-weight: 750;
}

.site .wordmark span {
  color: var(--accent);
}

.site .muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}

.site h1 {
  letter-spacing: -.03em;
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.04;
}

.site h2 {
  letter-spacing: -.02em;
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 680;
  line-height: 1.1;
}

.site h3 {
  letter-spacing: -.01em;
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 640;
}

.site .soft {
  color: var(--muted);
}

.site .eyebrow {
  letter-spacing: 0;
  color: var(--accent-2);
  text-wrap: balance;
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.site .lead {
  color: #c9c9c9;
  max-width: 620px;
  margin: 0 0 30px;
  font-size: 19px;
}

.site .section-lead {
  color: var(--muted);
  max-width: 680px;
  margin: 0 0 40px;
  font-size: 18px;
}

.site .note {
  color: var(--faint);
  margin: 16px 0 0;
  font-size: 13px;
}

.site .btn {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}

.site .btn-primary {
  background: #0a6fc2;
  box-shadow: 0 6px 24px #0d99ff40;
  color: #fff !important;
}

.site .btn-primary:hover {
  background: #085ba0;
}

.site .btn-primary:disabled {
  opacity: .55;
  cursor: default;
}

.site .btn-ghost {
  border-color: var(--line-2);
  color: var(--text);
  background: #ffffff08;
}

.site .btn-ghost:hover {
  background: #ffffff12;
}

.site .btn-lg {
  min-height: 52px;
  padding: 0 24px;
  font-size: 16px;
}

.site .wide-btn {
  width: 100%;
}

.site .cta-row {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.site-head {
  z-index: 20;
  backdrop-filter: blur(14px);
  background: #111112cc;
  border-bottom: 1px solid #ffffff10;
  position: sticky;
  top: 0;
}

.site .head-row {
  align-items: center;
  gap: 24px;
  height: 64px;
  display: flex;
}

.site .home {
  text-decoration: none;
}

.site-nav {
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
  display: flex;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav .btn {
  color: #fff;
}

.site .menu-btn {
  border: 1px solid var(--line-2);
  background: none;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  display: none;
}

.site .menu-btn span {
  background: var(--text);
  border-radius: 2px;
  width: 18px;
  height: 2px;
}

.site .hero {
  padding: 88px 0 40px;
}

.site .hero-grid {
  display: grid;
}

.site .hero .shot {
  margin-top: 56px;
}

.site .shot {
  background: #0b0b0c;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 40px 120px #000a, 0 0 0 1px #00000080;
}

.site .shot-bar {
  background: #1c1c1d;
  border-bottom: 1px solid #ffffff12;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  display: flex;
}

.site .shot-bar i {
  background: #3a3a3c;
  border-radius: 50%;
  width: 11px;
  height: 11px;
}

.site .shot img, .site .shot video {
  background: #0b0b0c;
  width: 100%;
  height: auto;
  display: block;
}

.site .band {
  border-top: 1px solid #ffffff0d;
  padding: 96px 0;
}

.site .band.first {
  border-top: 0;
  padding-top: 72px;
}

.site .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  display: grid;
}

.site .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.site .card {
  background: #1a1a1bcc;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  padding: 26px;
}

.site .card p {
  margin: 0;
}

.site .audience {
  padding: 32px;
}

.site .tag {
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-2);
  background: #0d99ff1a;
  border: 1px solid #0d99ff40;
  border-radius: 999px;
  margin-bottom: 16px;
  padding: 6px 10px;
  display: inline-block;
}

.site .ticks {
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.site .ticks li {
  padding-left: 26px;
  position: relative;
}

.site .ticks li:before {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.site .steps {
  background: #ffffff14;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  overflow: hidden;
}

.site .steps li {
  background: #161617;
  padding: 28px 24px;
}

.site .steps p {
  margin: 0;
}

.site .step-n {
  font: 600 12px/1 var(--mono);
  color: var(--accent-2);
  margin-bottom: 18px;
  display: block;
}

.site .features {
  gap: 88px;
  display: grid;
}

.site .feature {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 56px;
  display: grid;
}

.site .feature.flip .feature-copy {
  order: 2;
}

.site .feature-copy p {
  font-size: 17px;
}

.site .byok {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  display: grid;
}

.site .providers {
  border: 1px solid #ffffff14;
  border-radius: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.site .providers li {
  background: #161617;
  border-top: 1px solid #ffffff0f;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  display: flex;
}

.site .providers li:first-child {
  border-top: 0;
}

.site .plan {
  background: #161617;
  border: 1px solid #0d99ff55;
  border-radius: 14px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  display: grid;
  overflow: hidden;
  box-shadow: 0 30px 90px #0d99ff1a;
}

.site .plan-trial {
  background: linear-gradient(160deg, #0d99ff22, #0000 70%);
  border-right: 1px solid #ffffff12;
  padding: 32px;
}

.site .plan-trial .tag {
  font-size: 13px;
}

.site .plan-main {
  gap: 14px;
  padding: 32px;
  display: grid;
}

.site .plan-main p {
  margin: 0;
}

.site .plan-price b {
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-right: 10px;
  font-size: 52px;
}

.site .trial-strip {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0 0 22px;
  display: flex;
}

.site .trial-strip .tag {
  margin: 0;
}

.site .tiers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.site .tier {
  background: #161617;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px 24px;
  display: flex;
  position: relative;
}

.site .tier h3 {
  margin: 0;
  font-size: 22px;
}

.site .tier p {
  margin: 0;
}

.site .tier .tier-tagline {
  min-height: 3em;
  font-size: 15px;
}

.site .tier .ticks {
  flex: 1;
  align-content: start;
  margin: 4px 0 8px;
  font-size: 15px;
}

.site .tier.featured {
  background: linear-gradient(170deg, #0d99ff1f, #161617 55%);
  border-color: #0d99ff88;
  box-shadow: 0 30px 90px #0d99ff22;
}

.site .tier-badge {
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  background: #0a6fc2;
  border-radius: 999px;
  padding: 6px 10px;
  position: absolute;
  top: -12px;
  left: 24px;
}

.site .tier-price {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.site .tier-price b {
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  line-height: 1;
}

.site .tier-price span {
  font-size: 13px;
}

.site .tier-minutes {
  background: #ffffff08;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 600;
}

.site .tier.enterprise {
  background: #121213;
  border-style: dashed;
}

.site .tier.enterprise .ticks li:before {
  color: var(--accent-2);
}

.site .tier-pack {
  margin: 18px 0 0;
  font-size: 15px;
}

.site .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.site .ticks-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.site .faq {
  gap: 10px;
  display: grid;
}

.site .faq details {
  background: #161617;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  padding: 0 20px;
}

.site .faq summary {
  cursor: pointer;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.site .faq summary:after {
  content: "+";
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.site .faq details[open] summary:after {
  content: "–";
}

.site .faq details p {
  margin: 0 0 18px;
}

.site .closing {
  text-align: center;
  background: radial-gradient(900px 400px at 50% 100%, #0d99ff26, #0000 70%);
  border-top: 1px solid #ffffff0d;
  padding: 110px 0;
}

.site .closing h2 {
  margin-bottom: 28px;
}

.site-foot {
  background: #0d0d0e;
  border-top: 1px solid #ffffff12;
  padding: 56px 0 28px;
}

.site .foot-grid {
  grid-template-columns: 2fr 1fr 1.4fr 1fr;
  gap: 32px;
  display: grid;
}

.site .foot-grid h2.foot-h {
  font: 600 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 6px 0 16px;
}

.site .foot-grid a {
  color: var(--muted);
  padding: 5px 0;
  font-size: 14px;
  text-decoration: none;
  display: block;
}

.site .foot-grid a:hover, .site .foot-grid a.on {
  color: var(--text);
}

.site .foot-base {
  border-top: 1px solid #ffffff0d;
  margin-top: 40px;
  padding-top: 20px;
}

.site .auth-main {
  place-items: start center;
  min-height: calc(100vh - 64px);
  padding: 56px 16px 80px;
  display: grid;
}

.site .auth-card {
  background: #1a1a1b;
  border: 1px solid #ffffff17;
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  padding: 36px 32px;
  box-shadow: 0 40px 100px #0009;
}

.site .auth-card h1 {
  margin: 0 0 6px;
  font-size: 30px;
}

.site .auth-card > .muted {
  margin: 0 0 24px;
}

.site .auth-form {
  gap: 16px;
  margin-top: 8px;
  display: grid;
}

.site .auth-form label {
  color: #cfcfcf;
  gap: 7px;
  font-size: 14px;
  display: grid;
}

.site .auth-form input[type="text"] {
  border: 1px solid var(--line-2);
  background: #111112;
  border-radius: 8px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
}

.site .auth-form input[type="email"] {
  border: 1px solid var(--line-2);
  background: #111112;
  border-radius: 8px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
}

.site .auth-form input[type="password"] {
  border: 1px solid var(--line-2);
  background: #111112;
  border-radius: 8px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
}

.site .auth-form input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px #0d99ff33;
}

.site .auth-form .hint {
  color: var(--faint);
  font-size: 12px;
}

.site .auth-form .hint.ok {
  color: var(--ok);
}

.site .auth-form .check {
  color: var(--muted);
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
}

.site .auth-form .check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: none;
  margin: 2px 0 0;
}

.site .auth-form .check a {
  color: var(--accent-2);
}

.site .auth-form .hp {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

.site .auth-form .error, .site .auth-card .error {
  margin: 0;
  font-size: 14px;
}

.site .auth-alt {
  margin: 18px 0 0;
  font-size: 14px;
}

.site .auth-alt a {
  color: var(--accent-2);
}

.site .auth-done {
  text-align: center;
  justify-items: center;
  gap: 14px;
  display: grid;
}

.site .big-icon {
  font-size: 44px;
  line-height: 1;
}

.site .ok-note {
  color: var(--ok);
}

.site .spinner {
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: .8s linear infinite spin;
  display: inline-block;
}

.site .legal-grid {
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  display: grid;
}

.site .legal-nav {
  gap: 2px;
  display: grid;
  position: sticky;
  top: 88px;
}

.site .legal-nav a {
  color: var(--muted);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
}

.site .legal-nav a:hover {
  color: var(--text);
  background: #ffffff0a;
}

.site .legal-nav a.on {
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
  background: #0d99ff1f;
}

.site .legal {
  max-width: 760px;
}

.site .legal h1 {
  font-size: 40px;
}

.site .legal h2 {
  margin: 40px 0 12px;
  font-size: 24px;
}

.site .legal h3 {
  margin: 28px 0 8px;
  font-size: 18px;
}

.site .legal p, .site .legal li {
  color: #cfcfcf;
}

.site .legal a {
  color: var(--accent-2);
}

.site .legal .meta {
  color: var(--faint);
  font-size: 14px;
}

.site .legal table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.site .legal th, .site .legal td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ffffff14;
  padding: 10px 12px;
}

.site .legal th {
  color: var(--muted);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  min-width: 7em;
  font-weight: 600;
}

.site .legal address {
  color: #cfcfcf;
  font-style: normal;
}

.site .release {
  border-top: 1px solid #ffffff14;
  padding: 40px 0;
  scroll-margin-top: 80px;
}

.site .release:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

.site .release h2 {
  margin: 6px 0 8px;
  font-size: 28px;
}

.site .release header p {
  margin: 0 0 8px;
}

.site .release-date {
  color: var(--accent-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site .release-date:hover {
  text-decoration: underline;
}

.site .release-kind {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 24px 0 8px;
  font-size: 13px;
}

.site .release-kind.new {
  color: var(--accent-2);
}

.site .release-kind.improved {
  color: var(--ok);
}

.site .release-kind.fixed {
  color: var(--warn);
}

.site .release-list {
  margin: 0;
  padding-left: 20px;
}

.site .release-list li {
  color: #cfcfcf;
  margin: 6px 0;
  line-height: 1.55;
}

mark.todo {
  color: var(--warn);
  background: #e3a33b2e;
  border-radius: 4px;
  padding: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}

@media (width <= 980px) {
  .site .grid-4, .site .steps, .site .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site .tier .tier-tagline {
    min-height: 0;
  }

  .site .feature, .site .feature.flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site .feature.flip .feature-copy {
    order: 0;
  }

  .site .byok, .site .plan {
    grid-template-columns: 1fr;
  }

  .site .plan-trial {
    border-bottom: 1px solid #ffffff12;
    border-right: 0;
  }

  .site .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site .legal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site .legal-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
}

@media (width <= 760px) {
  .site-wrap {
    padding: 0 16px;
  }

  .site .menu-btn {
    display: flex;
  }

  .site-nav {
    z-index: 30;
    background: var(--bg);
    border-bottom: 1px solid #ffffff14;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    box-shadow: 0 30px 60px #000a;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    border-bottom: 1px solid #ffffff0d;
    align-items: center;
    min-height: 48px;
    padding: 14px 4px;
    display: flex;
  }

  .site .home {
    align-items: center;
    min-height: 44px;
    display: inline-flex;
  }

  .site .foot-grid a, .site .legal-nav a {
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .site-nav .btn {
    border-bottom: 0;
    margin-top: 12px;
  }

  .site .hero {
    padding-top: 48px;
  }

  .site .band {
    padding: 64px 0;
  }

  .site .grid-2, .site .grid-3, .site .grid-4, .site .steps, .site .tiers, .site .ticks-2 {
    grid-template-columns: 1fr;
  }

  .site .tiers {
    gap: 22px;
  }

  .site .lead {
    font-size: 17px;
  }

  .site .auth-card {
    padding: 28px 20px;
  }

  .site .foot-grid {
    grid-template-columns: 1fr;
  }
}

button.avatar {
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.plan-badge {
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.plan-badge:before {
  content: "● ";
}

.plan-badge.info:before {
  color: var(--accent);
}

.plan-badge.warn:before {
  color: var(--warn);
}

.plan-badge.err:before {
  color: var(--err);
}

.plan-badge.err {
  background: #f064641a;
  border-color: #f0646466;
}

.plan-badge:hover {
  border-color: var(--accent);
}

.account {
  max-width: 760px;
}

.acc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 20px 22px;
}

.acc-card h2 {
  margin: 0 0 10px;
  font-size: 15px;
}

.acc-card h3.danger-title {
  color: var(--err);
  margin: 22px 0 6px;
  font-size: 13px;
}

.acc-state {
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-weight: 600;
  display: flex;
}

.acc-state .dot {
  background: var(--faint);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.acc-state.ok .dot {
  background: var(--ok);
}

.acc-state.info .dot {
  background: var(--accent);
}

.acc-state.warn .dot {
  background: var(--warn);
}

.acc-state.err .dot {
  background: var(--err);
}

.acc-subscribe {
  background: #0d99ff0d;
  border: 1px solid #0d99ff40;
  border-radius: 8px;
  gap: 12px;
  padding: 16px;
  display: grid;
}

.acc-price b {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-size: 26px;
}

.acc-meter {
  gap: 8px;
  margin: 0 0 16px;
  display: grid;
}

.acc-meter-head {
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  display: flex;
}

.acc-meter-bar {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.acc-meter-bar span {
  background: var(--ok);
  border-radius: inherit;
  height: 100%;
  display: block;
}

.acc-meter.warn .acc-meter-bar span {
  background: var(--warn);
}

.acc-meter.err .acc-meter-bar span {
  background: var(--err);
}

.acc-meter .hint {
  margin: 0;
}

.acc-tiers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.acc-tier {
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  cursor: default;
  border-radius: 8px;
  align-content: start;
  gap: 6px;
  padding: 14px;
  display: grid;
}

.acc-subscribe .acc-tier {
  cursor: pointer;
}

.acc-tier.chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: #0d99ff14;
}

.acc-tier.current {
  border-color: var(--ok);
}

.acc-tier-head {
  align-items: center;
  gap: 8px;
  display: flex;
}

.acc-tier-min {
  margin: 0;
  font-weight: 600;
}

.acc-tier .hint, .acc-tier p {
  margin: 0;
}

.acc-switch, .acc-pack {
  gap: 10px;
  margin: 18px 0 0;
  display: grid;
}

.acc-switch h3, .acc-pack h3 {
  margin: 0;
  font-size: 13px;
}

.acc-pack .hint {
  margin: 0;
}

.acc-pack button {
  justify-self: start;
}

.acc-confirm {
  background: #0d99ff0d;
  border: 1px solid #0d99ff40;
  border-radius: 8px;
  padding: 12px 14px;
}

.acc-confirm p {
  margin: 0;
}

.acc-enterprise {
  margin: 18px 0 12px;
}

@media (width <= 760px) {
  .acc-tiers {
    grid-template-columns: 1fr;
  }
}

.acc-list {
  color: var(--muted);
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  display: grid;
}

.acc-card .check {
  color: var(--muted);
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.acc-card .check input {
  accent-color: var(--accent);
  margin-top: 2px;
}

.acc-rows {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 1px;
  margin: 10px 0 12px;
  display: grid;
  overflow: hidden;
}

.acc-row {
  background: var(--panel-2);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.acc-row .name {
  flex: 1;
  font-weight: 600;
}

.acc-inline {
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.acc-inline .field {
  flex: 1;
  min-width: 0;
}

.acc-form {
  gap: 6px;
  max-width: 420px;
  display: grid;
}

.readonly {
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--muted);
  border: 1px dashed var(--line-2);
  margin: 0 0 6px;
  padding: 7px 10px;
}

button.danger {
  border-radius: var(--r);
  background: var(--err);
  color: #fff;
  border: 0;
  padding: 6px 14px;
  font-weight: 600;
}

button.danger:disabled {
  opacity: .45;
  cursor: default;
}

.site .legal-grid > *, .site .feature > *, .site .byok > *, .site .plan > * {
  min-width: 0;
}

.site .legal {
  overflow-wrap: anywhere;
}

.acc-row.pending .name {
  color: var(--muted);
  font-weight: 500;
}

.acc-row .meta {
  color: var(--faint);
  font-size: 12px;
}

.acc-inline .field.narrow {
  flex: none;
  width: 130px;
}

.acc-row select.field {
  flex: none;
  width: 130px;
  padding: 4px 8px;
}

.card.start {
  max-width: 760px;
  padding: 22px 24px;
}

.card.start h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.start-steps {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  overflow: hidden;
}

.start-step {
  background: var(--panel-2);
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  display: grid;
}

.start-n {
  border: 1px solid var(--line-2);
  width: 28px;
  height: 28px;
  color: var(--muted);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: grid;
}

.start-step.done .start-n {
  color: var(--ok);
  background: #4fc18426;
  border-color: #4fc18466;
}

.start-step.done b {
  color: var(--muted);
}

.start-copy p {
  margin: 2px 0 0;
}

.key-copy {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--muted);
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 3px 6px;
  font-size: 12px;
}

.acc-form.wide-form {
  max-width: 520px;
}

.acc-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.voice-row {
  align-items: center;
}

.voice-copy {
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: grid;
}

.voice-state {
  color: var(--muted);
  font-size: 12px;
}

.voice-state.ok {
  color: var(--ok);
}

.voice-state.busy {
  color: var(--warn);
}

.voice-state.err {
  color: var(--err);
}

button.danger.small {
  padding: 3px 10px;
  font-size: 12px;
}

.take-list {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  gap: 1px;
  margin-top: 10px;
  display: grid;
  overflow: hidden;
}

.take-row {
  background: var(--panel-2);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  display: flex;
}

.take-row .name {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.take-row .meta {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
}

.hidden {
  display: none !important;
}

.kit-ways {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.kit-ways .acc-card {
  margin-bottom: 0;
}

.kit-ways + .acc-card {
  margin-top: 14px;
}

.kit-new {
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 24px;
  display: grid;
}

.kit-colors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
  display: grid;
}

.kit-color {
  color: var(--muted);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.kit-color input[type="color"] {
  border: 1px solid var(--line-2);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  width: 30px;
  height: 26px;
  padding: 0;
}

.kit-preview {
  border: 1px solid var(--line);
  border-radius: 10px;
  align-content: start;
  gap: 6px;
  min-height: 230px;
  padding: 18px 16px 0;
  display: grid;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.kit-preview .kp-head {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.kit-preview .kp-body {
  margin: 0;
  font-size: 14px;
}

.kit-preview .kp-dot {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  margin: 6px 0 12px;
}

.kit-preview .kp-end {
  justify-items: start;
  gap: 10px;
  margin: 0 -16px;
  padding: 18px 16px;
  display: grid;
}

.kit-preview .kp-end b {
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
}

.kit-edit .kit-colors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width <= 1100px) {
  .kit-new, .kit-ways {
    grid-template-columns: 1fr;
  }
}

.raw-player {
  background: #000;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.raw-mount {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 100%;
}

.raw-player.vertical .raw-mount {
  aspect-ratio: 9 / 16;
  width: auto;
  height: 100%;
}

.raw-state {
  color: var(--muted);
  font-size: 13px;
  position: absolute;
}

.raw-tag {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--warn);
  pointer-events: none;
  background: #000a;
  border: 1px solid #e3a33b66;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  top: 10px;
  left: 10px;
}

.slate-raw {
  margin-top: 14px;
}

.prod-empty {
  background: var(--panel);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.swatch.style {
  background: conic-gradient(#a78bfa, #f0a868, #4fc184, #a78bfa);
  border-radius: 3px;
}

.style-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
  display: grid;
}

.style-card {
  align-content: start;
  gap: 4px;
  display: grid;
}

.style-card.own {
  border-color: #a78bfa55;
}

.style-card .hint {
  margin: 0;
}

.style-head {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.style-tools {
  margin-bottom: 18px;
}

.style-tools .card {
  align-content: start;
  gap: 8px;
  display: grid;
}

.style-form {
  margin-bottom: 24px;
}

@media (width <= 720px) {
  .style-tools.two {
    grid-template-columns: 1fr;
  }
}

.style-card .row-actions {
  align-items: center;
  margin-top: 8px;
}

.style-card .row-actions .button.small {
  padding: 3px 10px;
  font-size: 12px;
}

.style-form > b, .style-tools .card > b {
  margin-bottom: 6px;
  display: block;
}

.phone {
  background: var(--bg);
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 15px;
  line-height: 1.45;
}

.ph-bar {
  z-index: 10;
  min-height: 52px;
  padding: env(safe-area-inset-top) 16px 0;
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  background: #1f1f1fe6;
  align-items: center;
  gap: 12px;
  display: flex;
  position: sticky;
  top: 0;
}

.ph-bar .brand {
  min-height: 44px;
  font-size: 18px;
}

.ph-workspace {
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 14px;
  overflow: hidden;
}

.ph-out {
  color: var(--faint);
  background: none;
  border: 0;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
}

.ph-main {
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: grid;
}

.ph-title {
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.ph-kicker {
  color: var(--faint);
  margin: 0 0 -10px;
  font-size: 13px;
}

.ph-laptop {
  color: var(--faint);
  margin: 0;
  font-size: 13px;
}

.ph-quiet {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.ph-chev {
  color: var(--faint);
  flex: none;
  font-size: 22px;
  line-height: 1;
}

.ph-now {
  width: 100%;
  min-height: 64px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(90deg, #0d99ff26, #0d99ff08);
  border: 1px solid #0d99ff66;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  display: flex;
}

.ph-now-text {
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: grid;
}

.ph-now-text b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.ph-now-text span {
  color: var(--muted);
  font-size: 13px;
}

.ph-project {
  gap: 8px;
  display: grid;
}

.ph-project-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 2px 0;
  display: flex;
}

.ph-project-head h2 {
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ph-project-head span {
  color: var(--faint);
  white-space: nowrap;
  font-size: 13px;
}

.ph-episodes {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.ph-episodes:empty {
  display: none;
}

.ph-episodes li + li {
  border-top: 1px solid var(--line);
}

.ph-episode {
  width: 100%;
  min-height: 60px;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.ph-episode:active, .ph-now:active {
  background: var(--panel-2);
}

.ph-num {
  font: 13px var(--mono);
  color: var(--faint);
  flex: none;
  width: 22px;
}

.ph-ep-text {
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.ph-ep-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ph-ep-state {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.ph-dot {
  width: 8px;
  height: 8px;
  box-shadow: inset 0 0 0 1.5px var(--faint);
  border-radius: 50%;
  flex: none;
}

.ph-dot.done {
  background: var(--ok);
  box-shadow: none;
}

.ph-dot.busy {
  background: var(--warn);
  box-shadow: 0 0 0 3px #e3a33b33;
}

.ph-dot.failed {
  background: var(--err);
  box-shadow: none;
}

.ph-dot.skip {
  background: var(--line-2);
  box-shadow: none;
}

.ph-back {
  color: var(--accent-2);
  background: none;
  border: 0;
  justify-self: start;
  min-height: 44px;
  margin: -10px 0 -6px;
  padding: 0 8px 0 0;
  font-size: 15px;
}

.ph-film {
  gap: 10px;
  display: grid;
}

.ph-video {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  width: 100%;
  display: block;
}

.ph-video.tall {
  aspect-ratio: 9 / 16;
  justify-self: center;
  width: auto;
  max-width: 100%;
  max-height: 72vh;
}

.ph-slate {
  aspect-ratio: 16 / 9;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  place-content: center;
  gap: 4px;
  padding: 16px;
  display: grid;
}

.ph-slate b {
  font-weight: 600;
}

.ph-slate span {
  color: var(--muted);
  font-size: 14px;
}

.ph-slate span:empty {
  display: none;
}

.ph-seg {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  justify-self: center;
  padding: 3px;
  display: inline-flex;
}

.ph-seg button {
  min-height: 36px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
}

.ph-seg button.on {
  background: var(--raised);
  color: var(--text);
}

.ph-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  gap: 12px;
  padding: 16px;
  display: grid;
}

.ph-card h3 {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.ph-card-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ph-badge {
  background: var(--raised);
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.ph-badge.ok {
  color: var(--ok);
  background: #4fc18422;
}

.ph-steps {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ph-steps li {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  display: grid;
}

.ph-step-name {
  color: var(--faint);
  font-size: 14px;
}

.ph-steps .ph-ep-state {
  color: var(--text);
  font-size: 14px;
}

.ph-sentences {
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ph-sentences:empty {
  display: none;
}

.ph-sentences li {
  border-left: 2px solid var(--line-2);
  gap: 3px;
  padding-left: 12px;
  display: grid;
}

.ph-sentences li.cam {
  border-left-color: var(--warn);
}

.ph-sentences p {
  overflow-wrap: anywhere;
  margin: 0;
}

.ph-mode {
  color: var(--faint);
  font-size: 12px;
}

.ph-sentences li.cam .ph-mode {
  color: var(--warn);
}

.ph-approve {
  border-radius: 10px;
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

.ph-fb {
  border-top: 1px solid var(--line);
  gap: 4px;
  padding-top: 10px;
  display: grid;
}

.ph-card h3 + .ph-fb {
  border-top: 0;
  padding-top: 0;
}

.ph-fb.approve b {
  color: var(--ok);
}

.ph-fb-head {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  display: flex;
}

.ph-at {
  font: 12px var(--mono);
  color: var(--accent-2);
}

.ph-when {
  color: var(--faint);
  margin-left: auto;
  font-size: 12px;
}

.ph-fb p {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0;
}

.phone .toasts {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
}

.phone .toast-actions button.icon {
  min-width: 44px;
  height: 44px;
}

.phone button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.phone :focus:not(:focus-visible) {
  outline: none;
}

@keyframes vb-fade {
  from {
    opacity: 0;
  }
}

@keyframes vb-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.985);
  }
}

@keyframes vb-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes vb-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes vb-slide {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}

.palette-back {
  animation: .12s ease-out vb-fade;
}

.palette {
  animation: .16s cubic-bezier(.2, .8, .2, 1) vb-pop;
}

.activity-pop {
  transform-origin: 100% 0;
  animation: .14s ease-out vb-drop;
}

.toast {
  animation: .18s ease-out vb-rise;
}

.editor.chatting {
  grid-template-columns: 264px minmax(0, 1fr) 296px;
}

.chat {
  border-left: 1px solid var(--line-2);
  width: 420px;
  animation: .16s ease-out vb-slide;
  left: auto;
  box-shadow: -24px 0 48px #0009;
}

.monitor > *, .ph-main {
  animation: .16s ease-out vb-fade;
}

@media (prefers-reduced-motion: reduce) {
  .palette-back, .palette, .activity-pop, .toast, .chat, .monitor > *, .ph-main, .focus {
    animation: none;
  }
}

.site h1, .site h2, .site h3, .site .tier-tagline, .site .btn {
  text-wrap: balance;
}

.site .lead, .site .section-lead, .site .note, .site .card p, .site .feature-copy p, .site .faq p {
  text-wrap: pretty;
}

@media (width <= 760px) {
  .site .hero .cta-row .btn {
    width: 100%;
  }
}

.site .note .keep {
  white-space: nowrap;
}

@media (width <= 340px) {
  .site .note .keep {
    white-space: normal;
  }
}

.cost-row .usd, .cost-row .num, .film-cost, .msg-cost, .shot-time, .take-row .meta, .take-miss {
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

.cost-row .num {
  white-space: nowrap;
}

.cost-total .big {
  font-variant-numeric: tabular-nums;
}

.step-head {
  z-index: 3;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  padding: 22px 0 12px;
  display: flex;
  position: sticky;
  top: 0;
}

.step-head-text {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.step-head h2 {
  letter-spacing: -.2px;
  margin: 0;
  font-size: 20px;
}

.step-line {
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  display: flex;
  overflow: hidden;
}

.step-line-text {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.step-line .dot, .step-line .badge, .step-line .film-cost {
  flex: none;
}

.step-line .badge:last-child {
  text-overflow: ellipsis;
  flex: 0 auto;
  min-width: 0;
  overflow: hidden;
}

.step-head-actions {
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.step-lead {
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 18px;
}

.step-sub-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  margin: 26px 0 10px;
  display: flex;
}

.step-sub-row .step-sub, .step-sub-row .row-actions {
  margin: 0;
}

.dot {
  flex: none;
}

.shot {
  flex-direction: column;
  display: flex;
}

.shot > button.wide {
  margin-top: auto;
  margin-bottom: 12px;
}

.scene-foot {
  gap: 8px;
  min-width: 0;
  margin-top: auto;
  padding: 0 12px 12px;
  display: grid;
}

.scene-foot > *, .scene .scene-foot button, .scene .scene-foot .error {
  margin: 0;
}

.scene .scene-foot button.wide {
  width: 100%;
  margin: 0;
}

.scene-foot select.field {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
}

.scene-foot .scene-sound {
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  display: grid;
}

.scene-foot .scene-look {
  gap: 6px;
  display: grid;
}

.scene-foot .scene-look .field {
  min-width: 0;
}

.scene-matte {
  align-items: center;
  gap: 6px;
  margin: 0;
  display: flex;
}

.scene-pic img.look-mono {
  filter: grayscale() contrast(1.3);
}

.scene-pic img.look-duotone {
  filter: grayscale() sepia(.7) contrast(1.1);
}

.scene-foot .linkish {
  justify-self: start;
}

.scene .suggest-pick {
  width: calc(50% - 4px);
}

.prod .badge, .step-page .badge, .film-bar .badge, .chat .badge {
  font-family: inherit;
}

button.prod-row {
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border-radius: 0;
  margin: 0;
}

button.prod-row:hover {
  background: var(--panel-2);
}

button.prod-row:focus-visible {
  background: var(--panel-2);
}

button.prod-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.prod-row:focus-visible .go {
  opacity: 1;
}

.cell-text {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.cell .pip {
  width: 9px;
  height: 9px;
}

.cell.todo {
  color: var(--faint);
}

.cell.done {
  color: var(--muted);
}

.cell.now, .cell.todo:hover, .cell.done:hover {
  color: var(--text);
}

.cell.now.todo .pip {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #0d99ff26;
}

.cell.failed .pip {
  box-shadow: 0 0 0 3px #f0646426;
}

.acc-form > button {
  justify-self: start;
  margin-top: 8px;
}

.acc-card > h3 {
  margin: 22px 0 8px;
  font-size: 13px;
}

.acc-enterprise .hint {
  margin: 0;
}

.acc-enterprise .acc-actions, .acc-card > .hint + .acc-actions {
  margin-top: 10px;
}

.acc-withdraw {
  margin-top: 18px;
}

.style-grid .card {
  margin: 0;
}

.style-card {
  flex-direction: column;
  display: flex;
}

.style-card .row-actions {
  margin-top: auto;
  padding-top: 10px;
}

.style-card .row-actions > .small {
  border-radius: var(--r);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.style-card .row-actions > .linkish, .style-card .row-actions > .danger {
  margin-left: auto;
}

.style-head {
  align-items: center;
}

.style-own {
  color: #c4b5fd;
  background: #a78bfa1f;
  border-color: #a78bfa55;
  margin-left: auto;
}

.style-tools .style-file {
  margin: 0;
}

.activity-btn {
  align-items: center;
  gap: 7px;
  min-height: 28px;
  display: inline-flex;
}

.activity-dot {
  background: var(--faint);
  opacity: .7;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.activity-btn:hover .activity-dot {
  opacity: 1;
}

.activity-btn .spinner {
  border-width: 1.5px;
  width: 10px;
  height: 10px;
}

.monitor-head .counts {
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.keys-page {
  max-width: 820px;
}

.keys-lead {
  color: var(--muted);
  max-width: 640px;
  margin: -12px 0 18px;
}

.provider-list {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.provider {
  background: var(--panel);
  gap: 10px;
  padding: 14px 16px;
  display: grid;
}

.provider-head {
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.provider-copy {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.provider-copy .hint {
  margin: 0;
}

.provider-state {
  color: var(--faint);
  white-space: nowrap;
  font-size: 12px;
}

.provider.on .provider-state {
  color: var(--ok);
}

button.ghost.quiet {
  color: var(--muted);
  border-color: #0000;
}

button.ghost.quiet:hover {
  border-color: var(--line-2);
  color: var(--text);
}

.key-lines, .key-form, .key-confirm, .key-note {
  margin-left: 20px;
}

.key-lines {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.key-line {
  background: var(--panel-2);
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 4px 6px 4px 12px;
  display: grid;
}

.key-line .name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.key-line code {
  font: 12px var(--mono);
  color: var(--faint);
}

.key-line .meta {
  color: var(--ok);
  white-space: nowrap;
  font-size: 12px;
}

.key-line .key-copy {
  grid-column: auto;
  margin: 0;
}

.key-note {
  margin-top: -4px;
}

.key-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.key-form .error {
  grid-column: 1 / -1;
  margin: 0;
}

.key-confirm {
  border-radius: var(--r);
  background: #f064640d;
  border: 1px solid #f0646455;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.key-confirm p {
  color: var(--muted);
  flex: 260px;
  margin: 0;
  font-size: 12px;
}

@media (width <= 1100px) {
  .key-form {
    grid-template-columns: 1fr 1fr;
  }
}

button.danger-text {
  border-radius: var(--r);
  color: var(--err);
  background: none;
  border: 0;
  padding: 6px 10px;
}

button.danger-text:hover {
  background: #f064641a;
}

button.danger-text.small {
  padding: 3px 8px;
  font-size: 12px;
}

.row-text {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.row .src-add, .row .src-edit {
  color: var(--faint);
  opacity: .5;
  background: none;
  border: 0;
  border-radius: 4px;
  justify-self: start;
  padding: 1px 2px;
  font-size: 12px;
  transition: opacity .12s;
}

.row .src-add.filled {
  opacity: 1;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
}

.row:hover .src-add, .row:hover .src-edit {
  opacity: 1;
}

.row:focus-within .src-add {
  opacity: 1;
}

.row:focus-within .src-edit {
  opacity: 1;
}

.row .src-add:focus-visible {
  opacity: 1;
}

.row .src-edit:focus-visible {
  opacity: 1;
}

.row .src-add:hover:not(:disabled), .row .src-edit:hover {
  color: var(--accent-2);
}

.row .src-add:disabled {
  cursor: default;
}

.src-line {
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.src-link {
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 1px 2px;
  font-size: 12px;
  text-decoration: none;
  overflow: hidden;
}

.src-link:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.src-link:after {
  content: " ↗";
  color: var(--faint);
}

.inspector .badge, .inspector .seg button {
  font-family: inherit;
}

.arch-group {
  color: var(--muted);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px 12px 2px;
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.arch-group .name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.arch-group .meta {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 400;
}

.item.render-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  padding-left: 18px;
}

.item.render-row .name {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.item.render-row:hover .name, .item.render-row.on .name {
  color: var(--text);
}

.rail-toggle.arch-older {
  padding-left: 34px;
}

.item.voice-item .name b {
  font-weight: 600;
}

.item.voice-item .name .sub {
  color: var(--muted);
}

.assets h3 button.fold {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 4px 2px 0;
  display: inline-flex;
}

.assets h3 button.fold .caret {
  width: 10px;
  display: inline-block;
}

.editor .skip-link {
  z-index: 60;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  text-decoration: none;
  position: fixed;
  top: -100px;
  left: 12px;
}

.editor .skip-link:focus {
  top: 8px;
}

.editor .topbar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.editor .panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.editor .monitor:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.editor .topbar:focus:not(:focus-visible) {
  outline: none;
}

.editor .panel:focus:not(:focus-visible) {
  outline: none;
}

.editor .monitor:focus:not(:focus-visible) {
  outline: none;
}

.inspector .wide-seg {
  grid-auto-columns: minmax(0, 1fr);
}

.inspector .wide-seg button {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.inspector .wide-seg button + button {
  border-left: 1px solid var(--line-2);
}

.prop.wrap {
  align-items: start;
}

.prop.wrap .label {
  padding-top: 3px;
}

.prop.wrap .value {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 3px 0;
  line-height: 1.45;
  display: block;
}

.saved-note {
  color: var(--ok);
  margin: 6px 0 0;
  font-size: 12px;
}

.line-row {
  align-items: center;
  gap: 8px;
  min-height: 30px;
  display: flex;
}

.line-row .dot {
  flex: none;
}

.line-row .name {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.line-row .meta {
  color: var(--faint);
  white-space: nowrap;
  font-size: 12px;
}

.line-row .meta.failed {
  color: var(--err);
}

.inspector .scroll > .danger-text.end {
  margin-top: 20px;
}

.inspector .scroll > .confirm-end {
  margin: 20px 12px 0;
}

.confirm-end .hint {
  margin: 0;
}

@media (width >= 901px) {
  .editor.pagewide {
    grid-template-columns: 264px minmax(0, 1fr) 0;
  }

  .editor.pagewide > .inspector {
    display: none;
  }
}

.topbar .panel-toggle {
  font-size: 15px;
}

.topbar .panel-toggle.on {
  color: var(--text);
  background: var(--raised);
}