.ais-root {
  --ais-panel: #111312;
  --ais-panel-2: #171918;
  --ais-line: #292c2a;
  --ais-ink: #f4f4ef;
  --ais-soft: #969b95;
  --ais-accent: #ff765f;
  --ais-mint: #7af0b2;
  color: var(--ais-ink);
  font-family: "Aptos Display", "Trebuchet MS", sans-serif;
}

.ais-root button,
.ais-root input,
.ais-root textarea,
.ais-root select {
  font-family: inherit;
}

.ais-dashboard {
  max-width: 1380px;
  margin: 0 auto;
}

.ais-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  min-height: 230px;
  padding: 2.4rem;
  border: 1px solid var(--ais-line);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 78% 15%, rgba(122, 240, 178, .15), transparent 31%),
    linear-gradient(125deg, #171917 0%, #111211 55%, #201311 100%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .25);
}

.ais-hero::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: -90px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, .018), 0 0 0 78px rgba(255, 255, 255, .012);
  pointer-events: none;
}

.ais-eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  color: var(--ais-mint);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ais-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.ais-hero p {
  max-width: 620px;
  margin: 1rem 0 0;
  color: var(--ais-soft);
  font-size: .95rem;
  line-height: 1.6;
}

.ais-primary,
.ais-secondary,
.ais-icon-button,
.ais-tool-button {
  border: 0;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

.ais-primary {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .72rem 1.15rem;
  border-radius: .68rem;
  background: var(--ais-accent);
  color: #140b09;
  font-weight: 900;
}

.ais-primary:hover {
  transform: translateY(-1px);
  background: #ff8a76;
}

.ais-primary:disabled,
.ais-secondary:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.ais-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  padding: .58rem .9rem;
  border: 1px solid var(--ais-line);
  border-radius: .62rem;
  background: #171817;
  color: var(--ais-ink);
  font-weight: 700;
}

.ais-secondary:hover {
  border-color: #494d49;
  background: #1d1f1e;
}

.ais-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin: 1rem 0 2rem;
}

.ais-stat {
  padding: 1rem 1.15rem;
  border: 1px solid var(--ais-line);
  border-radius: .85rem;
  background: var(--ais-panel);
}

.ais-stat strong {
  display: block;
  font-size: 1.55rem;
  letter-spacing: -.04em;
}

.ais-stat span {
  color: var(--ais-soft);
  font-size: .75rem;
}

.ais-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.7rem 0 .8rem;
}

.ais-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.ais-section-head p {
  margin: .25rem 0 0;
  color: var(--ais-soft);
  font-size: .78rem;
}

.ais-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: .9rem;
}

.ais-project-card {
  overflow: hidden;
  border: 1px solid var(--ais-line);
  border-radius: .95rem;
  background: var(--ais-panel);
  transition: transform .18s ease, border-color .18s ease;
}

.ais-project-card:hover {
  transform: translateY(-2px);
  border-color: #454945;
}

.ais-project-preview {
  position: relative;
  display: grid;
  min-height: 150px;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(-45deg, rgba(255, 255, 255, .025) 25%, transparent 25%) 0 9px / 18px 18px,
    #0c0d0c;
}

.ais-project-preview::before {
  content: "";
  width: 58px;
  aspect-ratio: var(--ais-ratio, 9 / 16);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .35rem;
  background: linear-gradient(150deg, #252a27, #151615 65%, #4a2720);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.ais-card-body {
  padding: .95rem;
}

.ais-card-title {
  overflow: hidden;
  margin-bottom: .35rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-card-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--ais-soft);
  font-size: .72rem;
}

.ais-card-actions {
  display: flex;
  gap: .4rem;
  margin-top: .85rem;
}

.ais-card-actions .ais-secondary:first-child {
  flex: 1;
}

.ais-empty {
  display: grid;
  min-height: 230px;
  place-items: center;
  padding: 2rem;
  border: 1px dashed #343734;
  border-radius: 1rem;
  color: var(--ais-soft);
  text-align: center;
}

.ais-job-list {
  display: grid;
  gap: .5rem;
}

.ais-job-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .72rem .8rem;
  border: 1px solid var(--ais-line);
  border-radius: .7rem;
  background: var(--ais-panel);
}

.ais-job-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: .55rem;
  background: #202320;
  color: var(--ais-mint);
  font-weight: 900;
}

.ais-job-center-button {
  position: relative;
  white-space: nowrap;
}

.ais-job-center-symbol {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #252825;
  color: var(--ais-soft);
  font-size: .72rem;
}

.ais-job-center-button.has-active {
  border-color: rgba(122, 240, 178, .35);
  background: rgba(122, 240, 178, .07);
}

.ais-job-center-button.has-active .ais-job-center-symbol {
  color: #07150e;
  background: var(--ais-mint);
  animation: ais-job-pulse 1.6s ease-in-out infinite;
}

.ais-job-center-badge {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 .3rem;
  place-items: center;
  border-radius: 99px;
  background: var(--ais-accent);
  color: #160a08;
  font-size: .58rem;
  font-weight: 950;
}

.ais-job-center-badge[hidden] {
  display: none;
}

@keyframes ais-job-pulse {
  50% { box-shadow: 0 0 0 6px rgba(122, 240, 178, .08); }
}

.ais-job-center {
  position: fixed;
  z-index: 11950;
  top: 70px;
  right: 18px;
  overflow: hidden;
  width: min(410px, calc(100vw - 36px));
  max-height: min(680px, calc(100vh - 90px));
  border: 1px solid #3a3d3a;
  border-radius: 1rem;
  background: rgba(17, 19, 18, .98);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(20px);
}

.ais-job-center.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ais-job-center-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--ais-line);
  background:
    radial-gradient(circle at 10% -60%, rgba(122, 240, 178, .2), transparent 60%),
    #151716;
}

.ais-job-center-head strong,
.ais-job-center-head small {
  display: block;
}

.ais-job-center-head strong {
  font-size: .86rem;
}

.ais-job-center-head small {
  margin-top: .18rem;
  color: var(--ais-soft);
  font-size: .63rem;
}

