.studio { display: grid; grid-template-columns: 400px 1fr; gap: 14px; padding: 14px; max-width: 1640px; margin: 0 auto; align-items: start; }
  @media (max-width: 960px) { .studio { grid-template-columns: 1fr; } }

  /* left: the controls */
  .ctl { position: sticky; top: 92px; display: grid; gap: 10px; padding: 10px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line);
         max-height: calc(100vh - 106px); overflow: auto; }
  @media (max-width: 960px) { .ctl { position: static; max-height: none; } }
  .card-hero { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: #000; }
  .card-hero video { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
  .card-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent 70%); }
  .card-hero div { position: absolute; left: 16px; bottom: 14px; z-index: 1; }
  .card-hero b { display: block; font: 900 26px/1 var(--display); font-stretch: 125%; text-transform: uppercase; color: var(--accent); }
  .card-hero span { color: #ddd; font-size: 14px; }
  .mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
  .mode button { border: 0; background: transparent; color: var(--ink-2); padding: 11px 8px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; display: flex; gap: 7px; align-items: center; justify-content: center; }
  .mode button[aria-pressed="true"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .mode svg { width: 16px; height: 16px; }
  .drop { position: relative; border: 1.5px dashed var(--line); border-radius: 16px; background: var(--bg); min-height: 170px; display: grid; place-items: center; text-align: center;
          padding: 18px; cursor: pointer; transition: border-color .15s, background .15s; }
  .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
  .drop .ico { width: 46px; height: 46px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; margin: 0 auto 12px; border: 1px solid var(--line); }
  .drop .ico svg { width: 20px; height: 20px; }
  .drop .stack { display: flex; justify-content: center; margin-bottom: 12px; }
  .drop .stack .ico { margin: 0 -5px; width: 40px; height: 40px; }
  .drop b { display: block; font-size: 16px; }
  .drop small { color: var(--ink-3); font-size: 13px; }
  .drop input { display: none; }
  .drop.filled { padding: 0; overflow: hidden; min-height: 0; border-style: solid; cursor: default; }
  .drop.filled video { width: 100%; max-height: 260px; object-fit: contain; background: #000; display: block; }
  .chip-x { position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; border-radius: 9px; padding: 6px 10px; background: rgba(0,0,0,.65); color: #fff; font-weight: 600; font-size: 12px; cursor: pointer; }
  .meta { position: absolute; left: 8px; top: 8px; font: 500 11px var(--mono); padding: 4px 7px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; }
  .refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; padding: 10px; }
  .refs .t { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--card-2) center / cover; }
  .refs .t button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
  .refs .add { border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--ink-3); font-size: 22px; cursor: pointer; }
  .sub { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 4px 4px 0; }
  .crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .crew button { position: relative; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 4px 4px 6px; cursor: pointer; color: var(--ink-2); font-size: 12px; font-weight: 600; }
  .crew img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; margin-bottom: 4px; }
  .crew button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 2px var(--accent-soft); }
  .crew button[aria-pressed="true"]::after { content: attr(data-n); position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 11px/20px var(--mono); }
  .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
  .row label { font-weight: 600; }
  .row small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12px; }
  .switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--card-2); border: 1px solid var(--line); cursor: pointer; flex: none; }
  .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform .15s; }
  .switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
  .switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--accent-ink); }
  textarea { width: 100%; min-height: 84px; resize: vertical; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 12px; font: 15px/1.4 var(--sans); }
  .q { display: flex; gap: 4px; }
  .q button { border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); padding: 7px 11px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 13px; }
  .q button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); padding: 4px 6px; }
  .consent input { margin-top: 3px; accent-color: var(--accent); }
  .go { position: sticky; bottom: 0; padding-top: 4px; background: linear-gradient(0deg, var(--bg-2) 70%, transparent); }
  .go .btn { width: 100%; padding: 16px; font-size: 16px; }
  .go small { display: block; text-align: center; color: var(--ink-3); font-size: 12px; margin-top: 6px; }

  /* right: the stage */
  .stage { border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); padding: 14px; min-height: calc(100vh - 106px); }
  .tabs { display: flex; gap: 6px; }
  .tabs button { border: 0; background: transparent; color: var(--ink-3); padding: 9px 14px; border-radius: 11px; font-weight: 600; cursor: pointer; display: flex; gap: 7px; align-items: center; }
  .tabs button[aria-pressed="true"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .tabs svg { width: 15px; height: 15px; }
  .intro { display: grid; grid-template-columns: 1fr minmax(260px, 400px); gap: 30px; align-items: center; padding: 30px 26px 40px; }
  @media (max-width: 1200px) { .intro { grid-template-columns: 1fr; } }
  .intro h1 { font-size: clamp(38px, 5vw, 66px); line-height: .9; margin: 0 0 14px; }
  .intro h1 span { color: var(--accent); }
  .intro p { color: var(--ink-2); font-size: 17px; max-width: 520px; margin: 0; }
  .steps3 { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; font-size: 14px; color: var(--ink-2); }
  .steps3 b { font: 600 11px var(--mono); color: var(--accent); margin-right: 6px; }
  .ba { position: relative; aspect-ratio: 4 / 5; max-height: 520px; width: 100%; margin-left: auto; border-radius: 18px; overflow: hidden; background: #000; user-select: none; touch-action: none; cursor: ew-resize; }
  .ba video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .ba .after { clip-path: inset(0 0 0 var(--cut, 50%)); }
  .ba .bar { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: var(--accent); transform: translateX(-1px); }
  .ba .bar i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #000; font: 700 13px var(--mono); font-style: normal; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
  .ba .lbl { position: absolute; top: 12px; font: 600 12px var(--sans); padding: 6px 11px; border-radius: 9px; background: rgba(0,0,0,.6); color: #fff; z-index: 1; }
  .ba .lbl.l { left: 12px; }
  .ba .lbl.r { right: 12px; background: var(--accent); color: var(--accent-ink); }
  .libhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 6px 14px; }
  .libhead h2 { font-size: 22px; margin: 0; }
  .lib { columns: 4 230px; column-gap: 12px; }
  .clip { break-inside: avoid; margin-bottom: 12px; position: relative; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; border: 2px solid transparent; }
  .clip video { width: 100%; display: block; }
  .clip .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); color: #fff; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
  .clip .cap small { font: 500 11px var(--mono); color: #bbb; }
  .clip .use { position: absolute; top: 10px; right: 10px; padding: 7px 11px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; opacity: 0; transform: translateY(-4px); transition: .15s; }
  .clip:hover .use, .clip.on .use { opacity: 1; transform: none; }
  .clip.on { border-color: var(--accent); }
  .hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 6px; }
  .h { border-radius: 16px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
  .h video { width: 100%; display: block; background: #000; aspect-ratio: 9 / 14; object-fit: cover; }
  .h .wait { aspect-ratio: 9 / 14; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--ink-2); background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 60%); }
  .h .wait.bad { color: var(--err); }
  .h .bar2 { height: 4px; background: var(--card-2); border-radius: 2px; margin-top: 12px; overflow: hidden; width: 140px; }
  .h .bar2 i { display: block; height: 100%; width: 40%; background: var(--accent); animation: slide 1.4s infinite ease-in-out; }
  @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
  .h footer { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-3); }
  .h footer a { color: var(--ink); font-weight: 600; }
  .empty { text-align: center; padding: 120px 16px; color: var(--ink-3); }
  .empty b { display: block; color: var(--ink); font-size: 20px; margin-bottom: 6px; }
  .how { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 20px 6px; }
  .how div { padding: 22px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
  .how b { font: 850 44px/1 var(--display); color: var(--accent); }
  .how h3 { margin: 12px 0 6px; font-size: 18px; }
  .how p { margin: 0; color: var(--ink-2); font-size: 15px; }
  [hidden] { display: none !important; }

  /* shared by the app pages: tiles, chips, grids */
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips button { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; }
  .chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .field { display: grid; gap: 6px; }
  .field > span { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-left: 4px; }
  input.text, select.text { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 12px; font: 15px var(--sans); }
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .tile { position: relative; border-radius: 16px; overflow: hidden; background: var(--bg); border: 2px solid var(--line); cursor: pointer; text-align: left; padding: 0; color: var(--ink); transition: transform .15s, border-color .15s; }
  .tile:hover { transform: translateY(-2px); }
  .tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .tile .pic { aspect-ratio: 4 / 5; background: var(--card-2) center / cover; position: relative; overflow: hidden; }
  .tile .pic video, .tile .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile .badge { position: absolute; top: 8px; left: 8px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; }
  .tile .price { position: absolute; top: 8px; right: 8px; font: 600 11px var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); }
  .tile .txt { padding: 10px 12px 12px; }
  .tile .txt b { display: block; font-size: 15px; }
  .tile .txt small { color: var(--ink-3); font-size: 13px; }
  .filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 6px 14px; }
  .filters button { border: 0; background: var(--bg); color: var(--ink-2); padding: 8px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
  .filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .picked { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--accent); }
  .picked .pic { width: 54px; height: 66px; border-radius: 10px; background: var(--card-2) center / cover; flex: none; overflow: hidden; }
  .picked .pic video { width: 100%; height: 100%; object-fit: cover; }
  .picked b { display: block; }
  .picked small { color: var(--ink-3); font-size: 13px; }
  .drop.filled img.prev { width: 100%; max-height: 260px; object-fit: contain; background: #000; display: block; }
  .h img { width: 100%; display: block; background: #000; aspect-ratio: 9 / 14; object-fit: cover; }
  .h .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px; padding: 6px; }
  .h .thumbs a img { aspect-ratio: auto; border-radius: 6px; }
  /* a page with several tools: a wrapping bar of modes */
  .modebar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
  .modebar button { flex: 1 1 auto; border: 0; background: transparent; color: var(--ink-2); padding: 10px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; }
  .modebar button[aria-pressed="true"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .demo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin-left: auto; }
  .demo figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 5; }
  .demo figure img, .demo figure video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .demo figure.cut { background: repeating-conic-gradient(#2a2a2e 0 25%, #1c1c1f 0 50%) 0 0 / 20px 20px; }
  .demo figure.cut img { object-fit: contain; }
  .demo figcaption { position: absolute; left: 8px; top: 8px; font: 600 12px var(--sans); padding: 5px 9px; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; }
  .demo figure:last-child figcaption { background: var(--accent); color: var(--accent-ink); }
  .masonry { columns: 4 220px; column-gap: 12px; }
  .masonry figure { break-inside: avoid; margin: 0 0 12px; border-radius: 16px; overflow: hidden; background: #000; position: relative; }
  .masonry video, .masonry img { width: 100%; display: block; }
  .masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); color: #fff; font-size: 13px; font-weight: 600; }