/*
 * Pros Cam: studio.css — the studio's screens on the phone: lights, the photo editor, the video editor.
 * Loaded after phone.css.
 */

/* Registered, so the light moves from one look to the next instead of jumping. */
@property --room-a { syntax: "<color>"; inherits: true; initial-value: #2a2623; }
@property --room-b { syntax: "<color>"; inherits: true; initial-value: #0e0d0d; }
@property --kcol { syntax: "<color>"; inherits: true; initial-value: #ffeeda; }
@property --fcol { syntax: "<color>"; inherits: true; initial-value: #aac3ff; }
@property --rl-col { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --rr-col { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --kx { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --ky { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --shx { syntax: "<percentage>"; inherits: true; initial-value: 55%; }
@property --sh-ang { syntax: "<angle>"; inherits: true; initial-value: 90deg; }
@property --ka { syntax: "<number>"; inherits: true; initial-value: 0.8; }
@property --fa { syntax: "<number>"; inherits: true; initial-value: 0.2; }
@property --sh { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --rl-a { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --rr-a { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tint-a { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --vig { syntax: "<number>"; inherits: true; initial-value: 0.3; }
@property --bars { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p-ring { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p-win { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p-neon { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p-sun { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wipe { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

:root {
  /* The head and shoulders the studio lights fall on (the same shapes as the footage's silhouettes). */
  --hair-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath d='M64 78C59 38 80 25 100 25c22 0 41 14 36 53-4-19-16-28-36-28S68 59 64 78z'/%3E%3C/svg%3E");
  --sil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cpath d='M0 240V216C0 174 38 153 74 145C90 141 95 135 95 122h10c0 13 5 19 21 23 36 8 74 29 74 71v24z'/%3E%3Crect x='82' y='100' width='36' height='44' rx='14'/%3E%3Cellipse cx='100' cy='78' rx='35' ry='44'/%3E%3Cpath d='M64 78C59 38 80 25 100 25c22 0 41 14 36 53-4-19-16-28-36-28S68 59 64 78z'/%3E%3C/svg%3E");
}

/* 6. Studio lights ---------------------------------------------------------------------------- */

.lt-studio { --room-a: #3a342f; --room-b: #0d0c0c; --kcol: #ffeeda; --kx: 26%; --ky: 30%; --ka: 0.92; --fcol: #aac3ff; --fa: 0.3; --sh: 0.3; --sh-ang: 90deg; --shx: 55%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0.22; --tint: #000000; --tint-a: 0; --vig: 0.4; --bars: 0; --p-ring: 0; --p-win: 0; --p-neon: 0; --p-sun: 0; }
.lt-beauty { --room-a: #5b4742; --room-b: #1b1413; --kcol: #ffe3e1; --kx: 50%; --ky: 24%; --ka: 0.9; --fcol: #ffd0e2; --fa: 0.55; --sh: 0.06; --sh-ang: 90deg; --shx: 70%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0.1; --tint: #ffbcc8; --tint-a: 0.1; --vig: 0.24; --bars: 0; --p-ring: 0; --p-win: 0; --p-neon: 0; --p-sun: 0; }
.lt-rembrandt { --room-a: #2c2420; --room-b: #070606; --kcol: #ffd5ab; --kx: 20%; --ky: 24%; --ka: 1; --fcol: #6a7a9a; --fa: 0.06; --sh: 0.8; --sh-ang: 90deg; --shx: 46%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0; --tint: #3c1e0a; --tint-a: 0.12; --vig: 0.6; --bars: 0; --p-ring: 0; --p-win: 0; --p-neon: 0; --p-sun: 0; }
.lt-butterfly { --room-a: #38322f; --room-b: #0c0b0b; --kcol: #fff8f0; --kx: 50%; --ky: 6%; --ka: 1; --fcol: #c8d2ff; --fa: 0.24; --sh: 0.5; --sh-ang: 180deg; --shx: 50%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0; --tint: #000000; --tint-a: 0; --vig: 0.42; --bars: 0; --p-ring: 0; --p-win: 0; --p-neon: 0; --p-sun: 0; }
.lt-window { --room-a: #566574; --room-b: #161c24; --kcol: #d8eaff; --kx: 8%; --ky: 38%; --ka: 0.96; --fcol: #9db4d0; --fa: 0.1; --sh: 0.52; --sh-ang: 90deg; --shx: 48%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0; --tint: #9fc6ff; --tint-a: 0.07; --vig: 0.36; --bars: 0; --p-ring: 0; --p-win: 1; --p-neon: 0; --p-sun: 0; }
.lt-ring { --room-a: #363640; --room-b: #0d0d12; --kcol: #ebf0ff; --kx: 50%; --ky: 40%; --ka: 0.78; --fcol: #dfe8ff; --fa: 0.4; --sh: 0; --sh-ang: 90deg; --shx: 55%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0.16; --tint: #b4c8ff; --tint-a: 0.06; --vig: 0.3; --bars: 0; --p-ring: 1; --p-win: 0; --p-neon: 0; --p-sun: 0; }
.lt-golden { --room-a: #6e3e1c; --room-b: #1e1008; --kcol: #ffaa5a; --kx: 92%; --ky: 40%; --ka: 0.96; --fcol: #7a5a96; --fa: 0.12; --sh: 0.55; --sh-ang: 270deg; --shx: 48%; --rl-a: 0; --rr-col: #ffbe6e; --rr-a: 0.9; --tint: #ff963c; --tint-a: 0.16; --vig: 0.42; --bars: 0; --p-ring: 0; --p-win: 0; --p-neon: 0; --p-sun: 1; }
.lt-neon { --room-a: #1d1030; --room-b: #050409; --kcol: #b496ff; --kx: 50%; --ky: 42%; --ka: 0.3; --fcol: #6a4cff; --fa: 0.1; --sh: 0.2; --sh-ang: 90deg; --shx: 55%; --rl-col: #ff3cc8; --rl-a: 1; --rr-col: #28dcff; --rr-a: 1; --tint: #783cff; --tint-a: 0.12; --vig: 0.5; --bars: 0; --p-ring: 0; --p-win: 0; --p-neon: 1; --p-sun: 0; }
.lt-cinema { --room-a: #2c3d42; --room-b: #0a1113; --kcol: #ffc48c; --kx: 30%; --ky: 30%; --ka: 0.78; --fcol: #3ca0aa; --fa: 0.35; --sh: 0.4; --sh-ang: 90deg; --shx: 55%; --rl-a: 0; --rr-col: #ffffff; --rr-a: 0.1; --tint: #146e78; --tint-a: 0.2; --vig: 0.56; --bars: 1; --p-ring: 0; --p-win: 0; --p-neon: 0; --p-sun: 0; }

.t-lights {
  transition: --room-a 0.9s var(--ease-out), --room-b 0.9s var(--ease-out), --kcol 0.9s var(--ease-out), --fcol 0.9s var(--ease-out),
    --rl-col 0.9s var(--ease-out), --rr-col 0.9s var(--ease-out), --tint 0.9s var(--ease-out), --kx 0.9s var(--ease-out), --ky 0.9s var(--ease-out),
    --shx 0.9s var(--ease-out), --sh-ang 0.9s var(--ease-out), --ka 0.9s var(--ease-out), --fa 0.9s var(--ease-out), --sh 0.9s var(--ease-out),
    --rl-a 0.9s var(--ease-out), --rr-a 0.9s var(--ease-out), --tint-a 0.9s var(--ease-out), --vig 0.9s var(--ease-out), --bars 0.9s var(--ease-out),
    --p-ring 0.9s var(--ease-out), --p-win 0.9s var(--ease-out), --p-neon 0.9s var(--ease-out), --p-sun 0.9s var(--ease-out);
}

.lp { position: absolute; left: 0; top: 0; width: 100%; height: 612px; overflow: hidden; isolation: isolate; container-type: size; background: #000; }
.lp.mini { position: relative; height: 100%; }
.lp > i, .lp-fig > i { position: absolute; display: block; }
.lp-room { inset: 0; background: radial-gradient(120% 80% at 50% 28%, var(--room-a), var(--room-b)); }
.lp-win { left: 5%; top: 14%; width: 21%; height: 40%; opacity: var(--p-win); background: linear-gradient(135deg, rgba(226, 242, 255, 0.92), rgba(176, 208, 240, 0.5)); border-radius: 0.8cqw; box-shadow: 0 0 14cqw 5cqw rgba(190, 224, 255, 0.3); transform: skewY(-3deg); }
.lp-win s { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 0.5cqw), rgba(20, 28, 38, 0.65) calc(50% - 0.5cqw) calc(50% + 0.5cqw), transparent calc(50% + 0.5cqw)), linear-gradient(0deg, transparent calc(50% - 0.5cqw), rgba(20, 28, 38, 0.65) calc(50% - 0.5cqw) calc(50% + 0.5cqw), transparent calc(50% + 0.5cqw)); }
.lp-ring { left: 50%; top: 9%; width: 68%; aspect-ratio: 1; margin-left: -34%; border-radius: 50%; opacity: var(--p-ring); border: 3.6cqw solid rgba(242, 247, 255, 0.92); box-shadow: 0 0 12cqw 2cqw rgba(214, 230, 255, 0.5), inset 0 0 9cqw rgba(214, 230, 255, 0.4); }
.lp-sun { right: -16%; top: 18%; width: 64%; aspect-ratio: 1; border-radius: 50%; opacity: var(--p-sun); background: radial-gradient(circle, #fff1c8, #ffa84a 38%, transparent 70%); }
.lp-neon { top: 8%; width: 1.4cqw; height: 62%; border-radius: 99px; opacity: var(--p-neon); }
.lp-neon.l { left: 9%; background: #ff3cc8; box-shadow: 0 0 5cqw 1.8cqw rgba(255, 60, 200, 0.7); }
.lp-neon.r { right: 9%; background: #28dcff; box-shadow: 0 0 5cqw 1.8cqw rgba(40, 220, 255, 0.7); }
.lp-fig { position: absolute; left: 50%; bottom: -1%; width: 96%; aspect-ratio: 200 / 240; transform: translateX(-50%); -webkit-mask: var(--sil-mask) center bottom / 100% 100% no-repeat; mask: var(--sil-mask) center bottom / 100% 100% no-repeat; }
.lp-fig i { inset: 0; }
.f-base { background: linear-gradient(180deg, #d3cbc3 0%, #918983 70%, #5d5753 100%); }
.f-hair { background: linear-gradient(180deg, #3a312c, #2a2420); -webkit-mask: var(--hair-mask) center bottom / 100% 100% no-repeat; mask: var(--hair-mask) center bottom / 100% 100% no-repeat; }
.f-neck { background: radial-gradient(24% 9% at 50% 57%, rgba(0, 0, 0, 0.5), transparent 70%); }
.f-fill { background: radial-gradient(75% 60% at calc(100% - var(--kx)) 50%, var(--fcol), transparent 70%); opacity: var(--fa); }
.f-key { background: radial-gradient(78% 62% at var(--kx) var(--ky), var(--kcol), transparent 72%); opacity: var(--ka); }
.f-shadow { background: linear-gradient(var(--sh-ang), transparent var(--shx), rgba(0, 0, 0, var(--sh)) 100%); }
.f-rim.l { background: linear-gradient(90deg, var(--rl-col), transparent 24%); opacity: var(--rl-a); }
.f-rim.r { background: linear-gradient(270deg, var(--rr-col), transparent 24%); opacity: var(--rr-a); }
.lp-tint { inset: 0; background: var(--tint); opacity: var(--tint-a); }
.lp-vig { inset: 0; background: radial-gradient(closest-side at 50% 44%, transparent 46%, rgba(0, 0, 0, var(--vig))); }
.lp-bars { left: 0; right: 0; height: calc(var(--bars) * 8%); background: #000; }
.lp-bars.t { top: 0; } .lp-bars.b { bottom: 0; }

.sheet { position: absolute; left: 12px; right: 12px; bottom: 30px; height: 270px; border-radius: 36px; padding: 10px 16px 16px; z-index: 9; }
.grab { display: block; width: 36px; height: 5px; margin: 0 auto 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.32); }
.sh-head { display: flex; justify-content: space-between; align-items: baseline; }
.sh-head b { font: 600 17px/1.2 var(--font); }
.sh-name { font: 600 15px/1.2 var(--font); color: var(--accent); }
.lt-tiles { margin: 12px -16px 0; padding: 0 16px; overflow: hidden; }
.lt-track { display: flex; gap: 10px; transform: translateX(var(--sx, 0px)); transition: transform 0.8s var(--spring); }
.lt-tile { flex: none; width: 72px; }
.lt-pic { position: relative; width: 72px; height: 96px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); transition: box-shadow 0.3s; }
.lt-tile.on .lt-pic { box-shadow: 0 0 0 2px var(--accent); }
.lt-tile span { display: block; margin-top: 6px; font: 500 12px/1.1 var(--font); color: var(--text-2); text-align: center; white-space: nowrap; }
.lt-tile.on span { color: #fff; }
.sh-amount { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; }
.sh-amount > span { color: var(--text-2); }
.sh-amount em { width: 38px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.sl { position: relative; flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); }
.sl i { position: absolute; left: 0; top: 0; bottom: 0; width: 80%; border-radius: inherit; background: var(--accent); }
.sl b { position: absolute; top: 50%; left: 80%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.dial { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.dial i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--accent); left: calc(var(--kx) * 0.62 + 19%); top: calc(var(--ky) * 0.62 + 19%); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }

/* 7. Photo editor ----------------------------------------------------------------------------- */

.pe-bg { position: absolute; inset: 0; background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--glow-a) 34%, #000), #000 70%); }
.pe-top { position: absolute; right: 18px; top: 62px; display: flex; align-items: center; gap: 10px; z-index: 8; }
.pe-save { height: 40px; padding: 0 20px; border-radius: 99px; background: #fff; color: #000; font: 600 15px/40px var(--font); }
.pe-canvas { position: absolute; left: 16px; right: 16px; top: 122px; height: 432px; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.pe-stack, .pe-layer { position: absolute; inset: 0; }
.pe-layer.before { filter: saturate(0.5) contrast(0.82) brightness(1.06); }
.pe-layer.after { filter: var(--look); clip-path: inset(0 0 0 var(--wipe)); }
.t-photo-editor:not(.is-held) { animation: wipe 10s var(--ease-in-out) infinite; }
@keyframes wipe { 0%, 8% { --wipe: 94%; } 40%, 56% { --wipe: 6%; } 92%, 100% { --wipe: 94%; } }
.pe-wipe { position: absolute; top: 0; bottom: 0; left: var(--wipe); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); z-index: 3; }
.pe-wipe i { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); color: #000; display: grid; place-items: center; font: 700 17px/1 var(--font); letter-spacing: 2px; }
.pe-tag { position: absolute; bottom: 12px; height: 26px; padding: 0 11px; border-radius: 99px; background: rgba(0, 0, 0, 0.5); color: #fff; font: 600 12px/26px var(--font); z-index: 3; }
.pe-tag.b { left: 12px; } .pe-tag.a { right: 12px; }
.ps { position: absolute; inset: 0; overflow: hidden; }
.ps-sky, .pm .ps-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1d2f5e 0%, #5a4a8a 30%, #d1708a 52%, #ff9c6a 68%, #ffd596 84%); }
.ps-sun, .pm .ps-sun { position: absolute; left: 58%; top: 40%; width: 19%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff8e0, #ffd27a 56%, rgba(255, 200, 120, 0)); box-shadow: 0 0 60px 24px rgba(255, 190, 110, 0.55); }
.ps-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 46%; }
.ps-fig { left: 9%; width: 60%; bottom: -2%; --sil-skin: #2a1d22; --sil-hair: #150f12; --sil-body: #1c1520; filter: drop-shadow(0 0 7px rgba(255, 160, 90, 0.55)); }
.pm { position: absolute; inset: 0; overflow: hidden; }
.pm .ps-sun { box-shadow: 0 0 14px 6px rgba(255, 190, 110, 0.5); }
.pe-text { position: absolute; left: 22px; top: 26px; font: italic 800 36px/0.95 var(--font); color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); transform: rotate(-4deg); z-index: 2; }
.pe-text b { display: block; }
.pe-text b:last-child { color: var(--mark); }
.pe-sticker { position: absolute; right: 26px; top: 30px; width: 46px; height: 46px; font-size: 46px; color: var(--mark); transform: rotate(14deg); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); z-index: 2; }
.pe-sticker .ic { fill: currentColor; stroke: #fff; stroke-width: 1.2; }
.pe-face { position: absolute; left: 26%; top: 44%; width: 27%; height: 28%; opacity: 0; transition: opacity 0.4s; z-index: 2; }
.pe-face i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--accent); }
.pe-face i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
.pe-face i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: 6px; }
.pe-face i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 6px; }
.pe-face i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }
[data-tool="retouch"] .pe-face { opacity: 1; }

.fx { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; pointer-events: none; overflow: hidden; }
[data-tool="animate"][data-fx="bokeh"] .fx-bokeh, [data-tool="animate"][data-fx="fireflies"] .fx-fireflies, [data-tool="animate"][data-fx="snow"] .fx-snow,
[data-tool="animate"][data-fx="aurora"] .fx-aurora, [data-tool="animate"][data-fx="sweep"] .fx-sweep { opacity: 1; }
[data-tool="animate"][data-fx="kenburns"] .pe-layer { animation: kb 7s var(--ease-in-out) infinite alternate; }
@keyframes kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2.5%, 1.5%); } }
.fx-bokeh i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 170, 0.6), rgba(255, 200, 120, 0.14) 70%, transparent); animation: bk var(--d) var(--ease-in-out) infinite alternate; }
@keyframes bk { to { transform: translate(18px, -28px) scale(1.25); opacity: 0.55; } }
.fx-fireflies i { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #ffe9a0; box-shadow: 0 0 10px 3px rgba(255, 230, 140, 0.8); animation: ff var(--d) var(--ease-in-out) infinite; }
@keyframes ff { 0%, 100% { opacity: 0.1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(10px, -14px); } }
.fx-snow i { position: absolute; left: var(--x); top: -8px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: 0.88; animation: snow var(--d) linear infinite; animation-delay: var(--w); }
@keyframes snow { to { transform: translate(26px, 450px); } }
.fx-aurora i { position: absolute; left: -20%; width: 140%; height: 36%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 255, 200, 0.55), transparent); animation: au 8s var(--ease-in-out) infinite alternate; }
.fx-aurora i:nth-child(1) { top: 4%; }
.fx-aurora i:nth-child(2) { top: 20%; background: radial-gradient(closest-side, rgba(170, 120, 255, 0.5), transparent); animation-delay: -4s; }
@keyframes au { from { transform: translateX(-8%) scaleY(0.8); } to { transform: translateX(8%) scaleY(1.15); } }
.fx-sweep { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) 130% 0 / 250% 100% no-repeat; animation: sw 3.2s var(--ease-in-out) infinite; }
@keyframes sw { to { background-position: -30% 0; } }

.pe-panel { position: absolute; left: 12px; right: 12px; top: 568px; height: 210px; border-radius: 30px; overflow: hidden; z-index: 7; }
.pp { position: absolute; inset: 14px 0 0; padding: 0 16px; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-out); }
[data-tool="filters"] .pp-filters, [data-tool="retouch"] .pp-retouch, [data-tool="animate"] .pp-animate,
:is([data-tool="text"], [data-tool="stickers"], [data-tool="frames"], [data-tool="collage"], [data-tool="adjust"], [data-tool="auto"]) .pp-other { opacity: 1; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; }
.pp-head b { font: 600 16px/1.2 var(--font); }
.pp-head small { font-size: 13px; color: var(--text-3); }
.lk-row { margin: 10px -16px 0; padding: 0 16px; overflow: hidden; }
.lk-track { display: flex; gap: 10px; transform: translateX(var(--sx, 0px)); transition: transform 0.8s var(--spring); }
.lk, .ef { flex: none; width: 72px; }
.lk-pic, .ef-pic { position: relative; width: 72px; height: 92px; border-radius: 14px; overflow: hidden; transition: box-shadow 0.3s; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.lk.on .lk-pic, .ef.on .ef-pic { box-shadow: 0 0 0 2px var(--accent); }
.lk span, .ef span { display: block; margin-top: 5px; font: 500 11px/1.1 var(--font); color: var(--text-2); text-align: center; white-space: nowrap; }
.lk.on span, .ef.on span { color: #fff; }
.ef-dot { position: absolute; inset: 0; }
.ef-dot.bokeh { background: radial-gradient(circle at 28% 62%, rgba(255, 232, 175, 0.75) 0 9px, transparent 10px), radial-gradient(circle at 72% 34%, rgba(255, 232, 175, 0.6) 0 6px, transparent 7px), radial-gradient(circle at 56% 76%, rgba(255, 232, 175, 0.5) 0 5px, transparent 6px); }
.ef-dot.snow { background: radial-gradient(circle, #fff 0 1.6px, transparent 2.2px) 0 0 / 15px 15px; }
.ef-dot.fireflies { background: radial-gradient(circle at 30% 42%, #ffe9a0 0 2px, transparent 4px), radial-gradient(circle at 66% 66%, #ffe9a0 0 2px, transparent 4px), radial-gradient(circle at 52% 24%, #ffe9a0 0 1.6px, transparent 3px); }
.ef-dot.aurora { background: linear-gradient(180deg, rgba(120, 255, 200, 0.55), rgba(170, 120, 255, 0.4) 55%, transparent); }
.ef-dot.sweep { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.65) 50%, transparent 62%); }
.ef-dot.kenburns { box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.6); }
.pp-slider { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; }
.pp-slider span { width: 92px; color: var(--text-2); }
.pp-slider em { width: 30px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.rc-row { display: flex; gap: 8px; margin-top: 12px; overflow: hidden; }
.rc { flex: none; height: 36px; padding: 0 16px; border-radius: 99px; background: var(--fill); font: 600 14px/36px var(--font); color: #fff; }
.rc.on { background: var(--accent); color: #000; }
.pp-play { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pp-play > i { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 17px; flex: none; }
.pp-play em { width: 34px; text-align: right; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.scrub { position: relative; flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.scrub > i { position: absolute; inset: 0; transform-origin: left; background: var(--accent); animation: scrub 6s linear infinite; }
@keyframes scrub { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pe-tools { position: absolute; left: 12px; right: 12px; bottom: 30px; height: 68px; padding: 6px; border-radius: 99px; overflow: hidden; z-index: 7; }
.pt-track { display: flex; gap: 2px; transform: translateX(var(--tx, 0px)); transition: transform 0.8s var(--spring); }
.pt { flex: none; width: 64px; height: 56px; border-radius: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2); font-size: 19px; transition: background 0.3s, color 0.3s; }
.pt span { font: 600 10.5px/1 var(--font); }
.pt.on { background: var(--fill); color: var(--accent); }

/* 8. Video editor ----------------------------------------------------------------------------- */

.ed-video { position: absolute; left: 50%; top: 118px; width: 216px; height: 384px; margin-left: -108px; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.ed-fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.5)); }
.ed-cap { position: absolute; left: 12px; right: 12px; bottom: 44px; text-align: center; font: 800 22px/1.14 var(--font); letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); animation: read 10s linear infinite; }
.ed-cap .w { color: color-mix(in srgb, var(--mark) calc(clamp(0, (var(--t) - var(--on)) * 60, 1) * 100%), #fff); }
.ed-play { position: absolute; left: 0; right: 0; top: 512px; display: flex; align-items: center; justify-content: center; gap: 16px; font: 500 13px/1 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ed-pb { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 17px; }
.ed-time { position: absolute; left: 16px; right: 16px; top: 560px; height: 152px; }
.ed-ruler { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ed-tracks { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tr { position: relative; height: 36px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); display: flex; gap: 3px; overflow: hidden; }
.tr-a { height: 42px; }
.clip { position: relative; display: block; border-radius: 8px; flex: 1; background: linear-gradient(110deg, var(--f-room1), var(--f-room2)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.clip.c1 { flex: 1.3; } .clip.c2 { flex: 1.1; background: linear-gradient(180deg, var(--f-sky1), var(--f-sky2)); } .clip.c3 { flex: 0.9; background: linear-gradient(110deg, var(--f-room2), var(--f-room1)); }
.flag { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 7px; background: rgba(0, 0, 0, 0.5); color: #fff; display: grid; place-items: center; font-size: 12px; }
.wave { flex: 1; display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.wave i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--accent); opacity: 0.85; }
.mute { position: absolute; left: 46%; width: 22%; top: 0; bottom: 0; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0 6px, rgba(0, 0, 0, 0.42) 6px 12px); display: grid; place-items: center; color: #fff; font-size: 16px; }
.mute s { position: relative; display: block; width: 1em; height: 1em; }
.mute s::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 2px; background: #fff; transform: rotate(-42deg); border-radius: 2px; }
.tr-c { background: transparent; gap: 4px; }
.cw { display: block; border-radius: 8px; background: color-mix(in srgb, var(--accent) 24%, #1c1c20); color: #fff; font: 600 11.5px/36px var(--font); text-align: center; white-space: nowrap; overflow: hidden; }
.ed-head { position: absolute; top: 20px; bottom: -6px; left: 0; width: 2px; background: #fff; border-radius: 2px; animation: head 10s linear infinite; z-index: 2; }
.ed-head i { position: absolute; left: 50%; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; }
@keyframes head { from { transform: translateX(6px); } to { transform: translateX(334px); } }
.ed-style { position: absolute; left: 12px; right: 12px; top: 716px; height: 50px; border-radius: 25px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 18px; z-index: 6; }
.ed-style b { font: 600 14px/1 var(--font); margin-right: 4px; }
.ed-style .chip { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--fill); font: 600 12px/30px var(--font); color: #fff; white-space: nowrap; }
.ed-style .chip.on { background: var(--accent); color: #000; }
.sw { margin-left: auto; display: flex; gap: 6px; }
.sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .t-photo-editor:not(.is-held) { animation: none; --wipe: 50%; }
  .ed-cap { animation: none; --t: 0.4; }
  .ed-head, .scrub > i, .fx *, .fx { animation: none !important; }
  .scrub > i { transform: scaleX(0.5); }
  .ed-head { transform: translateX(150px); }
  [data-tool="animate"][data-fx="kenburns"] .pe-layer { animation: none; }
}