.ais-job-center-list {
  display: grid;
  gap: .55rem;
  overflow-y: auto;
  max-height: min(590px, calc(100vh - 175px));
  padding: .75rem;
  scrollbar-color: #464a46 transparent;
}

.ais-job-center-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: .7rem;
  padding: .75rem;
  border: 1px solid var(--ais-line);
  border-radius: .75rem;
  background: #111312;
}

.ais-job-center-row.active {
  border-color: rgba(122, 240, 178, .22);
  background: linear-gradient(120deg, rgba(122, 240, 178, .055), #111312 45%);
}

.ais-job-center-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: .55rem;
  background: #242724;
  color: var(--ais-mint);
  font-size: .58rem;
  font-weight: 950;
}

.ais-job-center-copy {
  min-width: 0;
}

.ais-job-center-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}

.ais-job-center-title strong {
  overflow: hidden;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-job-center-title .ais-status {
  flex: 0 0 auto;
  font-size: .54rem;
}

.ais-job-center-copy > small {
  display: block;
  overflow: hidden;
  margin-top: .28rem;
  color: var(--ais-soft);
  font-size: .61rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-job-center-progress {
  overflow: hidden;
  height: 5px;
  margin-top: .65rem;
  border-radius: 99px;
  background: #292c29;
}

.ais-job-center-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ais-accent), var(--ais-mint));
  transition: width .3s ease;
}

.ais-job-center-copy > em {
  display: block;
  margin-top: .22rem;
  color: var(--ais-mint);
  font-size: .55rem;
  font-style: normal;
  text-align: right;
}

.ais-job-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .55rem;
}

.ais-job-center-actions:empty {
  display: none;
}

.ais-job-center-actions button,
.ais-job-center-actions a {
  min-height: 28px;
  padding: .35rem .5rem;
  border: 1px solid #333633;
  border-radius: .42rem;
  background: #1b1d1c;
  color: #d9dcd8;
  font: inherit;
  font-size: .57rem;
  font-weight: 800;
  text-decoration: none;
}

.ais-job-center-actions button:hover,
.ais-job-center-actions a:hover {
  border-color: var(--ais-mint);
}

.ais-job-center-actions .danger {
  color: #ff938b;
}

.ais-job-center-empty {
  padding: 2.5rem 1rem;
  color: var(--ais-soft);
  font-size: .72rem;
  line-height: 1.5;
  text-align: center;
}

.ais-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .24rem .48rem;
  border: 1px solid #333;
  border-radius: 99px;
  color: #bbb;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ais-status.completed {
  border-color: rgba(122, 240, 178, .28);
  background: rgba(122, 240, 178, .08);
  color: var(--ais-mint);
}

.ais-status.running,
.ais-status.queued {
  border-color: rgba(250, 204, 21, .28);
  background: rgba(250, 204, 21, .07);
  color: #f6d96a;
}

.ais-status.failed,
.ais-status.cancelled {
  border-color: rgba(248, 113, 113, .3);
  background: rgba(248, 113, 113, .08);
  color: #ff938b;
}

.ais-skeleton {
  overflow: hidden;
  min-height: 120px;
  border-radius: .8rem;
  background: linear-gradient(100deg, #141614 30%, #202320 48%, #141614 66%) 0 0 / 220% 100%;
  animation: ais-shimmer 1.35s infinite linear;
}

@keyframes ais-shimmer {
  to { background-position: -220% 0; }
}

.ais-modal-shell {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(3, 4, 3, .78);
  backdrop-filter: blur(8px);
}

.ais-modal {
  width: min(620px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
  border: 1px solid #343735;
  border-radius: 1rem;
  background: #121413;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .65);
}

.ais-modal.wide {
  width: min(850px, 100%);
}

.ais-modal-head,
.ais-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--ais-line);
}

.ais-modal-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--ais-line);
  border-bottom: 0;
}

.ais-modal-body {
  padding: 1.2rem;
}

.ais-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

.ais-field.full {
  grid-column: 1 / -1;
}

.ais-field label {
  margin-bottom: .38rem;
  color: #afb3ae;
  font-size: .72rem;
  font-weight: 700;
}

.ais-field input,
.ais-field select,
.ais-field textarea {
  border-color: #303330;
  background: #1b1d1c;
}

.ais-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: .55rem;
}

.ais-template-option {
  padding: .75rem;
  border: 1px solid var(--ais-line);
  border-radius: .7rem;
  background: #171918;
  color: var(--ais-ink);
  text-align: left;
}

.ais-template-option.selected {
  border-color: var(--ais-accent);
  box-shadow: inset 0 0 0 1px var(--ais-accent);
}

.ais-template-option small {
  display: block;
  margin-top: .25rem;
  color: var(--ais-soft);
}

/* Editor */
.ais-editor {
  display: flex;
  min-height: calc(100vh - 3.5rem);
  flex-direction: column;
  margin: -1.75rem -2rem;
  background: #0c0d0c;
}

.ais-editor-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: .8rem;
  min-height: 60px;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--ais-line);
  background: #121312;
}

.ais-editor-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
}

.ais-editor-title input {
  max-width: 330px;
  border-color: transparent;
  background: transparent;
  font-size: .92rem;
  font-weight: 800;
}

.ais-editor-title input:focus {
  border-color: var(--ais-line);
  background: #181a19;
}

.ais-save-state {
  color: var(--ais-soft);
  font-size: .68rem;
  white-space: nowrap;
}

.ais-save-state.saving {
  color: #f6d96a;
}

.ais-save-state.saved {
  color: var(--ais-mint);
}

.ais-top-center,
.ais-top-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.ais-top-actions {
  justify-content: flex-end;
}

.ais-icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--ais-line);
  border-radius: .55rem;
  background: #181a19;
  color: var(--ais-ink);
}

.ais-icon-button:hover {
  border-color: #4d514d;
}

.ais-icon-button:disabled {
  opacity: .35;
}

.ais-editor-workspace {
  display: grid;
  flex: 1;
  grid-template-columns: 220px minmax(360px, 1fr) 260px;
  min-height: 480px;
}

.ais-tools,
.ais-inspector {
  overflow-y: auto;
  padding: .75rem;
  background: #111211;
}

.ais-tools {
  border-right: 1px solid var(--ais-line);
}

