/* ============ Director bar — pick the edit before you make it ============ */
/* A brief is a sentence, not a form. The chips render that sentence above the
   input, each one a named preset you choose by looking rather than reading. */

.director {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  margin: 0 0 34px;
}

/* Under the discovery title: the hero h1 is the heading, the bar is the answer. */
.home-composer {
  max-width: 1240px;
  /* No margin of its own: the hero and the category bar own the gaps, and they
     are equal, so the bar is centred between them. */
  margin: 0 auto;
  padding: 0 28px;
}
.home-composer.hidden { display: none; }
body.recreating .home-composer { display: none; }

/* Docked: the bar leaves the flow and rides the bottom of the screen, so an
   edit can be started from anywhere in the grid. */
.home-composer.docked {
  /* .edits-composer is sticky with a `top`; a docked bar answers to `bottom`. */
  position: fixed;
  top: auto;
  left: 0; right: 0; bottom: 16px;
  z-index: 70;
  margin: 0 auto;
  animation: composer-dock .22s cubic-bezier(.32,.72,.24,1) both;
}
.home-composer.docked .director-brief { margin-bottom: 8px; }
.home-composer.docked .director-bar { box-shadow: 0 26px 70px rgba(0,0,0,.72); }
@keyframes composer-dock {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-composer.docked { animation: none; }
}

