/* 02 Looks, "the black edit": a studio shoot on a black backdrop. Softboxes fire with every flash;
   the viewfinder shoots the five looks in turn (focus, iris, flash); each shot develops on the
   contact strip under the title (red grease pencil circles the frame on set), lands as a print on
   the selects fan and is ticked off the shot list. */
#edit { --travel: 0px; --gp: #e3263a; --vfh: min(70vh, 680px);
  height: calc(100vh + var(--travel)); background: #050304; }
#edit .ed-stage { position: relative; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 44%, rgba(96, 26, 58, 0.42), rgba(40, 10, 24, 0.18) 55%, transparent 80%), linear-gradient(#060304, #0a0507 58%, #120a0d 78%, #050304); }

/* ---- the studio: backdrop sweep, floor, softboxes, beauty dish, stands, beams, giant word */
#edit .ed-studio { position: absolute; inset: 0; pointer-events: none; }
#edit .ed-studio > * { position: absolute; display: block; }
#edit .ed-floor { left: -10%; right: -10%; bottom: 0; height: 36%; background: radial-gradient(60% 70% at 50% 0%, rgba(255, 220, 236, 0.07), transparent 70%), linear-gradient(transparent, rgba(255, 255, 255, 0.022) 14%, transparent 62%);
  -webkit-mask: linear-gradient(transparent, #000 30%); mask: linear-gradient(transparent, #000 30%); }
#edit .ed-pool { left: 50%; bottom: 3%; width: 70vw; height: 22vh; margin-left: -35vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 230, 0.16), rgba(255, 46, 136, 0.06) 55%, transparent); filter: blur(6px); }
#edit .ed-word { left: 0; top: 50%; margin-top: -0.55em; white-space: nowrap; font: 400 clamp(150px, 23vw, 380px) / 1 var(--display); letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1px rgba(255, 214, 228, 0.15); will-change: transform; }

/* two strip softboxes flank the set, angled in at her, tucked behind the viewfinder */
#edit .ed-box { --bw: clamp(110px, 9.5vw, 150px); --bh: min(54vh, 490px); top: 50%; width: var(--bw); height: var(--bh); margin-top: calc(var(--bh) / -2); border-radius: 8px; padding: 7px; background: linear-gradient(#1b161a, #0c0a0c); transform: perspective(900px) rotateY(var(--ry)) rotate(var(--rz));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 70px 16px rgba(255, 240, 246, 0.2), 0 0 220px 80px rgba(255, 120, 180, 0.13); }
#edit .ed-box i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(120, 90, 104, 0.1) 1px, transparent 1px) 0 0 / 33.33% 100%, linear-gradient(rgba(120, 90, 104, 0.08) 1px, transparent 1px) 0 0 / 100% 12.5%, radial-gradient(80% 62% at 50% 50%, #fff 0 68%, #fffafc 86%, #f8ebf1 100%); box-shadow: inset 0 0 16px rgba(255, 210, 230, 0.55), 0 0 26px 4px rgba(255, 255, 255, 0.55); }
#edit .ed-box-l { --ry: 46deg; --rz: -2deg; left: calc(50% - var(--vfh) * 0.282 - var(--bw) + 66px); }
#edit .ed-box-r { --ry: -46deg; --rz: 2deg; left: calc(50% + var(--vfh) * 0.282 - 66px); }
#edit .ed-beam { top: -10vh; width: 46vw; height: 130vh; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(8px); opacity: 0.85;
  background: conic-gradient(from 180deg at 50% 0, transparent 0 166deg, rgba(255, 214, 228, 0.1) 172deg, rgba(255, 255, 255, 0.16) 180deg, rgba(255, 214, 228, 0.1) 188deg, transparent 194deg); animation: ed-sway 10s ease-in-out infinite alternate; }
#edit .ed-beam-l { left: -12vw; --a: -34deg; --b: -24deg; }
#edit .ed-beam-r { right: -12vw; --a: 34deg; --b: 24deg; animation-duration: 12s; }
@keyframes ed-sway { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }

/* red grease pencil (contact sheet marks) */
#edit .gp { position: absolute; z-index: 2; overflow: visible; pointer-events: none; fill: none; stroke: var(--gp); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: url(#ed-wax) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
#edit .gp path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
#edit .ed-defs { position: absolute; }