.ais-inspector {
  border-left: 1px solid var(--ais-line);
}

.ais-panel-title {
  margin: .25rem 0 .75rem;
  color: #f2f3ef;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ais-tool-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .65rem;
  margin-bottom: .45rem;
  padding: .72rem;
  border: 1px solid var(--ais-line);
  border-radius: .66rem;
  background: #171918;
  color: var(--ais-ink);
  font-weight: 750;
  text-align: left;
}

.ais-tool-button:hover {
  border-color: var(--ais-accent);
}

.ais-tool-mark {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: .45rem;
  background: #252825;
  color: var(--ais-mint);
  font-size: .78rem;
  font-weight: 900;
}

.ais-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem;
}

.ais-asset {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--ais-line);
  border-radius: .55rem;
  background: #090a09;
}

.ais-asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ais-asset button {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
}

.ais-canvas-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 0;
  place-items: center;
  padding: 2rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 24px 24px,
    #090a09;
}

.ais-canvas {
  position: relative;
  overflow: hidden;
  width: min(var(--canvas-width, 360px), 75%);
  max-height: calc(100vh - 310px);
  aspect-ratio: var(--canvas-ratio, 9 / 16);
  background: var(--canvas-bg, #0a0a0a);
  box-shadow: 0 25px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12);
  user-select: none;
}

.ais-element {
  position: absolute;
  overflow: hidden;
  cursor: grab;
  transform: rotate(var(--rotation, 0deg));
  transform-origin: center;
}

.ais-element:active {
  cursor: grabbing;
}

.ais-element.selected {
  outline: 2px solid var(--ais-accent);
  outline-offset: 2px;
}

.ais-resize-handle {
  position: absolute;
  z-index: 12;
  width: 12px;
  height: 12px;
  border: 2px solid #0b0c0b;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ais-accent), 0 2px 8px rgba(0, 0, 0, .5);
  touch-action: none;
}

.ais-resize-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.ais-resize-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.ais-resize-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ais-resize-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }

.ais-element.motion-slow-push img,
.ais-element.motion-slow-push video { animation: ais-slow-push 8s ease-in-out infinite alternate; }
.ais-element.motion-slow-pull img,
.ais-element.motion-slow-pull video { animation: ais-slow-pull 8s ease-in-out infinite alternate; }
.ais-element.motion-pan-left img,
.ais-element.motion-pan-left video { animation: ais-pan-left 8s ease-in-out infinite alternate; }
.ais-element.motion-pan-right img,
.ais-element.motion-pan-right video { animation: ais-pan-right 8s ease-in-out infinite alternate; }
.ais-element.motion-float img,
.ais-element.motion-float video { animation: ais-organic-float 5s ease-in-out infinite alternate; }

@keyframes ais-slow-push { to { transform: scale(1.1); } }
@keyframes ais-slow-pull { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes ais-pan-left { from { transform: scale(1.1) translateX(3%); } to { transform: scale(1.1) translateX(-3%); } }
@keyframes ais-pan-right { from { transform: scale(1.1) translateX(-3%); } to { transform: scale(1.1) translateX(3%); } }
@keyframes ais-organic-float { to { transform: scale(1.035) translate(1.2%, -1%); } }

.ais-element img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
}

.ais-text-element {
  display: flex;
  align-items: flex-start;
  padding: .15em .2em;
  color: var(--el-color, #fff);
  font-size: var(--el-font-size, 24px);
  font-weight: var(--el-weight, 800);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-align: var(--el-align, left);
  white-space: pre-wrap;
}

.ais-canvas-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: rgba(255, 255, 255, .32);
  font-size: .78rem;
  text-align: center;
}

.ais-inspector-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  color: var(--ais-soft);
  font-size: .78rem;
  text-align: center;
}

.ais-inspector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.ais-inspector-grid .ais-field.full {
  grid-column: 1 / -1;
}

.ais-color {
  height: 38px;
  padding: .15rem !important;
}

.ais-danger-text {
  color: #ff938b;
}

.ais-timeline {
  overflow: auto;
  min-height: 170px;
  max-height: 250px;
  border-top: 1px solid var(--ais-line);
  background: #111211;
  scrollbar-color: #4b4f4b #171817;
  transition: max-height .24s ease, min-height .24s ease;
}

.ais-timeline.expanded {
  min-height: 340px;
  max-height: min(58vh, 640px);
}

.ais-timeline-head {
  position: sticky;
  z-index: 12;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--ais-line);
  background: rgba(17, 18, 17, .97);
  backdrop-filter: blur(14px);
}

.ais-timeline-summary > div:last-child {
  margin-top: .2rem;
  color: var(--ais-soft);
  font-size: .67rem;
}

.ais-timeline-summary #ais-selection-count {
  color: var(--ais-mint);
  font-weight: 800;
}

.ais-time-ruler {
  display: grid;
  grid-template-columns: 110px minmax(500px, 1fr);
  overflow-x: auto;
}

.ais-track-name {
  overflow: hidden;
  padding: .7rem;
  border-right: 1px solid var(--ais-line);
  color: var(--ais-soft);
  font-size: .72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-track-lane {
  position: relative;
  min-width: 500px;
  height: 54px;
  margin: .35rem .6rem;
  border-radius: .4rem;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(255, 255, 255, .06) 10%),
    #0c0d0c;
}

.ais-timeline-item {
  position: absolute;
  top: 8px;
  overflow: hidden;
  height: 38px;
  min-width: 28px;
  padding: .55rem;
  border: 1px solid rgba(122, 240, 178, .32);
  border-radius: .42rem;
  background: rgba(122, 240, 178, .1);
  color: #c5f8dc;
  font-size: .68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-timeline-item.selected {
  border-color: var(--ais-accent);
  background: rgba(255, 118, 95, .16);
  color: #ffd5cd;
}

.ais-progress {
  overflow: hidden;
  height: 7px;
  border-radius: 99px;
  background: #252725;
}

.ais-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ais-accent), #ffad83);
  transition: width .3s ease;
}

.ais-ai-result {
  padding: 1rem;
  border: 1px solid rgba(122, 240, 178, .2);
  border-radius: .75rem;
  background: rgba(122, 240, 178, .05);
}

