@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root {
  color-scheme: dark;
  --bg: #101315;
  --panel: #171b1e;
  --panel2: #1d2226;
  --surface: #252b30;
  --border: #2c3236;
  --muted: #879198;
  --text: #e4e9ec;
  --accent: #58dfc9;
  --library-width: 294px;
  --inspector-width: 292px;
  --timeline-height: 328px;
  --rail-width: 72px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  white-space: nowrap;
  transition:
    background 0.13s,
    color 0.13s;
}
button:hover {
  background: #2a3035;
  color: #fff;
}
button:disabled {
  opacity: 0.36;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input,
select,
textarea {
  background: #22282d;
  color: var(--text);
  border: 1px solid #323a40;
  border-radius: 5px;
  min-width: 0;
  padding: 7px 9px;
}
input[type='range'] {
  accent-color: var(--accent);
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input::-webkit-inner-spin-button {
  appearance: none;
}
input[type='color'] {
  height: 32px;
  padding: 3px;
  min-width: 40px;
}
select {
  cursor: pointer;
}
textarea {
  resize: vertical;
  line-height: 1.5;
}
a {
  color: var(--accent);
}
[hidden] {
  display: none !important;
}
.icon {
  flex: none;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.icon-button {
  height: 32px;
  width: 32px;
  border-radius: 5px;
  padding: 7px;
  flex: none;
  color: #a8b1b7;
}
.icon-button.active {
  color: var(--accent);
  background: #23403c;
}
.small-button {
  font-size: 12px;
  height: 29px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 9px;
  color: #bec6cb;
}
.primary {
  background: var(--accent);
  color: #102d28;
  border-radius: 6px;
  font-weight: 650;
  min-height: 34px;
  padding: 8px 16px;
}
.primary:hover {
  background: #7ae9d7;
  color: #09231d;
}
.secondary-button {
  border: 1px solid #3b454a;
  background: #252b30;
  border-radius: 6px;
  min-height: 34px;
}
.danger {
  color: #f09191;
}
.secondary {
  font-size: 12px;
  color: var(--muted);
}
.pill {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #35544e;
  color: var(--accent);
  border-radius: 4px;
}
.topbar {
  height: 61px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: #181c1f;
  border-bottom: 1px solid var(--border);
}
.brand {
  font-size: 23px;
  letter-spacing: 4px;
  font-weight: 700;
  padding: 0 12px 0 0;
  color: var(--accent);
  gap: 11px;
}
.brand b {
  color: #eef1f3;
}
.brand:hover {
  background: transparent;
}
.divider {
  width: 1px;
  height: 23px;
  background: #343a3f;
  margin: 0 3px;
}
.project-name {
  font-weight: 550;
  padding: 7px 6px;
  font-size: 14px;
  gap: 10px;
}
.project-name .icon {
  width: 13px;
}
.save-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #a1b4ab;
}
.save-status .icon {
  width: 14px;
  height: 14px;
  color: #7bba99;
}
.top-spacer {
  flex: 1;
}
.history-buttons {
  display: flex;
  gap: 3px;
}
.history-buttons button {
  padding: 7px;
  color: #9aa6ad;
  border-radius: 4px;
}
.avatar {
  border-radius: 50%;
  background: #354842;
  color: #c5ded6;
  font-size: 11px;
  font-weight: 600;
  width: 31px;
  height: 31px;
  padding: 0;
  margin-left: 5px;
}
.workspace-tabs {
  display: flex;
  align-items: center;
  height: 41px;
  border-bottom: 1px solid var(--border);
  background: #131719;
  padding: 0 18px 0 22px;
  gap: 30px;
}
.mode-tabs {
  height: 100%;
  display: flex;
  gap: 24px;
}
.mode-tabs button {
  height: 100%;
  padding: 0 4px;
  color: #8e989f;
  font-size: 13px;
  border-bottom: 2px solid transparent;
}
.mode-tabs button.active {
  color: var(--accent);
  border-color: var(--accent);
}
.project-path {
  font-size: 12px;
  color: #718087;
  display: flex;
  gap: 11px;
}
.project-path span:last-child {
  color: #a6b0b7;
}
.assistant-link {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  padding: 5px 7px;
  gap: 7px;
}
.assistant-link .icon {
  width: 16px;
}
.editing-workspace {
  height: calc(100dvh - 61px - 41px - var(--timeline-height) - 25px - 5px);
  min-height: 280px;
  display: grid;
  grid-template-columns:
    var(--rail-width) var(--library-width) 4px minmax(200px, 1fr)
    4px var(--inspector-width);
}
.category-rail {
  background: #14181b;
  border-right: 1px solid var(--border);
  padding-top: 10px;
  overflow: auto;
  scrollbar-width: none;
}
.category-rail button {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 61px;
  padding: 8px 2px 7px;
  color: #8f9aa2;
  font-size: 11px;
  position: relative;
}
.category-rail .icon {
  width: 21px;
  height: 21px;
}
.category-rail button.active {
  color: var(--accent);
  background: #1c2d2c;
}
.category-rail button.active:before {
  position: absolute;
  content: '';
  left: 0;
  top: 14px;
  height: 33px;
  width: 2px;
  background: var(--accent);
}
.category-rail button:hover {
  color: #dbe3e5;
  background: #20272b;
}
.library {
  background: #1a1f23;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 17px;
  scrollbar-width: thin;
  scrollbar-color: #3c454b transparent;
}
.panel-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  font-size: 13px;
  font-weight: 550;
}
.library .panel-header {
  font-size: 14px;
  height: 54px;
}
.panel-actions {
  display: flex;
  gap: 4px;
}
.library-tabs {
  display: flex;
  gap: 19px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  height: 34px;
}
.library-tabs button {
  font-size: 12px;
  color: #93a0a8;
  border-bottom: 2px solid transparent;
  padding: 0 2px 10px;
}
.library-tabs button.active {
  color: var(--text);
  border-color: var(--accent);
}
.import-button {
  height: 40px;
  border: 1px solid #3d665e;
  border-radius: 6px;
  background: #223632;
  color: #7fe5d3;
  font-weight: 550;
  display: flex;
  width: 100%;
  margin-bottom: 13px;
}
.import-button:hover {
  background: #2a4941;
}
.search-field {
  display: flex;
  align-items: center;
  border: 1px solid #343c42;
  border-radius: 5px;
  padding: 0 9px;
  height: 32px;
  background: #20262b;
  gap: 7px;
  color: #83919a;
}
.search-field .icon {
  width: 14px;
  height: 14px;
}
.search-field input {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  outline: none;
  font-size: 12px;
}
.search-field kbd {
  font-size: 11px;
  padding: 1px 4px;
  opacity: 0.6;
  border: 1px solid #465158;
  border-radius: 3px;
}
.library-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 12px;
  justify-content: space-between;
}
.chips {
  display: flex;
  gap: 7px;
}
.chip {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  color: #89969e;
}
.chip.active {
  background: #30383d;
  color: #e3e9eb;
}
.library-filter .icon-button {
  width: 25px;
  height: 25px;
  padding: 5px;
}
.asset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 11px;
}
.asset-card {
  min-width: 0;
  cursor: grab;
  position: relative;
  border-radius: 5px;
  outline: none;
}
.asset-thumb {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 5px;
  background: #29323a;
  overflow: hidden;
  border: 1px solid #364046;
  display: flex;
  align-items: center;
  justify-content: center;
}
.asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.asset-card:hover .asset-thumb {
  border-color: #72b7a9;
}
.asset-card:hover .asset-plus {
  opacity: 1;
}
.asset-card.active .asset-thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.asset-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #101719c9;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  color: white;
}
.asset-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  color: white;
  filter: drop-shadow(0 1px 2px black);
}
.asset-badge .icon {
  width: 13px;
  height: 13px;
}
.asset-plus {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 4px;
  background: #58dfc9;
  color: #0b2b25;
  opacity: 0;
}
.asset-name {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
  color: #c7cfd4;
}
.asset-meta {
  font-size: 10px;
  color: #76858e;
  margin-top: 3px;
}
.asset-thumb.audio-thumb {
  background: linear-gradient(120deg, #24383c, #1d2b30);
}
.asset-thumb .waveform {
  width: 90%;
  height: 45%;
}
.audio-label {
  position: absolute;
  top: 6px;
  left: 7px;
  color: #92c8ba;
  font-size: 10px;
}
.library-summary {
  margin: 17px 0;
  color: #76858c;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}
.library-spacer {
  min-height: 15px;
  flex: 1;
}
.ai-nudge {
  border: 1px solid #354542;
  border-radius: 7px;
  margin: 12px 0 17px;
  padding: 13px;
  background: linear-gradient(120deg, #263632, #1e2a2b);
  font-size: 12px;
  position: relative;
}
.ai-nudge-title {
  color: #cfe8e0;
  font-weight: 550;
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 6px;
}
.ai-nudge-title .icon {
  color: var(--accent);
  width: 15px;
}
.ai-nudge p {
  color: #8fa7a0;
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 10px;
}
.ai-nudge button {
  padding: 0;
  color: #79d7c2;
  font-size: 11px;
}
.resize-handle {
  cursor: col-resize;
  background: #111719;
  border-left: 1px solid #293034;
}
.resize-handle:hover {
  background: #395e55;
}
.viewer {
  background: #101416;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.viewer > .panel-header {
  padding: 0 20px;
  border-bottom: 1px solid #20262b;
  height: 45px;
  color: #aeb8be;
}
.viewer-options {
  display: flex;
  align-items: center;
  gap: 9px;
}
.viewer-options select {
  background: transparent;
  font-size: 11px;
  padding: 3px 6px;
  border: 0;
  color: #94a2aa;
}
.preview-stage {
  flex: 1;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 12px;
  position: relative;
}
.canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 100%;
  overflow: hidden;
  box-shadow: 0 8px 30px #0004;
  background: #0a0d0e;
}
#preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
#transform-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.transform-box {
  position: absolute;
  border: 1px solid #70e9d3;
  pointer-events: auto;
  cursor: move;
  transform-origin: center center;
}
.transform-box .handle {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #b3f6e7;
  border: 1px solid #167766;
}
.handle.tl {
  top: -4px;
  left: -4px;
}
.handle.tr {
  top: -4px;
  right: -4px;
}
.handle.bl {
  bottom: -4px;
  left: -4px;
}
.handle.br {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}
.safe-overlay {
  position: absolute;
  inset: 10%;
  border: 1px dashed #fff8;
  pointer-events: none;
}
.safe-overlay:after {
  content: '';
  position: absolute;
  inset: 5%;
  border: 1px dashed #fff6;
}
.preview-tools {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 24px;
  color: #7c8b94;
}
.preview-fill {
  flex: 1;
}
.preview-tools .small-button {
  height: 25px;
  font-size: 10px;
  padding: 3px 7px;
  background: #1f262b;
}
.preview-tools .icon-button {
  width: 25px;
  height: 25px;
  padding: 4px;
}
.preview-tools .icon {
  height: 15px;
  width: 15px;
}
.playback {
  display: flex;
  align-items: center;
  position: relative;
  height: 57px;
  padding: 0 20px;
  gap: 7px;
  border-top: 1px solid #242b30;
  color: #a4b0b7;
}
.timecode {
  font-family: monospace;
  font-size: 12px;
  color: var(--accent);
}
.duration-code,
.time-separator {
  font: 11px monospace;
  color: #77848d;
}
.transport {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.transport .icon {
  width: 15px;
  height: 15px;
}
.play-button {
  height: 34px;
  width: 34px;
  padding: 7px;
  color: #e4e9ed;
}
.play-button .icon {
  width: 20px;
  height: 20px;
}
.playback > select {
  font-size: 11px;
  background: none;
  border: 0;
  width: 47px;
  padding: 0;
}
.playback > .icon-button {
  width: 26px;
  height: 28px;
  padding: 4px;
}
.playback > .icon-button .icon {
  width: 15px;
  height: 15px;
}
.inspector {
  background: #1a1e22;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3c454b transparent;
}
.inspector-tabs {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  height: 45px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.inspector-tabs button {
  height: 100%;
  font-size: 11px;
  color: #83929b;
  padding: 0 1px;
  border-bottom: 2px solid transparent;
  flex: none;
}
.inspector-tabs button.active {
  border-color: var(--accent);
  color: var(--text);
}
.inspector-body {
  padding: 0 17px 22px;
}
.selected-heading {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 16px 0 5px;
}
.selected-heading .icon {
  width: 14px;
  color: #b1c5c8;
}
.selection-meta {
  font-size: 11px;
  color: #788b96;
  margin: 2px 0 16px;
}
.inspector-section {
  border-top: 1px solid var(--border);
  padding: 15px 0;
}
.inspector-section:first-of-type {
  border-top: 0;
  padding-top: 7px;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 550;
}
.section-title .icon {
  width: 13px;
  height: 13px;
}
.section-title button {
  height: 20px;
  width: 22px;
  padding: 3px;
  color: #8b9ba3;
}
.control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  color: #99a8b2;
  min-height: 28px;
}
.control-row > label {
  min-width: 64px;
  flex: 1;
}
.control-row input[type='number'] {
  width: 66px;
  height: 28px;
  text-align: center;
  font-size: 11px;
  padding: 4px 6px;
  background: #272d33;
}
.control-row input[type='range'] {
  width: 95px;
  min-width: 45px;
  flex: 1;
}
.control-row .unit {
  color: #788b97;
  font-size: 10px;
}
.control-row .keyframe-button {
  width: 22px;
  height: 25px;
  padding: 3px;
  color: #637882;
  flex: none;
}
.control-row .keyframe-button .icon {
  width: 12px;
  height: 12px;
}
.control-row .keyframe-button.has-key {
  color: var(--accent);
}
.control-row select {
  font-size: 11px;
  width: 145px;
  padding: 5px 8px;
}
.xy-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.xy-field {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #272d33;
  border: 1px solid #343d43;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 11px;
  color: #80949e;
  height: 29px;
}
.xy-field input[type='number'] {
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: none;
  text-align: right;
}
.full-row {
  width: 100%;
  display: flex;
  gap: 9px;
  align-items: center;
}
.inspector-section .wide-button {
  width: 100%;
  justify-content: flex-start;
  border: 1px solid #354148;
  border-radius: 5px;
  font-size: 11px;
  padding: 7px 10px;
  color: #aebdc5;
}
.inline-help {
  font-size: 11px;
  color: #82969e;
  line-height: 1.6;
}
.timeline-resizer {
  height: 5px;
  background: #0f1518;
  border-top: 1px solid #293439;
  cursor: row-resize;
}
.timeline-resizer:hover {
  background: #36584f;
}
.timeline {
  height: var(--timeline-height);
  background: #171c20;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.timeline-toolbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 17px;
  border-bottom: 1px solid #293137;
  flex: none;
}
.timeline-tools {
  display: flex;
  gap: 6px;
  align-items: center;
}
.timeline-tools .icon-button {
  height: 29px;
  width: 29px;
  padding: 6px;
}
.timeline-tools .icon {
  width: 17px;
  height: 17px;
}
.tool-divider {
  height: 18px;
  width: 1px;
  background: #39434a;
  margin: 0 7px;
}
.timeline-toolbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.timeline-toolbar-right #zoom {
  width: 90px;
  height: 15px;
}
.timeline-toolbar-right .icon-button {
  width: 25px;
  height: 25px;
  padding: 5px;
}
.timeline-toolbar-right .icon {
  width: 14px;
  height: 14px;
}
.timeline-toolbar-right .small-button {
  border: 0;
  color: #a4b4bd;
  font-size: 11px;
  gap: 5px;
}
.sequence-bar {
  height: 34px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #303940;
  padding: 0 13px;
  flex: none;
  font-size: 11px;
}
.sequence-bar #sequence-tabs {
  display: flex;
  height: 100%;
  gap: 4px;
}
.sequence-tab {
  padding: 0 13px;
  font-size: 11px;
  height: 100%;
  gap: 7px;
  color: #8d9ca4;
  border-bottom: 2px solid transparent;
}
.sequence-tab.active {
  color: #cfddde;
  border-color: #5a958a;
  background: #212b2e;
}
.sequence-tab .icon {
  height: 12px;
  width: 12px;
}
.sequence-bar .icon-button {
  width: 25px;
  height: 25px;
  padding: 6px;
}
.sequence-bar .icon-button .icon {
  height: 13px;
  width: 13px;
}
.timeline-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.track-heads {
  width: 161px;
  flex: none;
  border-right: 1px solid #364248;
  overflow: hidden;
  background: #1b2227;
}
.ruler-head {
  height: 31px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font: 10px monospace;
  color: #6f8794;
  border-bottom: 1px solid #323d44;
}
.track-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-bottom: 1px solid #2e373d;
  position: relative;
  font-size: 11px;
  color: #b4c4cb;
}
.track-head .track-icon {
  display: flex;
  align-items: center;
  color: #759798;
  font-size: 10px;
  min-width: 19px;
}
.track-head .track-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 10px;
}
.track-head button {
  width: 18px;
  height: 22px;
  padding: 2px;
  color: #738790;
}
.track-head button .icon {
  height: 12px;
  width: 12px;
}
.track-head.locked {
  background: #21292f;
}
.track-head button.active {
  color: #73d2bb;
}
.timeline-scroll {
  overflow: auto;
  flex: 1;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #48565e #182024;
}
.timeline-content {
  position: relative;
  min-height: 100%;
}
.time-ruler {
  position: relative;
  height: 31px;
  border-bottom: 1px solid #39434a;
  background: #161d22;
  cursor: crosshair;
}
.ruler-tick {
  position: absolute;
  top: 10px;
  bottom: 0;
  border-left: 1px solid #36434c;
  font: 10px monospace;
  color: #8da0ac;
  padding-left: 5px;
  pointer-events: none;
}
.ruler-tick.minor {
  top: 23px;
  color: transparent;
  border-color: #2d3a42;
}
.marker-label {
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
}
.marker-label svg {
  height: 11px;
  width: 11px;
}
.track-lane {
  position: relative;
  border-bottom: 1px solid #2c373f;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(var(--grid-step) - 1px),
    #26313b50 calc(var(--grid-step) - 1px),
    #26313b50 var(--grid-step)
  );
  cursor: default;
}
.track-lane:nth-child(2n) {
  background-color: #1b2329;
}
.timeline-clip {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  border: 1px solid #468e7f;
  background: #244e45;
  border-radius: 4px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  min-width: 2px;
}
.timeline-clip.selected {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px #152a25;
  z-index: 2;
}
.timeline-clip.disabled {
  opacity: 0.4;
}
.timeline-clip.text-clip {
  background: #373b64;
  border-color: #656ea6;
}
.timeline-clip.text-clip.selected {
  border-color: #a7b0ff;
}
.timeline-clip.audio-clip {
  background: #244d41;
  border-color: #3e806a;
}
.timeline-clip.adjustment-clip {
  background: #4b345c;
  border-color: #9e77b7;
}
.clip-thumbs {
  display: flex;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0.64;
  overflow: hidden;
}
.clip-thumbs img {
  height: 100%;
  width: auto;
  object-fit: cover;
  max-width: 80px;
  flex: none;
}
.clip-label {
  position: absolute;
  left: 7px;
  top: 5px;
  font-size: 10px;
  color: #f1f5f4;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
  z-index: 1;
  display: flex;
  gap: 5px;
  align-items: center;
}
.clip-label .icon {
  width: 10px;
  height: 10px;
}
.audio-clip .clip-label {
  top: 3px;
  color: #aee2d0;
}
.text-clip .clip-label {
  top: 50%;
  transform: translateY(-50%);
  color: #d6d8f7;
}
.timeline-clip .waveform {
  position: absolute;
  inset: 17px 0 0;
  width: 100%;
  height: calc(100% - 19px);
  color: #58b190;
  opacity: 0.8;
}
.clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  z-index: 4;
  cursor: ew-resize;
}
.clip-handle.start {
  left: 0;
}
.clip-handle.end {
  right: 0;
}
.timeline-clip.selected .clip-handle:after {
  content: '';
  position: absolute;
  width: 2px;
  background: #90e7d4;
  height: 13px;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  border-radius: 2px;
}
.clip-keyframe {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  background: #f0ce7d;
  transform: rotate(45deg);
}
.clip-transition {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #76afbb80, transparent);
  border-right: 1px dashed #9cf0db75;
  pointer-events: none;
}
.playhead {
  position: absolute;
  width: 1px;
  background: var(--accent);
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 6px #58dfc93b;
}
.playhead-head {
  position: absolute;
  left: -6px;
  top: 0;
  width: 13px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  background: var(--accent);
  pointer-events: auto;
  cursor: ew-resize;
}
.statusbar {
  height: 25px;
  background: #13191d;
  border-top: 1px solid #29343b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: #708692;
  font-size: 10px;
}
.statusbar #status-left {
  color: #809aa4;
  display: flex;
  gap: 7px;
  align-items: center;
}
.statusbar .icon {
  width: 11px;
  height: 11px;
  color: #669b8c;
}
.status-separator {
  margin: 0 7px;
  color: #445763;
}
#toast {
  position: fixed;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 1000;
  border: 1px solid #487267;
  background: #253b34;
  box-shadow: 0 8px 25px #0005;
  padding: 10px 18px;
  border-radius: 7px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s,
    transform 0.15s;
  max-width: 80vw;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast.error {
  background: #462b2e;
  border-color: #7c4a51;
  color: #ffcccf;
}
.context-menu {
  position: fixed;
  z-index: 200;
  background: #252d32;
  border: 1px solid #45515a;
  padding: 5px;
  border-radius: 7px;
  min-width: 210px;
  box-shadow: 0 10px 35px #0007;
}
.context-menu button {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 3px;
}
.context-menu button kbd {
  margin-left: auto;
  color: #8598a3;
  font-size: 10px;
}
.context-menu hr {
  border: 0;
  border-top: 1px solid #414c53;
  margin: 4px;
}
.context-menu .icon {
  width: 15px;
  height: 15px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #080d10b3;
  backdrop-filter: blur(5px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.modal {
  background: #1c2327;
  border: 1px solid #445159;
  border-radius: 11px;
  width: 520px;
  max-width: 95vw;
  max-height: 90dvh;
  overflow: auto;
  box-shadow: 0 25px 90px #0008;
}
.modal.large {
  width: 820px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #343f46;
  font-size: 17px;
  font-weight: 550;
}
.modal-header .icon-button {
  margin-left: 10px;
}
.modal-body {
  padding: 22px 24px;
}
.modal-body p {
  font-size: 13px;
  line-height: 1.65;
  color: #a1b2bc;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #343f46;
}
.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 17px;
  font-size: 13px;
}
.form-row label {
  color: #a0b3be;
}
.form-row select,
.form-row input {
  width: 100%;
  font-size: 13px;
}
.shortcut-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 25px;
}
.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #afbec6;
}
.shortcut-item kbd,
kbd {
  font: 11px monospace;
  border: 1px solid #4a5861;
  background: #2c353c;
  border-radius: 4px;
  padding: 4px 7px;
  color: #a5bdc8;
}
.modal-note {
  padding: 12px 14px;
  background: #273b35;
  border: 1px solid #3e5a50;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: #add1c2;
  margin-top: 18px;
}
.progress-bar {
  height: 7px;
  background: #384149;
  border-radius: 9px;
  overflow: hidden;
  margin: 18px 0 10px;
}
.progress-bar > div {
  height: 100%;
  background: var(--accent);
  transition: width 0.1s;
}
.progress-details {
  display: flex;
  justify-content: space-between;
  color: #99b2bf;
  font-size: 12px;
}
.command-input {
  width: 100%;
  font-size: 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid #384952;
  border-radius: 0;
  padding: 16px 21px;
}
.command-results {
  padding: 8px;
  max-height: 380px;
  overflow: auto;
}
.command-results button {
  width: 100%;
  justify-content: flex-start;
  border-radius: 5px;
  padding: 12px 14px;
  font-size: 13px;
}
.command-results button kbd {
  margin-left: auto;
}
.library-heading {
  font-size: 11px;
  color: #79928e;
  margin: 18px 0 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.preset-card {
  border: 1px solid #374148;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #242c31;
  text-align: left;
  overflow: hidden;
}
.preset-preview {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #28353a;
  color: #d4e5e4;
}
.preset-card > span:last-child {
  padding: 9px;
  font-size: 11px;
  color: #adbfc9;
}
.preset-card:hover {
  border-color: #6daa9a;
}
.preset-card.active {
  border-color: var(--accent);
}
.preset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-preset .preset-preview {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px;
}
.text-preset:nth-child(2) .preset-preview {
  font-size: 16px;
  font-weight: 400;
}
.text-preset:nth-child(3) .preset-preview {
  align-items: flex-end;
  font-size: 15px;
  background: #2c4842;
}
.text-preset:nth-child(4) .preset-preview {
  font-size: 18px;
  color: #edce94;
  background: #2f3438;
}
.tool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #34454b;
  padding: 13px;
  border-radius: 6px;
  gap: 7px;
  white-space: normal;
  text-align: left;
  background: #222c31;
}
.tool-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.tool-card-title .icon {
  color: var(--accent);
  width: 15px;
  height: 15px;
}
.tool-card p {
  font-size: 11px;
  margin: 0;
  color: #879eaa;
  line-height: 1.55;
}
.tool-card .available {
  font-size: 10px;
  color: #81baa5;
}
.tool-card .requires {
  font-size: 10px;
  color: #7d929f;
}
.empty-state {
  padding: 30px 15px;
  text-align: center;
  color: #8298a5;
  font-size: 12px;
  line-height: 1.8;
}
.empty-state .icon {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto 13px;
}
.drop-overlay {
  position: fixed;
  inset: 0;
  background: #0b211bdc;
  border: 3px dashed var(--accent);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drop-overlay div {
  text-align: center;
}
.drop-overlay span {
  font-size: 32px;
  color: #8fe8d4;
  font-weight: 600;
}
.drop-overlay p {
  font-size: 17px;
  color: #b0c9c3;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}
.project-card {
  border: 1px solid #394b53;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  text-align: left;
  background: #253239;
}
.project-card img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}
.project-card .project-title {
  font-size: 13px;
  padding: 13px 12px 5px;
}
.project-card .project-meta {
  font-size: 11px;
  color: #8da8b7;
  padding: 0 12px 12px;
}
.project-card .blank-thumbnail {
  aspect-ratio: 16/9;
  background: #17242b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card .blank-thumbnail .icon {
  width: 35px;
  height: 35px;
  color: #75918f;
}
.project-card:hover {
  border-color: var(--accent);
}
.home-actions {
  display: flex;
  gap: 10px;
}
.ai-chat {
  height: 230px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 10px;
}
.chat-bubble {
  padding: 12px 15px;
  border-radius: 6px;
  background: #273d35;
  max-width: 90%;
  font-size: 13px;
  line-height: 1.6;
}
.chat-bubble.user {
  background: #33404b;
  align-self: flex-end;
}
.ai-prompt-row {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}
.ai-prompt-row input {
  flex: 1;
}
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.ai-suggestions button {
  font-size: 11px;
  border: 1px solid #3d565c;
  border-radius: 5px;
  padding: 6px 8px;
  color: #9fbbc6;
}
.easing-graph {
  width: 100%;
  height: 150px;
  border: 1px solid #3b4b55;
  border-radius: 5px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 29px,
      #30404b 30px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      #30404b 40px
    );
}
.keyframe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.keyframe-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.keyframe-row input {
  width: 70px;
}
.keyframe-row select {
  font-size: 11px;
  flex: 1;
}
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.job-row {
  padding: 12px;
  border: 1px solid #394b54;
  border-radius: 5px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.timeline-empty {
  position: absolute;
  inset: 40px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #73918f;
  font-size: 13px;
  pointer-events: none;
}
.record-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #eda39c;
  font-size: 13px;
}
.record-status:before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e6847a;
}
.srt-editor {
  width: 100%;
  height: 180px;
  font: 12px/1.6 monospace;
}
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.folder-list button {
  border: 1px solid #35434a;
  justify-content: flex-start;
  font-size: 12px;
  padding: 11px;
  border-radius: 5px;
}
.provider-status {
  padding: 10px 12px;
  border: 1px solid #44564f;
  border-radius: 5px;
  color: #a5c3b5;
  font-size: 11px;
  line-height: 1.7;
  margin: 14px 0;
}
.mixer {
  display: flex;
  gap: 13px;
  overflow: auto;
}
.mixer-strip {
  min-width: 95px;
  flex: 1;
  border: 1px solid #3c4b53;
  border-radius: 6px;
  padding: 13px 9px;
  text-align: center;
  background: #222e34;
}
.mixer-strip h4 {
  font-size: 12px;
  margin: 0 0 15px;
  font-weight: 500;
}
.mixer-strip input[type='range'] {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 150px;
  width: 30px;
  display: block;
  margin: 10px auto;
}
.mixer-strip input[type='number'] {
  width: 60px;
  font-size: 12px;
}
.mixer-strip button {
  font-size: 11px;
  border: 1px solid #42535b;
  border-radius: 4px;
  margin-top: 10px;
  padding: 4px 7px;
}
.mixer-strip button.active {
  color: var(--accent);
  border-color: var(--accent);
}
.onboarding-hint {
  font-size: 11px;
  color: #7e99a7;
  line-height: 1.6;
  margin-top: 14px;
}
.track-drop {
  background: #355c4b !important;
}
.timeline-clip.dragging {
  opacity: 0.7;
}
.mobile-notice {
  display: none;
}
.checkbox-row {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a4bbc6;
  margin: 12px 0;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stack input,
.stack select,
.stack textarea {
  width: 100%;
}
@media (min-width: 1650px) {
  :root {
    --library-width: 320px;
    --inspector-width: 315px;
    --timeline-height: 350px;
  }
  .preview-stage {
    padding: 30px 40px 15px;
  }
  .asset-name {
    font-size: 12px;
  }
  .asset-meta {
    font-size: 11px;
  }
  .inspector-tabs button,
  .control-row {
    font-size: 12px;
  }
}
@media (max-width: 1190px) {
  :root {
    --library-width: 246px;
    --inspector-width: 250px;
    --rail-width: 64px;
  }
  .library {
    padding: 0 12px;
  }
  .inspector-tabs {
    gap: 9px;
    padding: 0 12px;
  }
  .inspector-body {
    padding: 0 13px;
  }
  .preview-stage {
    padding: 15px;
  }
  .playback {
    padding: 0 13px;
  }
  .duration-code,
  .time-separator {
    display: none;
  }
  .control-row > label {
    min-width: 54px;
  }
  .control-row input[type='number'] {
    width: 52px;
  }
  .control-row input[type='range'] {
    width: 65px;
  }
  .save-status {
    display: none;
  }
}
@media (max-width: 1000px) {
  :root {
    --library-width: 215px;
    --inspector-width: 224px;
    --timeline-height: 300px;
  }
  .project-path {
    display: none;
  }
  .topbar {
    gap: 8px;
    padding: 0 12px;
  }
  .preview-tools {
    padding: 0 14px;
  }
  .transport {
    gap: 7px;
  }
  .asset-grid {
    gap: 12px 8px;
  }
  .control-row {
    gap: 5px;
  }
  .control-row .unit {
    display: none;
  }
  .timeline-toolbar-right .small-button {
    font-size: 10px;
  }
  .selected-heading {
    font-size: 11px;
  }
}
@media (max-width: 850px) {
  :root {
    --inspector-width: 0px;
    --timeline-height: 300px;
  }
  .inspector {
    display: none;
  }
  #inspector-resizer {
    display: none;
  }
  .editing-workspace {
    grid-template-columns: var(--rail-width) var(--library-width) 4px minmax(
        200px,
        1fr
      );
  }
  .project-name {
    max-width: 190px;
    overflow: hidden;
  }
  .workspace-tabs {
    gap: 12px;
  }
  .timeline-toolbar {
    padding: 0 8px;
  }
  .timeline-tools {
    gap: 3px;
  }
  .timeline-tools .tool-divider {
    margin: 0 3px;
  }
  .track-heads {
    width: 137px;
  }
  .timeline-toolbar-right #zoom {
    width: 60px;
  }
  .statusbar #status-right {
    font-size: 9px;
  }
  .category-rail button {
    height: 57px;
  }
}
@media (max-width: 640px) {
  body {
    overflow: auto;
  }
  .topbar {
    flex-wrap: wrap;
    height: 90px;
    padding: 10px;
  }
  .topbar .brand {
    font-size: 19px;
  }
  .topbar .brand svg {
    width: 20px;
  }
  .topbar .divider,
  .history-buttons,
  .topbar #shortcuts-button,
  .avatar {
    display: none;
  }
  .topbar .project-name {
    max-width: 140px;
    font-size: 12px;
  }
  .top-spacer {
    min-width: 0;
  }
  .workspace-tabs {
    padding: 0 10px;
    height: 38px;
  }
  .mode-tabs {
    gap: 18px;
  }
  .assistant-link {
    font-size: 11px;
  }
  .editing-workspace {
    height: calc(100dvh - 90px - 38px - 260px - 25px);
    min-height: 300px;
    grid-template-columns: 54px 1fr;
  }
  .category-rail {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .category-rail button {
    font-size: 9px;
    height: 53px;
  }
  .category-rail .icon {
    height: 19px;
    width: 19px;
  }
  .library {
    grid-column: 2;
    grid-row: 2;
    max-height: 160px;
    border-top: 1px solid #36424a;
    padding: 0 12px;
    display: none;
  }
  .library.mobile-open {
    display: block;
    position: absolute;
    top: 130px;
    bottom: 295px;
    left: 54px;
    right: 0;
    z-index: 20;
    max-height: none;
  }
  .viewer {
    grid-column: 2;
    grid-row: 1;
    min-height: 285px;
  }
  #library-resizer {
    display: none;
  }
  .preview-stage {
    padding: 8px;
  }
  .panel-header {
    height: 34px !important;
  }
  .viewer > .panel-header {
    padding: 0 12px;
  }
  .playback {
    height: 43px;
  }
  .preview-tools {
    height: 30px;
  }
  .timecode {
    font-size: 10px;
  }
  .transport {
    gap: 3px;
  }
  .playback #loop-button {
    display: none;
  }
  .timeline {
    height: 260px;
  }
  .timeline-toolbar {
    height: 38px;
  }
  .timeline-tools .icon-button {
    height: 26px;
    width: 24px;
    padding: 4px;
  }
  .timeline-tools {
    gap: 1px;
  }
  .timeline-toolbar-right #zoom,
  .timeline-toolbar-right #add-track-button,
  .timeline-toolbar-right .tool-divider {
    display: none;
  }
  .timeline-toolbar-right {
    gap: 0;
  }
  .track-heads {
    width: 107px;
  }
  .track-head {
    padding: 0 6px;
    gap: 4px;
  }
  .track-head .track-name {
    font-size: 9px;
  }
  .track-head .track-icon {
    min-width: 14px;
    font-size: 9px;
  }
  .track-head button {
    width: 15px;
  }
  .timeline-toolbar .tool-divider {
    display: none;
  }
  .sequence-bar {
    padding: 0 6px;
  }
  .sequence-bar .secondary {
    font-size: 9px;
  }
  .statusbar {
    font-size: 9px;
    padding: 0 8px;
  }
  .statusbar #status-right {
    display: none;
  }
  .form-row {
    grid-template-columns: 95px 1fr;
    gap: 12px;
  }
  .modal-body {
    padding: 18px;
  }
  .modal-backdrop {
    padding: 14px;
  }
  .modal-header {
    padding: 15px 18px;
  }
  .shortcut-list {
    grid-template-columns: 1fr;
  }
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }
  .topbar #settings-button {
    width: 25px;
  }
  .primary {
    padding: 7px 11px;
    min-height: 31px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.status-guide {
  font-size: 10px;
  color: #829d9e;
  padding: 3px 8px;
  margin-left: auto;
  margin-right: 18px;
  height: 22px;
}
#canvas-wrap:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  background: #000;
}
#canvas-wrap:fullscreen #preview {
  object-fit: contain;
}
.marquee {
  position: absolute;
  border: 1px solid var(--accent);
  background: #58dfc922;
  z-index: 15;
  pointer-events: none;
}
.asset-thumb video ~ .asset-duration,
.asset-thumb video ~ .asset-plus,
.asset-thumb video ~ .asset-badge {
  z-index: 2;
}
.keyframe-panel {
  border: 1px solid #3c5752;
  border-radius: 6px;
  padding: 10px;
  margin: 12px 0;
  background: #202e2b;
}
.keyframe-panel .section-title {
  margin: 0 0 8px;
  font-size: 12px;
  gap: 5px;
}
.keyframe-panel .section-title .icon {
  color: var(--accent);
  width: 13px;
}
.keyframe-panel select {
  width: 100%;
  font-size: 12px;
  padding: 5px 7px;
}
.keyframe-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  color: #a5b9b2;
}
.keyframe-position label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.keyframe-position input {
  width: 70px;
  padding: 4px 6px;
  font: 11px monospace;
}
.keyframe-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 8px;
}
.keyframe-panel .inline-help {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.5;
}
.keyframe-button.at-key {
  color: #102a23;
  background: #69e0c7;
  border-radius: 4px;
}
.clip-keyframe {
  padding: 0 !important;
  border: 1px solid #28594b;
  background: #f0ce7d !important;
  width: 8px;
  height: 8px;
  bottom: 3px;
  z-index: 7;
  cursor: ew-resize;
}
.clip-keyframe:focus-visible {
  outline: 2px solid white;
}
.locked-note {
  border: 1px solid #70664b;
  background: #3d372a;
  color: #e9c990;
  border-radius: 4px;
  font-size: 11px;
  padding: 8px;
}
.keyframe-table {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.keyframe-table-row {
  display: grid;
  grid-template-columns: 92px 100px 1fr 30px;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.keyframe-table-row input {
  width: 100%;
  font-size: 12px;
  padding: 6px;
}
.keyframe-table-row select {
  width: 100%;
  font-size: 12px;
}
.keyframe-graph-point {
  cursor: grab;
}
.keyframe-graph-point:active {
  cursor: grabbing;
}
.graph-help {
  margin-top: 10px;
  font-size: 12px;
  color: #91a8a5;
}
.keyframe-table-head {
  color: #95aaa6;
  font-size: 11px;
  margin: 15px 0 5px;
}
.mobile-panel-button {
  display: none;
}
.keyframe-counter {
  color: #b2dacf;
  font-size: 11px;
}
.control-row input[type='number'] {
  min-width: 56px;
}
.source-in-out-hint {
  font-size: 11px;
  color: #9cb0b1;
}
.record-controls {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 12px 0;
}
.record-controls label {
  font-size: 12px;
  color: #aac0bf;
}
.record-controls input {
  width: 70px;
}
.timeline-inout {
  position: absolute;
  top: 23px;
  bottom: 0;
  background: #58dfc91b;
  border-top: 2px solid #58dfc9;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 850px) {
  .mobile-panel-button {
    display: inline-flex;
  }
  .inspector.mobile-open {
    display: block;
    position: fixed;
    top: 102px;
    right: 0;
    bottom: 25px;
    width: min(330px, 80vw);
    z-index: 45;
    border-left: 1px solid #546e67;
    box-shadow: -15px 0 45px #0007;
  }
  .inspector.mobile-open .inspector-tabs {
    background: #1b2529;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .library .mobile-panel-button {
    width: 25px;
    padding: 4px;
  }
}
@media (max-width: 640px) {
  .inspector.mobile-open {
    top: 128px;
  }
  .keyframe-table-row {
    grid-template-columns: 70px 75px 1fr 25px;
    gap: 4px;
  }
}

.marker-label {
  z-index: 12;
}
.clip-keyframe.selected-key {
  background: #b3ffee !important;
  border-color: #efffff !important;
  outline: 1px solid #9bf3d3;
}

.rotation-handle {
  position: absolute;
  left: calc(50% - 5px);
  top: -26px;
  width: 10px;
  height: 10px;
  background: #b3f6e7;
  border: 1px solid #167766;
  border-radius: 50%;
  cursor: grab;
}
.rotation-handle:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  width: 1px;
  height: 14px;
  background: #70e9d3;
}
.handle.tl,
.handle.br {
  cursor: nwse-resize;
}
.handle.tr,
.handle.bl {
  cursor: nesw-resize;
}