/* ---- the brief line: chips that read as a sentence ---- */
.director-brief {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
  min-height: 38px;
}
.director-brief-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 7px;
  border-radius: 999px;
  background: #141516;
  border: 1px solid #262829;
  font-size: 13px;
  color: #9a9d9e;
  transition: border-color .15s, background .15s, transform .15s;
}
.director-brief-chip:hover { background: #1a1c1d; border-color: #3a3e3f; transform: translateY(-1px); }
.director-brief-chip.set { color: var(--text); }
.director-brief-chip.set .director-brief-swatch { opacity: 1; }
.director-brief-chip b { font-weight: 650; color: inherit; }
.director-brief-chip i { font-style: normal; color: #63676a; }
.director-brief-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  flex: none; opacity: .65;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font-size: 11px;
}

/* ---- the bar ---- */
.director-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 13px;
  border-radius: 24px;
  background: #131415;
  border: 1px solid #242627;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.director-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.director-main textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 88px;
  padding: 14px 14px 6px;
  border: 0; outline: none; resize: none;
  background: none; color: var(--text);
  font-family: inherit; font-size: 16.5px; line-height: 1.45;
}
.director-main textarea::placeholder { color: #5c5f60; }

/* ---- the placeholder that types itself ----
 * An overlay rather than the placeholder attribute, so a caret can sit at the
 * end of the line. It mirrors the textarea's box exactly; any change to the
 * padding or type above has to be made here too or the two will drift apart.
 */
.director-prompt { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.director-ghost {
  position: absolute; inset: 0;
  padding: 14px 14px 6px;
  font-size: 16.5px; line-height: 1.45;
  color: #5c5f60;
  pointer-events: none;
  overflow: hidden;
  /* Trailing spaces are part of the typing, and a long brief has to wrap the
     way the textarea under it would. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
/* Once a reference is attached this is the chosen editing direction, not a
   suggestion, so it reads with the same emphasis as entered text. */
.director-prompt.has-reference .director-ghost,
.director-prompt.has-reference textarea::placeholder { color: var(--text); opacity: 1; }
.director-prompt.has-reference .director-ghost-caret { background: var(--text); }
/* Inline, so it follows the last character onto the next line with it. */
.director-ghost-caret {
  display: inline-block;
  width: 1px; height: 1.1em;
  vertical-align: -0.16em;
  margin-left: 1px;
  background: #8b8f90;
}
/* Solid while it writes, blinking while it waits — the way a caret reads. */
.director-ghost.is-holding .director-ghost-caret { animation: director-caret 1.05s steps(1) infinite; }
@keyframes director-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .director-ghost { display: none; }
}

/* ---- compact preset row (the second line of the sentence) ---- */
.director-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 2px 2px; }
/* The pills are rendered by director.js into their own element; `contents`
   keeps them in the row's flex flow so the reference can sit before them. */
.director-row-pills { display: contents; }
.director-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #1b1d1e;
  font-size: 12.5px; color: #b7babb;
  transition: background .15s, color .15s;
}
.director-pill:hover { background: #232526; color: #fff; }
.director-pill em { font-style: normal; color: #6a6e6f; }
.director-pill.set em { color: var(--text); font-weight: 600; }
.director-pill span { font-size: 13px; opacity: .8; }

.director-popover {
  position: absolute;
  z-index: 90;
  min-width: 244px;
  padding: 6px;
  border-radius: 16px;
  background: #17191a;
  border: 1px solid #2b2e2f;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.director-popover-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 12px; border-radius: 11px;
  font-size: 13px; color: #b9bcbd;
}
.director-popover-row:hover { background: #202223; }
.director-popover-row.active { background: #232526; color: var(--text); }
.director-popover-row b { color: #8b8f90; font: 10px var(--mono); }
.director-popover-row.active b { color: var(--text); }
.director-popover-row > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.director-popover-row svg { width: 15px; height: 15px; flex: none; color: #74787a; }
.director-popover-row:hover svg { color: #9ea2a3; }
.director-popover-row.active svg { color: var(--text); }
.director-popover-row i { font-style: normal; color: #63676a; }

/* ---- reference: the clip the edit is copied from, in the row ---- */
.director-ref { padding: 5px 12px 5px 5px; gap: 6px; }
.director-ref-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.director-ref em { font-style: normal; color: #b7babb; }
.director-ref.filled em { color: var(--text); font-weight: 600; }
/* Only a reference that exists can be dropped. */
.director-ref-clear {
  width: 18px; height: 18px; flex: none; margin-left: 2px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #2a2c2d; color: #b6b9ba;
  font-size: 9px; line-height: 1;
  transition: background .15s, color .15s;
}
.director-ref-clear:hover { background: var(--accent); color: var(--accent-ink); }
.director-ref:not(.filled) .director-ref-clear { display: none; }
.director-ref-face {
  position: relative;
  width: 22px; height: 22px; flex: none;
  border-radius: 7px;
  border: 1px dashed #3a3e3f;
  background: #0e1011;
  overflow: hidden;
}
.director-ref.filled .director-ref-face { border-style: solid; border-color: #4a4e4f; }
/* app.js writes a label, a filename and a badge in here; the face only wants
   the thumbnail (or the upload arrow while it is empty). */
.director-ref .edits-file-input {
  position: absolute; inset: 0;
  display: block; min-height: 0;
  padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; overflow: hidden;
}
.director-ref .edits-file-input > span:not(.edits-input-icon),
.director-ref .edits-file-input > i { display: none; }
.director-ref .edits-input-icon {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 11px; color: #6d7172;
}
.director-ref .edits-input-icon video { width: 100%; height: 100%; object-fit: cover; }
/* Empty, it is the same round ＋ badge the footage tile wears. */
.director-ref:not(.filled) .director-ref-face {
  border: 0; border-radius: 50%;
  background: rgba(28,30,31,.92);
}
.director-ref:not(.filled) .edits-input-icon { font-size: 0; }
.director-ref:not(.filled) .director-ref-face::before {
  content: "＋";
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1; color: #d7dadb;
}
.director-ref:not(.filled):hover .director-ref-face {
  background: var(--accent);
}
.director-ref:not(.filled):hover .director-ref-face::before { color: var(--accent-ink); }

/* A card dropped into the slot: the tile flies here, then the slot takes over
   with a short pulse so the landing is legible at this size. */
.director-ref-face.landing { border-color: var(--accent); }
.director-ref-face.landed { animation: ref-landed .4s cubic-bezier(.32,.72,.24,1); }
.director-ref-face.loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 50%, transparent 80%);
  animation: ref-loading 1s linear infinite;
}
@keyframes ref-landed {
  0% { transform: scale(1.5); box-shadow: 0 0 0 3px var(--accent-soft); }
  100% { transform: scale(1); box-shadow: none; }
}
@keyframes ref-loading { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* The flying clone of the card. It is a copy: the card itself never moves. */
.reference-ghost {
  position: fixed; z-index: 200;
  margin: 0; padding: 0;
  border-radius: 14px; overflow: hidden;
  transform-origin: top left;
  pointer-events: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #0b0b0b;
}
.reference-ghost video, .reference-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* ---- duration: typed, and no wider than the value it holds ---- */
.director-duration {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #1b1d1e;
  border: 1px solid transparent;
  color: #b7babb;
  cursor: text;
  transition: border-color .15s, background .15s;
}
.director-duration:hover { background: #202223; }
.director-duration:focus-within { border-color: #3d4142; background: #202223; }
.director-duration > span { font-size: 11px; opacity: .8; }
.director-duration input {
  width: 30px; padding: 0; border: 0; outline: none;
  background: none; color: var(--text);
  font: 600 11px var(--mono); text-align: right;
}
/* The unit is not in the field, so it cannot be typed over or deleted. */
.director-duration i {
  font-style: normal; font: 600 11px var(--mono); color: #8b8f90;
  margin-left: -3px;
}
.director-duration.over input { color: var(--accent); }

/* ---- asset slots ---- */
.director-slots { display: flex; gap: 8px; flex: none; }
.director-slot {
  width: 112px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
}
.director-tile {
  position: relative;
  flex: 1 1 auto;
  display: block;
  min-height: 86px;
  border-radius: 16px;
  border: 1px dashed #333637;
  background: #0e1011;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.director-slot:hover .director-tile { border-color: #4a4e4f; background: #141617; }
.director-slot.filled .director-tile { border-style: solid; border-color: #3b3f40; }
.director-hidden-slot { display: none !important; }
/* app.js still fills this list; the stack reads it, so it does not need to be
   on screen twice. */
.director .edits-footage-files { display: none; }

/* The + never hides: an empty slot has to say what it wants. */
.director-slot-plus {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(28,30,31,.92); color: #d7dadb;
  font-size: 12px; line-height: 1;
  transition: background .15s, color .15s;
}
.director-slot:hover .director-slot-plus { background: var(--accent); color: var(--accent-ink); }
.director-slot.filled .director-slot-plus { background: rgba(20,22,23,.86); }

/* ---- footage stack ---- */
.director-stack {
  position: absolute; inset: 0;
  display: flex; align-items: center; padding-left: 12px;
}
.director-stack.empty { justify-content: flex-start; }
.director-stack-card {
  width: 34px; height: 46px; flex: none;
  margin-left: -14px;
  overflow: hidden;
  border-radius: 7px;
  border: 1.5px solid #131415;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font: 600 11px var(--mono); color: rgba(255,255,255,.82);
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition: transform .15s;
}
.director-stack-card > video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: #090a0a;
}
.director-stack-card:first-child { margin-left: -6px; }
.director-slot:hover .director-stack-card:nth-child(2) { transform: translateX(3px); }
.director-slot:hover .director-stack-card:nth-child(3) { transform: translateX(6px); }
.director-stack-more { background: #202223; color: #b9bcbd; }

.director-slot .edits-file-input {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr; place-items: stretch;
  min-height: 0;
  padding: 0; margin: 0;
  border: 0; border-radius: 0;
  background: none;
  overflow: hidden;
}
/* app.js keeps writing a label + filename into these slots; the tile only wants
   the thumbnail, so everything after the icon is folded away. */
.director-slot .edits-file-input > span:not(.edits-input-icon),
.director-slot .edits-file-input > i { display: none; }
.director-slot .edits-input-icon {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 19px; color: #6d7172;
  border: 0; border-radius: 0; background: none;
}
.director-slot .edits-input-icon video { width: 100%; height: 100%; object-fit: cover; }
.director-slot small {
  display: block;
  text-align: center; font: 9px var(--mono);
  text-transform: uppercase; letter-spacing: .3px; color: #6a6e6f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.director-slot small b { display: inline; color: #9da0a1; font-size: 9px; font-weight: 600; }

/* ---- the button ----
   A key you press, not a rectangle you click: the solid edge underneath is the
   button's thickness, and it collapses as the button travels down. */
.director-generate {
  flex: none;
  width: 156px;
  margin-bottom: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 18px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 15px; font-weight: 800; letter-spacing: .4px;
  box-shadow: 0 5px 0 #a3271d;
  transition: transform .12s, box-shadow .12s, background .15s, opacity .15s;
}
.director-generate:hover { background: #ff4033; transform: translateY(-1px); box-shadow: 0 6px 0 #a3271d; }
.director-generate:active { transform: translateY(4px); box-shadow: 0 1px 0 #a3271d; }
.director-generate:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: 0 5px 0 #a3271d; }
.director-generate span { font-size: 12.5px; font-weight: 650; opacity: .9; }

/* ============ Preset picker ============ */
.director-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 34px;
  background: rgba(6,6,7,.72);
  backdrop-filter: blur(10px);
}
.director-modal.hidden { display: none; }
.director-sheet {
  width: min(1120px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  border-radius: 26px;
  background: #121314;
  border: 1px solid #262829;
  overflow: hidden;
}
.director-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 0;
}
.director-sheet-head h2 { font-size: 13px; font-weight: 650; color: #8f9293; letter-spacing: .2px; }
.director-sheet-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1e2021; color: #b6b9ba; font-size: 14px;
}
.director-sheet-close:hover { background: #2a2c2d; color: #fff; }

/* ---- footage picker ----
   A panel that hangs off the footage tile, not a page-covering dialog: the bar
   stays visible and readable behind it. */
.footage-pop-layer { position: fixed; inset: 0; z-index: 120; }
.footage-pop-layer.hidden { display: none; }
.footage-pop {
  position: absolute;
  width: min(560px, calc(100vw - 32px));
  max-height: min(52vh, 460px);
  display: flex; flex-direction: column;
  border-radius: 20px;
  background: #17191a;
  border: 1px solid #2b2e2f;
  box-shadow: 0 26px 70px rgba(0,0,0,.66);
  animation: footage-pop-in .16s cubic-bezier(.32,.72,.24,1) both;
}
@keyframes footage-pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .footage-pop { animation: none; } }

.footage-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
}
.footage-pop-head b { font-size: 13px; font-weight: 650; color: var(--text); }
.footage-pop-count {
  flex: 1 1 auto;
  font: 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: #7c8082;
}
.footage-pop-close {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: #202223; color: #b6b9ba; font-size: 12px;
}
.footage-pop-close:hover { background: #2a2c2d; color: #fff; }

/* Tiles are half the size of the full-page picker's — this is a panel.
   Rows are a fixed height: a clip whose metadata has not arrived yet has no
   intrinsic size, and auto rows collapse to the filename, stacking the tiles
   on top of each other. */
.footage-pop .picker-grid {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  grid-auto-rows: 172px;
  gap: 8px; padding: 0 14px 14px; border: 0;
}
.footage-pop .picker-card, .footage-pop .picker-upload { height: 100%; }
.footage-pop .picker-card video, .footage-pop .picker-card img {
  width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover;
}
.footage-pop .picker-upload {
  min-height: 0; aspect-ratio: auto; gap: 2px; padding: 10px;
  border-radius: 11px; border-width: 1px;
  border-color: #3b3f40; background: #131415;
}
/* The full-page picker floods this tile with accent on hover, which at panel
   size reads as an error state. Here it just lifts. */
.footage-pop .picker-upload:hover {
  border-color: #5a5f60; background: #1a1c1d; transform: none;
}
.footage-pop .picker-upload:hover .picker-upload-plus { background: var(--accent); color: var(--accent-ink); }
/* The scrolling grid clips anything drawn outside a tile, which cut the
   selected ring in half. Drawn inside, it survives at every edge. */
.footage-pop .picker-card { box-shadow: none; outline: 1px solid #292c2d; outline-offset: -1px; }
.footage-pop .picker-card:hover { box-shadow: none; outline-color: #5a5f60; transform: none; }
.footage-pop .picker-card.selected { box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.footage-pop .picker-upload-plus { width: 30px; height: 30px; margin-bottom: 0; font-size: 17px; }
.footage-pop .picker-upload b { font-size: 12px; }
.footage-pop .picker-upload small { font-size: 8.5px; }
.footage-pop .picker-card { border-radius: 11px; }
.footage-pop .picker-name { font-size: 9px; }

.director-sheet-hero { padding: 6px 24px 18px; max-width: 560px; }
.director-sheet-hero h3 {
  font-size: 28px; line-height: 1.08; letter-spacing: -1px;
  text-transform: uppercase; font-weight: 800; color: var(--accent);
}
.director-sheet-hero p { margin-top: 9px; color: #85898a; font-size: 13px; line-height: 1.5; }

.director-sheet-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 24px 16px;
}
.director-tabs { display: flex; gap: 6px; }
.director-tab {
  padding: 8px 16px; border-radius: 999px;
  background: #1b1d1e; color: #a3a6a7; font-size: 13px;
  transition: background .15s, color .15s;
}
.director-tab:hover { background: #232526; color: #fff; }
.director-tab.active { background: #f3f3f3; color: #111; font-weight: 650; }
.director-search {
  flex: 1 1 220px; min-width: 180px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 999px;
  background: #191b1c; border: 1px solid #26292a;
  color: #6f7374;
}
.director-search input {
  flex: 1; border: 0; outline: none; background: none;
  color: var(--text); font-size: 13px;
}
.director-search input::placeholder { color: #5e6162; }

.director-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  padding: 4px 24px 26px;
}
.director-card {
  text-align: left;
  display: flex; flex-direction: column; gap: 9px;
}
.director-card-art {
  aspect-ratio: 9 / 13;
  border-radius: 16px;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  transition: border-color .15s, transform .15s;
}
.director-card:hover .director-card-art { transform: translateY(-2px); }
.director-card.active .director-card-art { border-color: #f3f3f3; }
.director-card-art b {
  font-size: 40px; font-weight: 800; letter-spacing: -2px;
  color: rgba(255,255,255,.9); mix-blend-mode: overlay;
}
.director-card-art video, .director-card-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.director-grade-art {
  isolation: isolate;
  background: #111;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.director-grade-art img {
  z-index: 0;
  object-position: center 45%;
  transform: scale(1.012);
  transition: filter .22s ease, transform .22s ease;
}
.director-card:hover .director-grade-art img { transform: scale(1.035); }
.director-grade-shade {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), transparent 42%, rgba(0,0,0,.42)),
    radial-gradient(circle at 62% 31%, transparent 0 27%, rgba(0,0,0,.14) 76%);
}
.director-grade-art::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.director-grade-meta {
  position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 9px;
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.82);
  font: 700 8px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.director-grade-meta i { font-style: normal; }
.director-grade-meta b {
  padding: 4px 5px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  background: rgba(8,8,8,.32);
  color: rgba(255,255,255,.74);
  font: inherit;
  letter-spacing: .04em;
  mix-blend-mode: normal;
  backdrop-filter: blur(5px);
}
.grade-auto img { filter: saturate(.9) contrast(1.02) brightness(.98); }
.grade-clean img { filter: saturate(.92) contrast(1.04) brightness(1.035); }
.grade-warm-film img { filter: sepia(.16) saturate(.88) contrast(.94) brightness(1.04); }
.grade-golden img { filter: sepia(.3) saturate(1.08) contrast(.94) brightness(1.055); }
.grade-cold img { filter: saturate(.76) contrast(1.09) brightness(.98) hue-rotate(9deg); }
.grade-teal-orange img { filter: sepia(.08) saturate(1.3) contrast(1.13) brightness(.96); }
.grade-teal-orange .director-grade-shade {
  background: linear-gradient(135deg, rgba(0,78,91,.3), transparent 48%, rgba(234,51,37,.18));
  mix-blend-mode: color;
}
.grade-bleach img { filter: saturate(.28) contrast(1.38) brightness(.98); }
.grade-neon img { filter: saturate(1.58) contrast(1.2) brightness(.91) hue-rotate(-9deg); }
.grade-neon .director-grade-shade {
  background: radial-gradient(circle at 72% 28%, rgba(0,224,255,.26), transparent 38%), linear-gradient(145deg, rgba(255,0,130,.2), transparent 55%);
  mix-blend-mode: screen;
}
.grade-vhs img { filter: saturate(.82) contrast(.9) brightness(1.02) blur(.42px); }
.grade-vhs .director-grade-shade {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(255,0,68,.1), transparent 35%, rgba(0,220,255,.1));
  mix-blend-mode: screen;
}
.grade-mono img { filter: grayscale(1) contrast(1.42) brightness(.9); }
.director-card h4 { font-size: 13.5px; font-weight: 650; letter-spacing: -.2px; }
.director-card p { margin-top: 3px; color: #7e8283; font-size: 11.5px; line-height: 1.45; }
.director-card-upload .director-card-art {
  background: #171919;
  border: 2px dashed #3a3e3f;
}
.director-card-upload:hover .director-card-art { border-color: var(--accent); background: #1c1e1f; }
.director-card-upload .director-card-art b {
  font-size: 30px; font-weight: 400; letter-spacing: 0;
  color: #9da0a1; mix-blend-mode: normal;
}
.director-card-upload:hover .director-card-art b { color: var(--accent); }

.director-card.blocked { opacity: .42; }
.director-card.blocked .director-card-art { border-style: dashed; border-color: #3a3e3f; }
.director-card-why {
  margin-top: 5px; display: inline-block;
  font: 9px var(--mono); text-transform: uppercase; letter-spacing: .5px;
  color: #ff9a91;
}
.director-empty { padding: 40px 24px; color: #7e8283; font-size: 13px; }

@media (max-width: 1080px) {
  .director-bar { flex-wrap: wrap; }
  .director-main { flex: 1 1 100%; order: -1; }
  .director-generate { flex: 1 1 auto; width: auto; flex-direction: row; gap: 8px; padding: 14px; }
}
@media (max-width: 640px) {
  .home-composer { padding-inline: 14px; }
  .director-duration input[type="range"] { width: 92px; }
  .director-modal { padding: 0; }
  .director-sheet { border-radius: 0; height: 100%; max-height: none; }
}