.ais-ai-result h4 {
  margin: 0 0 .5rem;
  color: var(--ais-mint);
}

.ais-ai-result p {
  color: #c4c8c3;
  font-size: .83rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ais-hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: .65rem;
  align-items: center;
}

.ais-production-intro {
  display: flex;
  gap: .9rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: .9rem;
  border: 1px solid rgba(122, 240, 178, .2);
  border-radius: .8rem;
  background: linear-gradient(120deg, rgba(122, 240, 178, .08), rgba(255, 118, 95, .06));
}

.ais-production-intro > span {
  display: grid;
  flex: 0 0 42px;
  height: 42px;
  place-items: center;
  border-radius: .75rem;
  background: var(--ais-mint);
  color: #07150e;
  font-size: 1.15rem;
}

.ais-production-intro strong,
.ais-production-intro p {
  display: block;
}

.ais-production-intro p {
  margin: .2rem 0 0;
  color: var(--ais-soft);
  font-size: .72rem;
  line-height: 1.5;
}

.ais-tool-featured {
  border-color: rgba(255, 118, 95, .42);
  background: linear-gradient(90deg, rgba(255, 118, 95, .13), transparent);
}

.ais-asset video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ais-audio-asset {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--ais-mint);
  font-size: 1.6rem;
  background: radial-gradient(circle, #25352c, #0b0c0b 70%);
}

.ais-asset-kind,
.ais-provider-chip {
  position: absolute;
  z-index: 1;
  padding: .17rem .3rem;
  border-radius: .28rem;
  background: rgba(5, 6, 5, .84);
  color: #e7eae6;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .06em;
  pointer-events: none;
}

.ais-asset-kind {
  right: .25rem;
  bottom: .25rem;
}

.ais-provider-chip {
  top: .25rem;
  left: .25rem;
  color: var(--ais-mint);
  text-transform: uppercase;
}

.ais-element img,
.ais-element video {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: cover;
}

.ais-element.timeline-hidden {
  visibility: hidden;
  pointer-events: none;
}

.ais-audio-element {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ais-player-controls {
  position: absolute;
  z-index: 8;
  right: max(1rem, 4%);
  bottom: 1rem;
  left: max(1rem, 4%);
  display: grid;
  grid-template-columns: 38px auto minmax(80px, 1fr) 34px 34px;
  gap: .55rem;
  align-items: center;
  padding: .55rem .7rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .8rem;
  background: rgba(10, 11, 10, .86);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
}

.ais-player-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ais-ink);
  color: #101110;
  font-weight: 900;
}

.ais-timecode {
  color: #d2d5d1;
  font-family: "Courier New", monospace;
  font-size: .66rem;
  white-space: nowrap;
}

.ais-preview-scrubber {
  width: 100%;
  accent-color: var(--ais-accent);
}

.ais-timeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}

.ais-timeline-zoom {
  display: flex;
  gap: .4rem;
  align-items: center;
  padding: 0 .45rem;
  color: var(--ais-soft);
  font-size: .6rem;
}

.ais-timeline-zoom input {
  width: 72px;
  accent-color: var(--ais-accent);
}

.ais-timeline-ruler {
  position: relative;
  min-width: calc(500px * var(--ais-timeline-zoom, 1));
  height: 24px;
  margin-left: 150px;
  border-bottom: 1px solid var(--ais-line);
  color: #686d68;
}

.ais-timeline-ruler span {
  position: absolute;
  top: .3rem;
  font-family: "Courier New", monospace;
  font-size: .55rem;
  transform: translateX(-50%);
}

.ais-track-row {
  display: grid;
  grid-template-columns: 150px minmax(500px, 1fr);
  min-width: calc(650px * var(--ais-timeline-zoom, 1));
  border-bottom: 1px solid rgba(255, 255, 255, .035);
  transition: background .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.ais-track-row .ais-track-name {
  position: sticky;
  z-index: 8;
  left: 0;
  display: grid;
  grid-template-columns: 16px 26px minmax(0, 1fr);
  gap: .42rem;
  align-items: center;
  overflow: visible;
  padding: .45rem;
  background: #111211;
  box-shadow: 1px 0 0 var(--ais-line);
}

.ais-track-row .ais-track-name > span {
  display: grid;
  flex: 0 0 26px;
  height: 26px;
  place-items: center;
  border-radius: .4rem;
  background: #232623;
  color: var(--ais-mint);
}

.ais-track-row .ais-track-name > div:not(.ais-track-controls) {
  min-width: 0;
  cursor: text;
}

.ais-track-grip {
  width: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #606560;
  cursor: ns-resize;
  font-size: .78rem;
  letter-spacing: -.32em;
  touch-action: none;
}

.ais-track-grip:hover {
  color: var(--ais-mint);
}

.ais-track-controls {
  position: absolute;
  z-index: 2;
  top: .2rem;
  right: .2rem;
  display: flex;
  gap: .18rem;
  padding: .15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .42rem;
  background: rgba(17, 18, 17, .96);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .14s ease, transform .14s ease;
}

.ais-track-row:hover .ais-track-controls,
.ais-track-row:focus-within .ais-track-controls {
  opacity: 1;
  transform: translateY(0);
}

.ais-track-controls button {
  display: grid;
  width: 21px;
  height: 21px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: .3rem;
  background: #222422;
  color: #a7aca7;
  font-size: .62rem;
}

.ais-track-controls button:hover {
  background: #303330;
  color: #fff;
}

.ais-track-row .ais-track-name strong,
.ais-track-row .ais-track-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ais-track-row .ais-track-name strong {
  color: #d7dad6;
  font-size: .68rem;
}

.ais-track-row .ais-track-name small {
  margin-top: .15rem;
  color: #666b66;
  font-size: .57rem;
}

.ais-track-row .ais-track-lane {
  min-width: 0;
  cursor: crosshair;
  border: 1px solid transparent;
  transition: border-color .14s ease, background .14s ease, opacity .14s ease;
}

.ais-track-row.locked .ais-track-lane {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .025) 10px 20px),
    #0c0d0c;
}

.ais-track-row.hidden-track .ais-track-lane {
  opacity: .42;
}

