/* The edit lab is isolated so it can live inside any section of the portfolio. */
.edit-lab {
  --el-ink: #f2eee8;
  --el-muted: #8d9594;
  --el-teal: #4fb8ad;
  --el-line: rgb(232 242 239 / .12);
  --el-progress: 0%;
  --el-orbit: -24deg;
  --el-stage-width: 720px;
  --el-type-shift: 0px;
  color: var(--el-ink);
  border: 1px solid var(--el-line);
  background: #111515;
  font-family: var(--ui, "Space Grotesk", sans-serif);
  font-size: 13px;
  line-height: 1.4;
  isolation: isolate;
}
.edit-lab *, .edit-lab *::before, .edit-lab *::after { box-sizing: border-box; }
.edit-lab button, .edit-lab input { font: inherit; }
.edit-lab button { color: inherit; cursor: pointer; }
.edit-lab button:focus-visible, .edit-lab input:focus-visible { outline: 2px solid var(--el-teal); outline-offset: 4px; }
.edit-lab button { -webkit-tap-highlight-color: transparent; }
.el-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 51px; border-bottom: 1px solid var(--el-line); padding: 0 22px; background: #171b1b; }
.el-tab { display: flex; align-items: center; gap: 10px; align-self: stretch; position: relative; font-size: 11px; color: #b0b8b5; }
.el-tab::after { content: ''; position: absolute; left: -22px; right: -22px; bottom: -1px; height: 2px; background: var(--el-teal); }
.el-tab strong { font-weight: 500; color: var(--el-ink); }
.el-tab-dot { width: 6px; height: 6px; background: var(--el-teal); }
.el-tab-slash { margin: 0 3px; opacity: .6; }
.el-top-meta { font-size: 10px; letter-spacing: .045em; color: #8e9894; white-space: nowrap; }
.el-top-meta span { padding: 0 6px; }
.el-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 296px; }
.el-preview { min-width: 0; border-right: 1px solid var(--el-line); }
.el-monitor { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; perspective: 1100px; background: radial-gradient(ellipse at 50% 50%, #1b2525 0%, #0a0d0e 65%); user-select: none; }
.el-monitor::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#607574 1px, transparent 1px); background-size: 19px 19px; opacity: 0; transition: opacity .7s; }
.is-exploded .el-monitor::before { opacity: .15; }
.el-monitor-label { position: absolute; left: 20px; top: 18px; z-index: 2; color: #8b9692; font-size: 9px; letter-spacing: .1em; }
.el-view-name { color: #8fa89a; margin-left: 8px; }
.el-monitor-bottom { position: absolute; inset: auto 20px 15px; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .09em; color: #7b8782; pointer-events: none; }
.el-monitor-state { display: flex; align-items: center; gap: 6px; }
.el-monitor-state::before { content: ''; height: 4px; width: 4px; border-radius: 50%; background: #68706c; }
.is-playing .el-monitor-state::before { background: #70c9aa; box-shadow: 0 0 7px #4fb8ad66; }
.el-monitor-scale span { margin-left: 7px; }
.el-monitor-corner { position: absolute; width: 10px; height: 10px; border-color: #3e4f49; border-style: solid; z-index: 1; pointer-events: none; }
.el-monitor-corner--tl { top: 42px; left: 19px; border-width: 1px 0 0 1px; }
.el-monitor-corner--br { bottom: 36px; right: 19px; border-width: 0 1px 1px 0; }
.el-stage { position: relative; width: 89%; aspect-ratio: 16 / 9; transform-style: preserve-3d; transform: rotateX(0) rotateY(0) scale(1); transition: transform .9s cubic-bezier(.16, 1, .3, 1); background-color: #101718; background-image: linear-gradient(45deg, #172022 25%, transparent 25%), linear-gradient(-45deg, #172022 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #172022 75%), linear-gradient(-45deg, transparent 75%, #172022 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.is-exploded .el-stage { transform: rotateX(12deg) rotateY(var(--el-orbit)) scale(.67); background: none; }
.el-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1), outline-color .5s, box-shadow .7s; outline: 1px solid transparent; pointer-events: none; }
.el-plane-content { position: absolute; inset: 0; overflow: hidden; }
.el-plane.is-off > .el-plane-content { visibility: hidden; }
.el-plane--footage { --plane-color: #67ad81; z-index: 1; }
.el-plane--grade { --plane-color: #9a91c5; z-index: 2; }
.el-plane--captions { --plane-color: #d8c9a8; z-index: 3; }
.el-plane--graphics { --plane-color: #4fb8ad; z-index: 4; }
.is-exploded .el-plane { outline-color: var(--plane-color); box-shadow: 0 18px 50px #0005; }
.is-exploded .el-plane.is-off { outline-color: #515c57; }
.is-exploded .el-plane--footage { transform: translateZ(-110px); }
.is-exploded .el-plane--grade { transform: translateZ(-32px); }
.is-exploded .el-plane--captions { transform: translateZ(46px); }
.is-exploded .el-plane--graphics { transform: translateZ(124px); }
.el-plane-label { display: block; position: absolute; left: -1px; top: -24px; font-size: 10px; font-weight: 500; letter-spacing: .07em; color: var(--plane-color); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.is-exploded .el-plane-label { opacity: 1; transition-delay: .25s; }
.is-exploded .el-plane.is-off .el-plane-label { color: #86918a; }
.is-exploded .el-plane.is-off .el-plane-label::after { content: ' / OFF'; }
.el-footage-content { background: #0b1413; }
.el-video { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.14) translateX(13%); }
.el-footage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #07100ff5 0, #07100fe6 19%, #07100f9c 38%, #07100f0a 70%), linear-gradient(0deg, #07100f99, transparent 42%); }
.el-grade-content { background: linear-gradient(112deg, rgb(16 97 88 / .31), transparent 64%), linear-gradient(16deg, rgb(0 15 23 / .32), rgb(250 175 92 / .11)); box-shadow: inset 0 0 70px #02191633; }
.el-composition-eyebrow { position: absolute; top: 9.1%; left: 7%; font-size: calc(var(--el-stage-width) * .011); letter-spacing: .18em; color: #9baea6; }
.el-composition-eyebrow span { color: #d1dfd7; }
.el-title { position: absolute; left: 6.5%; top: 19%; display: flex; flex-direction: column; font-family: var(--serif, Georgia, serif); font-size: calc(var(--el-stage-width) * .116); font-weight: 400; letter-spacing: -.05em; line-height: .9; transform: translateY(var(--el-type-shift)); color: #f5f1e5; text-shadow: 0 2px 18px #07100f33; }
.el-title em { font: inherit; font-style: italic; color: #8edac4; margin-left: 2%; }
.el-composition-rule { position: absolute; left: 7%; right: 7%; bottom: 13%; display: flex; align-items: center; gap: 10px; }
.el-composition-rule span { height: 1px; width: 26%; background: #a6cfbd88; transform-origin: left center; transform: scaleX(var(--el-rule-scale, 1)); }
.el-composition-rule i { height: 3px; width: 3px; background: #8edac4; }
.el-composition-credit { position: absolute; left: 7%; bottom: 6.5%; font-size: calc(var(--el-stage-width) * .01); letter-spacing: .18em; color: #a3b9ad; }
.el-composition-credit span { padding: 0 .8em; color: #4f7664; }
.el-registration { position: absolute; right: 5.5%; top: 10%; width: 33%; height: 56%; opacity: .5; }
.el-registration i { position: absolute; width: 9%; height: 13%; border: 1px solid #adc6b380; }
.el-registration i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.el-registration i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.el-registration i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.el-registration i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.el-caption { position: absolute; left: 52%; right: 4%; bottom: 18%; text-align: center; font-family: var(--ui, sans-serif); font-size: clamp(10px, calc(var(--el-stage-width) * .014), 13px); font-weight: 500; line-height: 1.4; letter-spacing: .04em; color: #f3eddf; white-space: nowrap; text-shadow: 0 1px 12px #000; }
.el-caption span, .el-caption strong { display: inline-block; padding: .37em .28em; }
.el-caption strong { background: #b1dfca; padding-inline: .5em; font-weight: 600; color: #14291f; text-shadow: none; }
.el-transport { min-height: 63px; padding: 0 19px; display: flex; align-items: center; gap: 14px; background: #151a19; border-top: 1px solid var(--el-line); }
.el-icon-button { display: grid; place-items: center; width: 30px; height: 32px; padding: 0; border: 0; background: transparent; flex-shrink: 0; }
.el-play svg { width: 17px; height: 17px; }
.el-play:hover { color: var(--el-teal); }
.el-time, .el-duration { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.el-time { color: #8ec7ba; min-width: 75px; }
.el-duration { color: #68766f; }
.el-muted { font-size: 8px; letter-spacing: .08em; color: #8c9691; border-left: 1px solid #39423e; padding-left: 14px; }
.el-scrub-wrap { flex: 1; display: flex; align-items: center; min-width: 35px; }
.edit-lab input[type="range"] { -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; height: 24px; cursor: pointer; width: 100%; accent-color: var(--el-teal); }
.edit-lab input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: #43504a; }
.edit-lab input[type="range"]::-moz-range-track { height: 2px; background: #43504a; }
.edit-lab .el-scrub::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--el-teal) var(--el-progress), #43504a var(--el-progress)); }
.edit-lab input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 13px; border: 1px solid #98d3c8; background: var(--el-teal); border-radius: 1px; margin-top: -5.5px; }
.edit-lab input[type="range"]::-moz-range-thumb { width: 7px; height: 13px; border: 1px solid #98d3c8; background: var(--el-teal); border-radius: 1px; }
.edit-lab input[type="range"]:disabled { opacity: .22; cursor: default; }
.el-controls { min-width: 0; display: flex; flex-direction: column; padding: 26px 22px 17px; background: #151a19; }
.el-controls-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.el-controls-heading h3 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -.035em; }
.el-controls-heading > span { font-size: 8px; letter-spacing: .06em; color: #809087; white-space: nowrap; }
.el-instruction { margin: 6px 0 20px; color: #909c95; font-size: 11px; }
.el-layers { padding: 0; margin: 0; border: 0; }
.el-layer { display: flex; align-items: center; position: relative; gap: 11px; padding: 13px 0; border-top: 1px solid #26302b; cursor: pointer; user-select: none; }
.el-layer--teal { --layer-color: #4fb8ad; }
.el-layer--warm { --layer-color: #d8c9a8; }
.el-layer--violet { --layer-color: #9a91c5; }
.el-layer--green { --layer-color: #67ad81; }
.el-layer-track { display: grid; place-items: center; align-self: stretch; width: 24px; border-left: 2px solid var(--layer-color); color: var(--layer-color); font-size: 9px; background: color-mix(in srgb, var(--layer-color) 8%, transparent); transition: opacity .2s; }
.el-layer-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.el-layer-copy strong { font-size: 13px; font-weight: 500; }
.el-layer-copy > span { font-size: 11px; color: #98a69d; }
.el-layer input { position: absolute; right: 0; width: 32px; height: 32px; opacity: 0; cursor: pointer; z-index: 1; }
.el-layer-eye { display: grid; place-items: center; width: 30px; height: 30px; color: var(--layer-color); border-radius: 3px; position: relative; }
.el-layer-eye svg { width: 17px; height: 17px; }
.el-layer input:focus-visible + .el-layer-eye { outline: 2px solid var(--el-teal); outline-offset: 2px; }
.el-layer input:hover + .el-layer-eye { background: #ffffff0a; }
.el-layer.is-off .el-layer-eye { color: #58615a; }
.el-layer.is-off .el-layer-eye::after { content: ''; position: absolute; width: 21px; height: 1px; background: #6a756e; transform: rotate(-45deg); }
.el-layer.is-off .el-layer-copy, .el-layer.is-off .el-layer-track { opacity: .4; }
.el-spatial-controls { margin-top: auto; padding-top: 18px; }
.el-explode { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 43px; border: 1px solid #41675d; background: #203a31; padding: 10px 13px; font-size: 12px; transition: background .2s, border-color .2s; }
.el-explode svg { width: 17px; height: 17px; color: #8dcab4; }
.el-explode:hover { border-color: #6ea58e; background: #294b3f; }
.el-explode[aria-pressed="true"] { color: #b8e3d1; border-color: #6ea58e; }
.el-button-arrow { margin-left: auto; font-size: 16px; color: #a4ccb8; }
.el-orbit-row { display: flex; align-items: center; gap: 14px; padding-top: 11px; color: #a0afa5; font-size: 11px; }
.el-orbit-row label { width: 30px; flex-shrink: 0; }
.el-orbit-value { min-width: 31px; text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; }
.el-reset { margin-top: 17px; display: flex; gap: 6px; justify-content: center; align-items: center; min-height: 32px; padding: 7px; border: 0; background: none; color: #a4b1a8 !important; font-size: 12px !important; }
.el-reset:hover { color: #e0e9df !important; }
.el-reset svg { width: 12px; height: 12px; }
.el-monitor.is-orbitable { cursor: grab; touch-action: pan-y; }
.el-monitor.is-dragging { cursor: grabbing; }
.is-dragging .el-stage { transition: none; }
.el-timeline { background: #101513; border-top: 1px solid var(--el-line); padding: 0 22px 18px; }
.el-timeline-heading { height: 43px; display: flex; gap: 16px; align-items: center; font-size: 8px; color: #8fa89a; letter-spacing: .07em; }
.el-timeline-title { color: #6c7971; letter-spacing: .04em; }
.el-timeline-length { margin-left: auto; color: #83988c; font-variant-numeric: tabular-nums; }
.el-timeline-body { display: flex; gap: 16px; }
.el-track-labels { padding-top: 20px; display: flex; flex-direction: column; width: 22px; gap: 5px; flex-shrink: 0; }
.el-track-labels span { line-height: 22px; font-size: 8px; color: #8fa89a; }
.el-tracks { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; background-image: linear-gradient(90deg, #a6c0af08 1px, transparent 1px); background-size: 8.3333% 100%; }
.el-ruler { display: flex; justify-content: space-between; align-items: flex-start; height: 15px; color: #758c7d; font-size: 8px; font-variant-numeric: tabular-nums; }
.el-track { height: 22px; transition: opacity .2s; }
.el-track--teal { --track-color: #4fb8ad; }
.el-track--warm { --track-color: #d8c9a8; }
.el-track--violet { --track-color: #9a91c5; }
.el-track--green { --track-color: #67ad81; }
.el-track-clip { display: flex; align-items: center; height: 100%; background: color-mix(in srgb, var(--track-color) 21%, #131c17); border: 1px solid color-mix(in srgb, var(--track-color) 44%, transparent); border-radius: 2px; padding-inline: 8px; color: color-mix(in srgb, var(--track-color) 70%, #fff); overflow: hidden; }
.el-track-clip span { font-size: 10px; white-space: nowrap; }
.el-track--warm .el-track-clip { background-image: linear-gradient(90deg, transparent calc(33.3333% - 1px), #080d0980 33.3333%, transparent calc(33.3333% + 2px), transparent calc(66.6666% - 1px), #080d0980 66.6666%, transparent calc(66.6666% + 2px)); }
.el-track--footage .el-track-clip { background-size: 5px 100%; }
.el-track.is-off { opacity: .2; }
.el-playhead { position: absolute; top: 10px; bottom: -5px; width: 1px; left: 0; background: #a7deca; will-change: transform; box-shadow: 0 0 8px #a7deca20; pointer-events: none; }
.el-playhead > span { display: block; position: absolute; top: -5px; left: -3px; width: 7px; height: 7px; background: #a7deca; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.el-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 1400px) {
  .el-workspace { grid-template-columns: minmax(0, 1fr) 330px; }
  .el-controls { padding: 32px 27px 22px; }
  .el-layer { padding-block: 17px; }
  .el-controls-heading h3 { font-size: 16px; }
}
@media (max-width: 1050px) {
  .el-workspace { grid-template-columns: minmax(0, 1fr) 258px; }
  .el-controls { padding: 22px 17px 12px; }
  .el-layer { padding-block: 10px; }
  .el-layer-copy > span { font-size: 11px; }
  .el-instruction { margin-bottom: 16px; }
  .el-controls-heading h3 { font-size: 13px; }
  .el-controls-heading > span { display: none; }
  .el-spatial-controls { padding-top: 14px; }
  .el-reset { margin-top: 10px; }
  .el-transport { gap: 9px; padding-inline: 12px; }
  .el-muted { display: none; }
}
@media (max-width: 760px) {
  .el-workspace { display: block; }
  .el-preview { border-right: 0; }
  .el-topbar { padding-inline: 15px; min-height: 45px; }
  .el-tab { font-size: 10px; gap: 7px; }
  .el-tab::after { left: -15px; right: -15px; }
  .el-top-meta { font-size: 8px; }
  .el-top-meta span { padding-inline: 3px; }
  .el-monitor { aspect-ratio: 16 / 10; }
  .el-monitor-label { top: 10px; left: 15px; font-size: 8px; }
  .el-monitor-bottom { inset-inline: 15px; bottom: 9px; font-size: 8px; }
  .el-monitor-corner--tl { top: 35px; left: 14px; }
  .el-monitor-corner--br { bottom: 30px; right: 14px; }
  .el-controls { border-top: 1px solid var(--el-line); padding: 22px 20px 17px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .el-controls-heading { grid-column: 1 / -1; }
  .el-controls-heading > span { display: inline; }
  .el-controls-heading h3 { font-size: 15px; }
  .el-instruction { grid-column: 1 / -1; margin: 6px 0 16px; }
  .el-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; grid-column: 1 / -1; }
  .el-layer { padding-block: 12px; }
  .el-layer-copy > span { display: none; }
  .el-layer-copy strong { font-size: 13px; }
  .el-composition-eyebrow, .el-composition-credit { display: none; }
  .el-title { transform: none; }
  .el-caption { left: 44%; right: 3%; bottom: 6%; }
  .el-layer-track { width: 21px; }
  .el-layer { gap: 8px; }
  .el-spatial-controls { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 22px; padding-top: 15px; }
  .el-orbit-row { padding: 0; gap: 10px; }
  .el-reset { grid-column: 1 / -1; margin-top: 15px; }
  .el-timeline { padding-inline: 20px; }
  .is-exploded .el-stage { transform: rotateX(12deg) rotateY(var(--el-orbit)) scale(.64); }
  .is-exploded .el-plane--footage { transform: translateZ(-72px); }
  .is-exploded .el-plane--grade { transform: translateZ(-20px); }
  .is-exploded .el-plane--captions { transform: translateZ(32px); }
  .is-exploded .el-plane--graphics { transform: translateZ(84px); }
  .el-plane-label { font-size: 9px; top: -19px; }
}
@media (max-width: 420px) {
  .el-top-meta { display: none; }
  .el-controls { padding-inline: 15px; column-gap: 13px; }
  .el-layers { column-gap: 14px; }
  .el-layer-eye { width: 23px; }
  .el-spatial-controls { gap: 14px; grid-template-columns: 1.15fr 1fr; }
  .el-explode { gap: 6px; font-size: 12px; padding-inline: 9px; }
  .el-explode svg { width: 14px; height: 14px; }
  .el-button-arrow { display: none; }
  .el-orbit-row { font-size: 11px; gap: 6px; }
  .el-orbit-row label { width: 24px; }
  .el-transport { min-height: 55px; gap: 7px; }
  .el-time, .el-duration { font-size: 8px; }
  .el-time { min-width: 62px; }
  .el-duration { display: none; }
  .el-timeline { padding-inline: 15px; }
  .el-timeline-heading { font-size: 8px; gap: 9px; }
  .el-track-labels { width: 15px; }
  .el-timeline-body { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .edit-lab *, .edit-lab *::before, .edit-lab *::after { transition-duration: 0s !important; animation: none !important; }
}

/* Touch: give the transport buttons a finger-sized target. */
@media (pointer: coarse) {
  .el-play { min-width: 44px; min-height: 44px; }
  .el-reset { min-height: 44px; }
}