/* ---- the copy */
#edit .ed-copy { position: absolute; z-index: 40; left: var(--pad); top: 51%; width: min(31vw, 440px); transform: translateY(-50%); }
#edit .ed-copy::before { content: ""; position: absolute; inset: -70px -20px -60px -70px; z-index: -1; background: radial-gradient(closest-side, rgba(5, 3, 4, 0.9), rgba(5, 3, 4, 0.55) 60%, transparent); }
#edit .ed-copy .h-display { margin: 16px 0 18px; font-size: clamp(54px, 6.3vw, 104px); line-height: 0.9; }
#edit .ed-copy .h-display em { display: inline-block; }

/* ---- the contact strip: the five looks on one short roll. Frames still to shoot sit dark and
   develop as the camera takes them; the grease pencil circles the frame on set. */
#edit .ed-contact { --fw: clamp(58px, 5vw, 74px); --cg: 8px; --cb: 26px; --cur: 0; margin-top: 38px; }
#edit .ed-strip { position: relative; display: inline-flex; gap: var(--cg); padding: var(--cb) 10px; border-radius: 2px; counter-reset: fr; transform: rotate(-1.6deg); transform-origin: 0 50%;
  background-color: #0f0a0c; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.75));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='26' viewBox='0 0 20 26' preserveAspectRatio='none'%3E%3Crect x='5' y='4' width='10' height='9' rx='2.2' fill='%23f3dbe4' fill-opacity='.14'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='26' viewBox='0 0 20 26' preserveAspectRatio='none'%3E%3Crect x='5' y='13' width='10' height='9' rx='2.2' fill='%23f3dbe4' fill-opacity='.14'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 0, 0 100%; background-size: 20px var(--cb); }
#edit .ed-cf { position: relative; flex: none; width: var(--fw); height: calc(var(--fw) * 1.47); counter-increment: fr; }
#edit .ed-cf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); transition: filter 1.1s var(--ease); }
#edit .ed-cf::after { content: "\25B8 " counter(fr, decimal-leading-zero); position: absolute; left: 1px; top: calc(100% + var(--cb) * 0.1); font: 600 7.5px/1 var(--sans); letter-spacing: 0.22em; color: rgba(255, 170, 92, 0.7); }
#edit .ed-mark { left: calc(10px + var(--cur) * (var(--fw) + var(--cg)) - var(--fw) * 0.2); top: calc(var(--cb) - var(--fw) * 0.16); width: calc(var(--fw) * 1.4); height: calc(var(--fw) * 1.79); }
#edit.is-live .ed-cf img { filter: brightness(0.26) saturate(0) contrast(1.1); }
#edit.is-live .ed-cf.shot img { filter: none; }
#edit.is-live .ed-mark path { stroke-dashoffset: 1; }
#edit.is-live .ed-mark.go path { animation: ed-pencil 0.75s cubic-bezier(0.6, 0, 0.3, 1) 0.2s both; }
@keyframes ed-pencil { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- the viewfinder */
#edit .ed-vf { position: absolute; z-index: 20; left: 50%; top: 52%; height: var(--vfh); aspect-ratio: 361 / 640; margin: 0; transform: translate(-50%, -50%); --afx: 48%; --afy: 13%; --m: 0%; }
#edit .ed-shots { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #030203; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 60px 120px -40px #000, 0 0 140px -24px rgba(255, 46, 136, 0.55); }
#edit .ed-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
#edit .ed-shot.on { opacity: 1; }
#edit .ed-shots::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 62%, rgba(5, 3, 4, 0.72)), linear-gradient(125deg, rgba(255, 255, 255, 0.12), transparent 24%); }
@property --ir { syntax: "<percentage>"; inherits: false; initial-value: 102%; }
#edit .ed-iris { position: absolute; inset: 0; z-index: 3; pointer-events: none; --ir: 102%; background: #030203;
  -webkit-mask: radial-gradient(circle at 50% 42%, transparent var(--ir), #000 calc(var(--ir) + 0.6%)); mask: radial-gradient(circle at 50% 42%, transparent var(--ir), #000 calc(var(--ir) + 0.6%)); }
#edit .ed-vf.snap .ed-iris { animation: ed-iris 0.42s cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes ed-iris { 0% { --ir: 102%; } 36% { --ir: 0%; } 46% { --ir: 0%; } 100% { --ir: 102%; } }
#edit .ed-vf.snap .ed-shot.on { animation: ed-expose 0.7s ease-out 0.16s backwards; }
@keyframes ed-expose { 0% { filter: saturate(0.4) contrast(0.85); opacity: 0.55; } 100% { filter: none; opacity: 1; } }

#edit .ed-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #fff; font: 600 9.5px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
#edit .ed-ui > * { position: absolute; }
#edit .ed-grid { inset: 0; opacity: 0.5; background: linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(66.66% + 0.5px), transparent 0), linear-gradient(transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), rgba(255, 255, 255, 0.28) 0 calc(66.66% + 0.5px), transparent 0); }
#edit .ed-af { left: clamp(36px, var(--afx), calc(100% - 36px)); top: clamp(52px, var(--afy), calc(100% - 52px)); width: 58px; height: 58px; margin: -29px 0 0 -29px; transition: left 0.45s var(--ease), top 0.45s var(--ease); --c: #fff;
  background: linear-gradient(var(--c), var(--c)) 0 0 / 13px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 13px, linear-gradient(var(--c), var(--c)) 100% 0 / 13px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 13px, linear-gradient(var(--c), var(--c)) 0 100% / 13px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 13px, linear-gradient(var(--c), var(--c)) 100% 100% / 13px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 13px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6)); animation: ed-breathe 2.4s ease-in-out infinite; }