.ais-track-row.dragging {
  opacity: .45;
}

.ais-track-row.drop-target {
  box-shadow: inset 0 2px 0 var(--ais-mint);
}

.ais-track-row.clip-drop-target .ais-track-lane {
  border-color: var(--ais-mint);
  background-color: rgba(122, 240, 178, .075);
}

.ais-track-row.asset-drop-target .ais-track-lane {
  border-color: var(--ais-accent);
  background:
    linear-gradient(90deg, rgba(255, 118, 95, .13), rgba(122, 240, 178, .08)),
    #0c0d0c;
  box-shadow: inset 0 0 0 1px rgba(255, 118, 95, .22);
}

.ais-asset-drag-ghost,
.ais-timeline-drag-hud {
  position: fixed;
  z-index: 10020;
  min-width: 175px;
  padding: .55rem .65rem;
  border: 1px solid rgba(122, 240, 178, .55);
  border-radius: .55rem;
  background: rgba(13, 15, 14, .94);
  color: var(--ais-ink);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .52);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.ais-asset-drag-ghost strong,
.ais-asset-drag-ghost span,
.ais-timeline-drag-hud strong,
.ais-timeline-drag-hud span {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-asset-drag-ghost strong,
.ais-timeline-drag-hud strong { font-size: .68rem; }
.ais-asset-drag-ghost span,
.ais-timeline-drag-hud span { margin-top: .18rem; color: var(--ais-mint); font-family: "Courier New", monospace; font-size: .58rem; }

.ais-timeline-item {
  text-align: left;
  cursor: grab;
  touch-action: none;
}

.ais-timeline-item:active {
  cursor: grabbing;
}

.ais-timeline-item.dragging {
  z-index: 9;
  cursor: grabbing;
  opacity: .8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
}

.ais-timeline-item.marquee-hit {
  outline: 1px solid var(--ais-mint);
  outline-offset: 2px;
}

.ais-timeline-item > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ais-trim-handle {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  opacity: 0;
  background: rgba(255, 255, 255, .65);
  transition: opacity .15s ease;
}

.ais-trim-handle.start {
  left: 0;
}

.ais-trim-handle.end {
  right: 0;
}

.ais-timeline-item:hover .ais-trim-handle,
.ais-timeline-item.selected .ais-trim-handle {
  opacity: .75;
}

.ais-marquee-box {
  position: fixed;
  z-index: 9999;
  border: 1px solid var(--ais-mint);
  border-radius: .2rem;
  background: rgba(122, 240, 178, .13);
  box-shadow: 0 0 0 1px rgba(8, 12, 10, .65);
  pointer-events: none;
}

.ais-empty-track-state {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: .42rem;
  color: var(--ais-soft);
  text-align: center;
}

.ais-empty-track-state strong {
  color: var(--ais-ink);
}

.ais-empty-track-state span {
  font-size: .7rem;
}

.ais-empty-track-state .ais-primary {
  min-height: 36px;
  margin-top: .35rem;
  padding: .5rem .8rem;
}

.ais-track-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.ais-track-type-grid > button {
  display: grid;
  min-height: 150px;
  padding: 1rem;
  place-items: center;
  align-content: center;
  gap: .45rem;
  border: 1px solid var(--ais-line);
  border-radius: .8rem;
  background:
    radial-gradient(circle at 50% 0, rgba(122, 240, 178, .08), transparent 58%),
    #141615;
  color: var(--ais-ink);
  text-align: center;
}

.ais-track-type-grid > button:hover {
  border-color: var(--ais-mint);
  transform: translateY(-2px);
}

.ais-track-type-grid > button > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: .55rem;
  background: #242724;
  color: var(--ais-mint);
  font-weight: 900;
}

.ais-track-type-grid small {
  color: var(--ais-soft);
  font-size: .64rem;
  line-height: 1.45;
}

body.ais-track-reordering {
  cursor: ns-resize;
  user-select: none;
}

.ais-clip-timing {
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--ais-line);
}

.ais-inspector-section-title {
  margin-bottom: .6rem;
  color: #d7dad6;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ais-effect-panel {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--ais-line);
}

.ais-effect-panel input[type="range"] {
  width: 100%;
  accent-color: var(--ais-accent);
}

.ais-inline-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
}

.ais-inline-toggles button {
  min-height: 34px;
  padding: .3rem;
  border: 1px solid var(--ais-line);
  border-radius: .4rem;
  background: #191b1a;
  color: var(--ais-soft);
  font-size: .55rem;
}

.ais-inline-toggles button.active {
  border-color: var(--ais-accent);
  background: rgba(255, 118, 95, .1);
  color: #ffd4cc;
}

.ais-provider-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.ais-provider-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
  min-height: 62px;
  padding: .55rem;
  border: 1px solid var(--ais-line);
  border-radius: .62rem;
  background: #151716;
  color: var(--ais-ink);
  text-align: left;
}

.ais-provider-card > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: .45rem;
  background: #252825;
  color: var(--ais-mint);
  font-size: .62rem;
  font-weight: 950;
}

.ais-provider-card strong,
.ais-provider-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ais-provider-card strong { font-size: .66rem; }
.ais-provider-card small { margin-top: .14rem; color: var(--ais-soft); font-size: .54rem; }
.ais-provider-card > i { grid-column: 1 / -1; color: #697069; font-size: .5rem; font-style: normal; text-transform: uppercase; }
.ais-provider-card.selected { border-color: var(--ais-accent); background: rgba(255, 118, 95, .1); box-shadow: inset 0 0 0 1px rgba(255, 118, 95, .18); }
.ais-provider-card:disabled { cursor: not-allowed; opacity: .42; }

.ais-reference-panel {
  margin-top: .9rem;
  padding: .75rem;
  border: 1px solid var(--ais-line);
  border-radius: .7rem;
  background: rgba(255, 255, 255, .018);
}

.ais-reference-head {
  display: flex;
  gap: .7rem;
  align-items: center;
  justify-content: space-between;
}

.ais-reference-head strong,
.ais-reference-head small { display: block; }
.ais-reference-head strong { color: var(--ais-ink); font-size: .7rem; }
.ais-reference-head small { margin-top: .16rem; color: var(--ais-soft); font-size: .57rem; line-height: 1.4; }

.ais-reference-upload {
  position: relative;
  flex: 0 0 auto;
  padding: .45rem .6rem;
  border: 1px solid var(--ais-line);
  border-radius: .48rem;
  color: var(--ais-mint);
  font-size: .6rem;
  font-weight: 850;
  cursor: pointer;
}

.ais-reference-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ais-reference-grid {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  margin-top: .65rem;
  padding-bottom: .15rem;
}

.ais-reference-tile {
  position: relative;
  overflow: hidden;
  flex: 0 0 58px;
  height: 58px;
  padding: 0;
  border: 1px solid var(--ais-line);
  border-radius: .52rem;
  background: #090a09;
}

.ais-reference-tile img { width: 100%; height: 100%; object-fit: cover; }
.ais-reference-tile span { position: absolute; right: 3px; bottom: 3px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #111; color: #fff; font-size: .62rem; }
.ais-reference-tile.selected { border-color: var(--ais-mint); box-shadow: 0 0 0 2px rgba(122, 240, 178, .14); }
.ais-reference-tile.selected span { background: var(--ais-mint); color: #07150e; }
.ais-reference-empty { color: var(--ais-soft); font-size: .62rem; line-height: 1.45; }

.ais-prompt-label {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .38rem;
}

.ais-prompt-label label { margin: 0; }
.ais-prompt-label button {
  padding: .34rem .5rem;
  border: 1px solid rgba(122, 240, 178, .28);
  border-radius: .4rem;
  background: rgba(122, 240, 178, .07);
  color: var(--ais-mint);
  font-size: .56rem;
  font-weight: 850;
}

.ais-caption-preview {
  position: absolute;
  z-index: 500;
  right: 7%;
  bottom: 8%;
  left: 7%;
  padding: .18em .32em;
  border-radius: .15em;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: clamp(13px, 5.8cqw, 34px);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 2px #000;
  pointer-events: none;
}

.ais-caption-preview[hidden] {
  display: none;
}

.ais-caption-workspace {
  display: grid;
  gap: .9rem;
  max-height: min(650px, 72vh);
  overflow: auto;
}

.ais-caption-toolbar {
  position: sticky;
  z-index: 3;
  top: -1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem;
  border: 1px solid var(--ais-line);
  border-radius: .75rem;
  background: rgba(15, 16, 15, .96);
  backdrop-filter: blur(12px);
}

.ais-caption-toolbar strong,
.ais-caption-toolbar span {
  display: block;
}

.ais-caption-toolbar strong {
  color: var(--ais-ink);
  font-size: .76rem;
}

.ais-caption-toolbar span {
  margin-top: .15rem;
  color: var(--ais-soft);
  font-size: .62rem;
}

.ais-caption-list {
  display: grid;
  gap: .55rem;
}

.ais-caption-row {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: start;
  padding: .8rem 2.9rem .8rem .8rem;
  border: 1px solid var(--ais-line);
  border-radius: .75rem;
  background: #101110;
}

.ais-caption-time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}

.ais-caption-time label {
  color: var(--ais-soft);
  font-size: .57rem;
  text-transform: uppercase;
}

.ais-caption-time input {
  width: 100%;
  margin-top: .2rem;
}

.ais-caption-row textarea {
  min-height: 58px;
}

.ais-caption-meta {
  grid-column: 2;
  display: flex;
  gap: .55rem;
  color: var(--ais-soft);
  font-size: .58rem;
}

.ais-caption-meta .warning {
  color: #ffb05f;
}

.ais-caption-row > .ais-icon-button {
  position: absolute;
  top: .65rem;
  right: .65rem;
}

.ais-timeline-item.type-video {
  border-color: rgba(89, 173, 255, .38);
  background: linear-gradient(90deg, rgba(63, 137, 205, .25), rgba(39, 75, 111, .14));
  color: #c9e8ff;
}

.ais-timeline-item.type-audio {
  border-color: rgba(255, 187, 84, .38);
  background: rgba(255, 187, 84, .12);
  color: #ffe0a7;
}

.ais-timeline-item.type-text {
  border-color: rgba(206, 155, 255, .38);
  background: rgba(206, 155, 255, .12);
  color: #ead4ff;
}

.ais-playhead {
  position: absolute;
  z-index: 5;
  top: -7px;
  bottom: -7px;
  width: 1px;
  background: #ff5f57;
  pointer-events: none;
}

.ais-playhead::before {
  position: absolute;
  top: -1px;
  left: -4px;
  width: 9px;
  height: 7px;
  border-radius: 2px 2px 5px 5px;
  background: #ff5f57;
  content: "";
}

.ais-director-head {
  background:
    radial-gradient(circle at 10% -20%, rgba(255, 118, 95, .22), transparent 40%),
    #131514;
}

.ais-director-title {
  display: flex;
  gap: .8rem;
  align-items: center;
}

.ais-director-title > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: .75rem;
  background: linear-gradient(145deg, #ff8b74, #ff654f);
  color: white;
  box-shadow: 0 8px 28px rgba(255, 101, 79, .25);
}

.ais-director-title strong,
.ais-director-title div div {
  display: block;
}

.ais-director-title div div {
  margin-top: .18rem;
  color: var(--ais-soft);
  font-size: .68rem;
}

.ais-production-body {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 1rem;
  padding: 1rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 32px 32px,
    #0e100f;
}

.ais-modal.wide:has(.ais-production-body) {
  width: min(1040px, 96vw);
}

.ais-import-body {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 32px 32px,
    #0e100f;
}

.ais-modal.wide:has(.ais-import-body) {
  width: min(940px, 96vw);
}

.ais-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.ais-source-tab {
  min-width: 0;
  border: 1px solid var(--ais-line);
  border-radius: .82rem;
  background: #101010;
  padding: .85rem;
  display: grid;
  gap: .28rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.ais-source-tab:hover {
  transform: translateY(-1px);
  border-color: #3a3a3a;
}

.ais-source-tab.selected {
  border-color: rgba(255, 112, 104, .8);
  background: linear-gradient(135deg, rgba(255, 112, 104, .12), rgba(255, 112, 104, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 112, 104, .08);
}

.ais-source-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ais-source-tab strong {
  font-size: .78rem;
  color: var(--ais-ink);
}

.ais-source-tab small {
  color: var(--ais-soft);
  font-size: .65rem;
  line-height: 1.4;
}

.ais-import-source-panel,
.ais-import-options {
  border: 1px solid var(--ais-line);
  border-radius: .9rem;
  background: rgba(10, 10, 10, .62);
  padding: 1rem;
}

.ais-import-source-panel[hidden],
.ais-import-options[hidden] {
  display: none;
}

.ais-import-drop {
  min-height: 116px;
  border: 1px dashed #3d3d3d;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .25rem;
  color: var(--ais-ink);
  cursor: pointer;
  background: radial-gradient(circle at 50% 0, rgba(255, 112, 104, .1), transparent 58%);
}

.ais-import-drop:hover {
  border-color: var(--ais-brand);
}

.ais-import-drop.has-file {
  border-style: solid;
  border-color: rgba(122, 240, 178, .52);
  background:
    radial-gradient(circle at 50% 0, rgba(122, 240, 178, .16), transparent 62%),
    rgba(122, 240, 178, .035);
}

.ais-import-drop.has-file > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--ais-mint);
  color: #07150e;
  font-size: 1rem;
}

.ais-import-drop.has-file strong {
  max-width: 90%;
  overflow: hidden;
  color: #e5fff0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ais-import-drop > span {
  color: var(--ais-brand);
  font-size: 1.35rem;
}

.ais-import-drop small {
  color: var(--ais-soft);
  font-size: .67rem;
}

.ais-import-options {
  display: grid;
  gap: .9rem;
}

.ais-import-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  padding: .75rem;
  border-radius: .7rem;
  color: #99bec2;
  background: rgba(73, 186, 197, .07);
  border: 1px solid rgba(73, 186, 197, .2);
  font-size: .68rem;
  line-height: 1.5;
}

.ais-import-note strong {
  color: #c6eff2;
  white-space: nowrap;
}

.ais-import-orbit {
  filter: hue-rotate(-18deg) saturate(.85);
}

.ais-production-brief,
.ais-production-settings {
  padding: 1rem;
  border: 1px solid var(--ais-line);
  border-radius: .9rem;
  background: rgba(19, 21, 20, .96);
}

.ais-step-label {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .9rem;
  color: #dce0dc;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.ais-step-label span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(122, 240, 178, .13);
  color: var(--ais-mint);
  font-size: .62rem;
}

.ais-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

.ais-mode-card {
  position: relative;
  display: flex;
  min-height: 112px;
  flex-direction: column;
  gap: .35rem;
  padding: .7rem;
  border: 1px solid var(--ais-line);
  border-radius: .7rem;
  background: #111312;
  cursor: pointer;
}

.ais-mode-card input {
  position: absolute;
  opacity: 0;
}

.ais-mode-card.selected {
  border-color: var(--ais-accent);
  background: linear-gradient(150deg, rgba(255, 118, 95, .13), rgba(122, 240, 178, .035));
  box-shadow: inset 0 0 0 1px rgba(255, 118, 95, .1);
}

.ais-mode-icon {
  width: fit-content;
  padding: .22rem .34rem;
  border-radius: .32rem;
  background: #262927;
  color: var(--ais-mint);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.ais-mode-card strong {
  font-size: .7rem;
}

.ais-mode-card small {
  color: var(--ais-soft);
  font-size: .59rem;
  line-height: 1.4;
}

.ais-cost-estimate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .8rem;
  padding: .75rem;
  border: 1px solid rgba(122, 240, 178, .16);
  border-radius: .7rem;
  background: rgba(122, 240, 178, .045);
}

.ais-cost-estimate div span,
.ais-cost-estimate div strong {
  display: block;
}

.ais-cost-estimate div span {
  color: var(--ais-soft);
  font-size: .58rem;
}

.ais-cost-estimate div strong {
  margin-top: .2rem;
  color: #dffbec;
  font-size: .7rem;
}

.ais-cost-estimate p {
  grid-column: 1 / -1;
  margin: .2rem 0 0;
  color: #737873;
  font-size: .57rem;
  line-height: 1.4;
}

.ais-check-row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-top: .7rem;
  padding: .65rem;
  border: 1px solid var(--ais-line);
  border-radius: .65rem;
  background: #111312;
  cursor: pointer;
}