#edit .ed-af::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--c); }
@keyframes ed-breathe { 50% { transform: scale(0.92); } }
#edit .ed-vf.lock .ed-af { --c: #ff5aa0; }
#edit .ed-vf.snap .ed-af { animation: ed-hunt 0.5s ease-out; }
@keyframes ed-hunt { 0% { transform: scale(1.7); opacity: 0.4; } 30% { transform: scale(0.86); opacity: 1; } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
#edit .ed-rec { left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(5, 3, 4, 0.5); }
#edit .ed-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff2b4a; box-shadow: 0 0 10px #ff2b4a; animation: ed-rec 1.2s steps(2) infinite; }
@keyframes ed-rec { 50% { opacity: 0.15; } }
#edit .ed-stat { right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 999px; background: rgba(5, 3, 4, 0.5); }
#edit .ed-stat b { font-weight: 600; }
#edit .ed-bat { position: relative; display: inline-flex; gap: 1.5px; padding: 2px; border: 1.3px solid #fff; border-radius: 3px; }
#edit .ed-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0; }
#edit .ed-bat i { width: 3.5px; height: 6px; background: #fff; border-radius: 1px; }
#edit .ed-meter { left: 18%; right: 18%; bottom: 14px; height: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 1px, transparent 1px 10%) 0 100% / 100% 5px no-repeat, linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) 50% 100% / 1.5px 10px no-repeat; }
#edit .ed-meter::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.5); }
#edit .ed-meter i { position: absolute; left: calc(50% + var(--m)); top: -7px; width: 0; height: 0; margin-left: -4px; border: 4px solid transparent; border-top: 6px solid #ff5aa0; transition: left 0.5s var(--ease); }
#edit .vb { position: absolute; z-index: 5; width: 36px; height: 36px; border: 2px solid rgba(255, 255, 255, 0.88); pointer-events: none; }
#edit .vb-tl { left: -18px; top: -18px; border-right: 0; border-bottom: 0; border-top-left-radius: 11px; }
#edit .vb-tr { right: -18px; top: -18px; border-left: 0; border-bottom: 0; border-top-right-radius: 11px; }
#edit .vb-bl { left: -18px; bottom: -18px; border-right: 0; border-top: 0; border-bottom-left-radius: 11px; }
#edit .vb-br { right: -18px; bottom: -18px; border-left: 0; border-top: 0; border-bottom-right-radius: 11px; }
#edit .ed-cap { position: absolute; z-index: 6; left: 18px; right: 18px; bottom: 38px; display: flex; flex-direction: column; gap: 6px; }
#edit .ed-cap-k { font: 600 9.5px/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
#edit .ed-cap-n { position: relative; display: grid; font: italic 400 clamp(24px, 2.2vw, 32px) / 1 var(--serif); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
#edit .ed-cap-n > span { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.5s var(--ease); }
#edit .ed-cap-n > span.on { opacity: 1; transform: none; }

/* ---- selects: the prints land on a fan */
#edit .ed-pile { position: absolute; z-index: 22; left: 80.5%; top: 39%; width: 0; height: 0; --pw: clamp(130px, 11vw, 172px); --fx: -300px; --fy: 0px; }
#edit .ed-pol { position: absolute; left: 0; top: 0; width: var(--pw); padding: calc(var(--pw) * 0.05) calc(var(--pw) * 0.05) calc(var(--pw) * 0.2); border-radius: 3px; background: #fbf8f5;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.9), 0 6px 14px -8px rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
#edit .ed-pol img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 2px; }
#edit .ed-pol figcaption { left: calc(var(--pw) * 0.07); bottom: calc(var(--pw) * 0.055); font-size: calc(var(--pw) * 0.105); }
#edit .ed-pol:nth-child(1) { --x: calc(var(--pw) * -1.02); --y: calc(var(--pw) * 0.26); --r: -8deg; }
#edit .ed-pol:nth-child(2) { --x: calc(var(--pw) * -0.52); --y: calc(var(--pw) * 0.02); --r: -4deg; }
#edit .ed-pol:nth-child(3) { --x: 0px; --y: calc(var(--pw) * -0.07); --r: 0.5deg; }
#edit .ed-pol:nth-child(4) { --x: calc(var(--pw) * 0.5); --y: calc(var(--pw) * 0.03); --r: 4.5deg; }
#edit .ed-pol:nth-child(5) { --x: calc(var(--pw) * 0.98); --y: calc(var(--pw) * 0.28); --r: 8deg; }
#edit .ed-pol .gp-ring { left: 2%; top: 1%; width: 96%; height: 80%; }
#edit.is-live .ed-pol { opacity: 0; transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) scale(0.3); transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.4s 0.15s; }
#edit.is-live .ed-pol.on { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 0.9s cubic-bezier(0.22, 1.25, 0.4, 1) 0.24s, opacity 0.2s 0.24s; }
#edit.is-live .ed-pol .gp path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s ease 0s; }
#edit.is-live .ed-pol.on .gp path { stroke-dashoffset: 0; transition-delay: 1.1s; }
#edit.is-live .ed-pile.gather .ed-pol { opacity: 0; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(0.92); transition: opacity 0.6s ease, transform 0.6s ease; }

/* ---- the shot list (taped card) */
#edit .ed-sheet { position: absolute; z-index: 24; right: calc(var(--pad) + 1vw); bottom: 5.5vh; width: clamp(210px, 17vw, 250px); padding: 22px 22px 18px; border-radius: 3px; color: var(--ink-dark); transform: rotate(2.5deg);
  background: linear-gradient(transparent 0 35px, rgba(255, 46, 136, 0.35) 35px 36px, transparent 36px), #f5eee7; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.9), 0 4px 10px -4px rgba(0, 0, 0, 0.5); }
#edit .ed-sheet .tape { left: 50%; top: -12px; margin-left: -43px; transform: rotate(-4deg); }
#edit .ed-sheet-h { margin: -6px 0 12px; font: italic 400 25px/1 var(--serif); color: #2a0d19; }
#edit .ed-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
#edit .ed-list li { position: relative; padding: 7px 34px 7px 0; border-bottom: 1px dashed rgba(42, 13, 25, 0.2); font: 500 13.5px/1.25 var(--sans); color: #3a1a26; transition: color 0.4s; }
#edit .ed-list li:last-child { border-bottom: 0; }
#edit .ed-list .tk { position: absolute; right: 0; top: 50%; width: 30px; height: 20px; margin-top: -12px; overflow: visible; fill: none; stroke: var(--gp); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: url(#ed-wax); }
#edit .ed-list .tk path { stroke-dasharray: 1; stroke-dashoffset: 0; }
#edit.is-live .ed-list li { color: rgba(58, 26, 38, 0.5); }
#edit.is-live .ed-list li.done { color: #3a1a26; }
#edit.is-live .ed-list li.now { color: #c2125a; }
#edit.is-live .ed-list li.now::before { content: "\25B8"; position: absolute; left: -14px; color: #ff2e88; }
#edit.is-live .ed-list .tk path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.25s; }
#edit.is-live .ed-list li.done .tk path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease 0.5s; }

/* ---- phones and tall narrow screens: same shoot, stacked (the contact strip leads the copy) */
@media (max-width: 820px), (max-aspect-ratio: 85/100) {
  #edit { --travel: 0px; --vfh: min(46svh, 430px); }
  #edit .ed-stage { min-height: 560px; }
  #edit .ed-vf { left: 41%; top: 37.5%; }
  #edit .ed-cap { left: 12px; bottom: 30px; }
  #edit .ed-cap-n { font-size: 22px; }
  #edit .ed-rec { left: 9px; top: 9px; padding: 5px 8px 5px 6px; }
  #edit .ed-stat { right: 9px; top: 9px; gap: 6px; padding: 5px 7px; }
  #edit .ed-stat b:first-child { display: none; }
  #edit .ed-meter { bottom: 10px; }
  #edit .ed-af { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #edit .vb { width: 26px; height: 26px; }
  #edit .vb-tl, #edit .vb-bl { left: -11px; } #edit .vb-tr, #edit .vb-br { right: -11px; }
  #edit .vb-tl, #edit .vb-tr { top: -11px; } #edit .vb-bl, #edit .vb-br { bottom: -11px; }
  #edit .ed-pile { left: auto; right: 0; top: 37.5%; --pw: clamp(84px, 24vw, 120px); }
  #edit .ed-pol { left: calc(var(--pw) * -0.62); }
  #edit .ed-pol:nth-child(1) { --x: 0px; --y: calc(var(--pw) * -1.4); --r: 6deg; }
  #edit .ed-pol:nth-child(2) { --x: calc(var(--pw) * -0.1); --y: calc(var(--pw) * -0.7); --r: -5deg; }
  #edit .ed-pol:nth-child(3) { --x: calc(var(--pw) * 0.02); --y: 0px; --r: 4deg; }
  #edit .ed-pol:nth-child(4) { --x: calc(var(--pw) * -0.08); --y: calc(var(--pw) * 0.7); --r: -6deg; }
  #edit .ed-pol:nth-child(5) { --x: calc(var(--pw) * 0.04); --y: calc(var(--pw) * 1.4); --r: 5deg; }
  #edit .ed-copy { left: var(--pad); right: var(--pad); top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; transform: none; display: flex; flex-direction: column; align-items: flex-start; }
  #edit .ed-copy::before { inset: -40px -30px -30px; }
  #edit .ed-copy .h-display { margin: 10px 0 8px; font-size: clamp(42px, 12vw, 60px); }
  #edit .ed-copy .lede { font-size: 15px; }
  #edit .ed-contact { --fw: clamp(44px, 12.4vw, 56px); --cg: 6px; --cb: 20px; order: -1; margin: 0 0 20px; }
  #edit .ed-strip { padding: var(--cb) 8px; background-size: 16px var(--cb); }
  #edit .ed-cf::after { font-size: 6px; }
  #edit .ed-mark { left: calc(8px + var(--cur) * (var(--fw) + var(--cg)) - var(--fw) * 0.2); }
  #edit .ed-sheet { display: none; }
  #edit .ed-box { --bw: 74px; --bh: 34vh; top: 37.5%; padding: 5px; }
  #edit .ed-box-l { left: -30px; } #edit .ed-box-r { left: auto; right: -34px; }
  #edit .ed-word { top: 34%; font-size: 44vw; }
}

/* reduced motion: the shoot, finished and still */
@media (prefers-reduced-motion: reduce) {
  #edit { height: auto; }
  #edit .ed-stage { position: relative; height: 100vh; height: 100svh; }
  #edit .ed-beam, #edit .ed-af, #edit .ed-rec i { animation: none; }
}