.ais-check-row input {
  margin-top: .15rem;
  accent-color: var(--ais-accent);
}

.ais-check-row strong,
.ais-check-row small {
  display: block;
}

.ais-check-row strong {
  font-size: .68rem;
}

.ais-check-row small {
  margin-top: .15rem;
  color: var(--ais-soft);
  font-size: .58rem;
  line-height: 1.4;
}

.ais-cost-confirm {
  border-color: rgba(255, 187, 84, .2);
}

.ais-foot-note {
  margin-right: auto;
  color: #6f746f;
  font-size: .61rem;
}

.ais-production-progress,
.ais-production-complete {
  display: grid;
  width: 100%;
  min-height: 420px;
  place-items: center;
  align-content: center;
  padding: 2rem;
  text-align: center;
}

.ais-production-body.is-progress {
  grid-template-columns: minmax(0, 1fr);
}

.ais-production-body.is-progress .ais-production-progress,
.ais-production-body.is-progress .ais-production-complete {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.ais-production-progress h3,
.ais-production-complete h3 {
  margin: .3rem 0 .5rem;
  font-size: 1.45rem;
}

.ais-production-progress p,
.ais-production-complete p {
  max-width: 500px;
  margin: 0 0 1.4rem;
  color: var(--ais-soft);
  font-size: .76rem;
  line-height: 1.55;
}

.ais-production-progress .ais-progress {
  width: min(520px, 85%);
}

.ais-production-stage {
  margin-top: .65rem;
  color: var(--ais-mint);
  font-size: .66rem;
}

.ais-generation-orbit {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(255, 118, 95, .2);
  border-radius: 50%;
  animation: ais-orbit 4s linear infinite;
}

.ais-generation-orbit span,
.ais-generation-orbit i {
  position: absolute;
  border-radius: 50%;
}

.ais-generation-orbit span {
  inset: 15px;
  background: radial-gradient(circle at 35% 30%, #ffc1b6, #ff6652 50%, #61243b);
  box-shadow: 0 0 35px rgba(255, 101, 79, .35);
}

.ais-generation-orbit i {
  top: -4px;
  left: 31px;
  width: 9px;
  height: 9px;
  background: var(--ais-mint);
}

@keyframes ais-orbit {
  to { transform: rotate(360deg); }
}

.ais-complete-mark {
  display: grid;
  width: 66px;
  height: 66px;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(122, 240, 178, .12);
  color: var(--ais-mint);
  font-size: 1.8rem;
  box-shadow: 0 0 0 12px rgba(122, 240, 178, .035);
}

@media (max-width: 1100px) {
  .ais-editor-workspace {
    grid-template-columns: 180px minmax(320px, 1fr) 220px;
  }

  .ais-editor-topbar {
    grid-template-columns: 1fr auto;
  }

  .ais-top-center {
    display: none;
  }
}

@media (max-width: 760px) {
  .ais-hero {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .ais-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ais-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ais-form-grid,
  .ais-template-grid {
    grid-template-columns: 1fr;
  }

  .ais-editor {
    min-height: calc(100vh - 60px);
    margin: -1rem;
  }

  .ais-editor-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ais-save-state,
  .ais-top-actions .ais-secondary {
    display: none;
  }

  .ais-top-actions .ais-job-center-button {
    display: inline-flex;
    min-width: 40px;
    padding: .42rem;
  }

  .ais-top-actions .ais-job-center-button > span:nth-child(2) {
    display: none;
  }

  .ais-job-center {
    top: auto;
    right: 8px;
    bottom: 72px;
    width: calc(100vw - 16px);
    max-height: min(70vh, 620px);
    transform: translateY(14px) scale(.98);
    transform-origin: bottom center;
  }

  .ais-job-center.open {
    transform: none;
  }

  .ais-job-center-list {
    max-height: calc(70vh - 80px);
  }

  .ais-editor-workspace {
    display: flex;
    flex-direction: column;
  }

  .ais-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ais-line);
  }

  .ais-tools .ais-panel-title,
  .ais-tools .ais-asset-grid,
  .ais-tools .ais-upload-input {
    display: none;
  }

  .ais-tool-button {
    justify-content: center;
    margin: 0;
    padding: .5rem;
    font-size: .7rem;
  }

  .ais-tool-mark {
    display: none;
  }

  .ais-canvas-stage {
    min-height: 470px;
    padding: 1.2rem 1.2rem 5.5rem;
  }

  .ais-canvas {
    width: min(290px, 86vw);
    max-height: 430px;
  }

  .ais-inspector {
    max-height: none;
    border-top: 1px solid var(--ais-line);
    border-left: 0;
  }

  .ais-timeline {
    min-height: 150px;
  }

  .ais-timeline.expanded {
    min-height: 300px;
    max-height: 62vh;
  }

  .ais-timeline-head {
    align-items: stretch;
    flex-direction: column;
    gap: .45rem;
  }

  .ais-player-controls {
    right: .65rem;
    bottom: .65rem;
    left: .65rem;
    grid-template-columns: 36px minmax(0, 1fr) 32px 32px;
  }

  .ais-player-controls .ais-timecode {
    display: none;
  }

  .ais-timeline-actions {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: .2rem;
    scrollbar-width: thin;
  }

  .ais-timeline-actions .ais-secondary {
    flex: 0 0 auto;
    min-height: 32px;
    padding: .35rem .55rem;
    font-size: .6rem;
    white-space: nowrap;
  }

  .ais-timeline-zoom {
    display: none;
  }

  .ais-timeline-ruler {
    margin-left: 110px;
  }

  .ais-track-row {
    grid-template-columns: 110px minmax(400px, 1fr);
    min-width: 510px;
  }

  .ais-track-row .ais-track-name {
    grid-template-columns: 12px 23px minmax(0, 1fr);
    gap: .3rem;
    padding: .35rem;
  }

  .ais-track-row .ais-track-name > span {
    flex-basis: 23px;
    height: 23px;
  }

  .ais-track-controls {
    top: auto;
    right: .15rem;
    bottom: .12rem;
    opacity: 1;
    transform: none;
  }

  .ais-track-controls button {
    width: 18px;
    height: 18px;
  }

  .ais-track-type-grid {
    grid-template-columns: 1fr;
  }

  .ais-track-type-grid > button {
    min-height: 96px;
  }

  .ais-production-body {
    display: block;
    max-height: calc(92vh - 132px);
    overflow: auto;
  }

  .ais-import-body {
    max-height: calc(92vh - 132px);
    overflow: auto;
  }

  .ais-source-tabs {
    grid-template-columns: 1fr;
  }

  .ais-import-note {
    grid-template-columns: 1fr;
  }

  .ais-caption-toolbar {
    align-items: flex-start;
    gap: .6rem;
  }

  .ais-caption-row {
    grid-template-columns: 1fr;
    padding-right: 2.9rem;
  }

  .ais-caption-meta {
    grid-column: auto;
    flex-wrap: wrap;
  }

  .ais-production-settings {
    margin-top: .8rem;
  }

  .ais-mode-grid {
    grid-template-columns: 1fr;
  }

  .ais-mode-card {
    min-height: 82px;
  }

  .ais-provider-picker {
    grid-template-columns: 1fr;
  }

  .ais-provider-card {
    min-height: 54px;
  }

  .ais-reference-head,
  .ais-prompt-label {
    align-items: flex-start;
    flex-direction: column;
  }

  .ais-reference-upload,
  .ais-prompt-label button {
    width: 100%;
    text-align: center;
  }

  .ais-cost-estimate {
    grid-template-columns: 1fr;
  }

  .ais-cost-estimate p {
    grid-column: auto;
  }

  .ais-foot-note {
    display: none;
  }

  .ais-modal-foot {
    position: sticky;
    z-index: 4;
    bottom: 0;
    background: #121413;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ais-root *,
  .ais-root *::before,
  .ais-root *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}