/* PhotoEditR — animated homepage intro (v2.2.7.523) — with a scripted cursor,
   camera moves, click ripples, sparkles and a gentle hover tilt.
   A scripted, looping "live editor" that builds the welcome-sample design in
   eight steps. CSS transitions only (no rAF loop, no infinite animations):
   the page is idle between steps, and fully idle when the stage is
   off-screen, the tab is hidden, the visitor pauses, or prefers reduced motion.
   State: .ih.sN classes are CUMULATIVE (s3 = steps 1-3 done); data-s is the
   exact current step; data-sub carries the beats inside a step. */
@font-face { font-family: "PE Anton"; src: url("/try-app/fonts/anton-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PE Satisfy"; src: url("/try-app/fonts/satisfy-400.woff2") format("woff2"); font-display: swap; }

.ih { --ih-acc: #2563eb; --ih-acc2: #38bdf8; --ih-ink: #e8eef8; --ih-mute: #9aa8bc; --ih-panel: #10151d; --ih-line: #222b37;
  position: relative; width: 100%; font-family: Inter, system-ui, sans-serif; color: var(--ih-ink); }
.ih * { box-sizing: border-box; }
.ih::before { content: ""; position: absolute; inset: 6% -4% -6% -4%; z-index: 0; border-radius: 40px;
  background: radial-gradient(60% 60% at 70% 30%, rgba(37,99,235,.35), transparent 70%), radial-gradient(50% 50% at 20% 80%, rgba(56,189,248,.22), transparent 70%);
  filter: blur(28px); pointer-events: none; }

/* ---- window chrome ---- */
/* fixed 4:3 window: the same height on every step (the layer list can never stretch it) */
.ih-win { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #0b0f15;
  display: flex; flex-direction: column; aspect-ratio: 4 / 3;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.06); }
.ih-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: #121821; border-bottom: 1px solid var(--ih-line); }
.ih-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ef5454; }
.ih-bar i:nth-child(2) { background: #f0bd62; } .ih-bar i:nth-child(3) { background: #34c778; }
.ih-bar b { margin-left: 8px; font-size: 12px; font-weight: 700; color: #93b4f8; }
.ih-bar span { font-size: 11.5px; color: var(--ih-mute); margin-left: 6px; }
.ih-bar em { margin-left: auto; font-style: normal; font-size: 11px; color: #6ee7b7; display: inline-flex; align-items: center; gap: 6px; }
.ih-bar em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.ih-body { flex: 1 1 0; display: grid; grid-template-columns: 38px minmax(0,1fr) 27%; grid-template-rows: minmax(0,1fr); min-height: 0; }
.ih-rail { background: #0e131a; border-right: 1px solid var(--ih-line); padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ih-rail span { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #8d9bb0; transition: background .2s, color .2s, box-shadow .2s; }
.ih-rail span svg { width: 14px; height: 14px; }
.ih-rail span.on { background: var(--ih-acc); color: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
.ih-stage { position: relative; padding: 14px; background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0 / 14px 14px, #0a0d12; display: grid; place-items: center; min-height: 0; }
.ih-doc { position: relative; width: 100%; aspect-ratio: 1536 / 993; container-type: inline-size; overflow: hidden; border-radius: 4px;
  background: repeating-conic-gradient(#cfd5dd 0 25%, #8f99a6 0 50%) 0 0 / 3.2cqw 3.2cqw; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.ih-cam { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .767s cubic-bezier(.22,.8,.2,1); }
.ih-cam > * { position: absolute; }
.ih-l { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- 1 open / 2 cut out ---- */
.ih-photo { opacity: 0; transform: scale(1.08); transition: opacity .6s ease, transform .933s cubic-bezier(.2,.8,.2,1); }
.ih[data-s="1"][data-sub="2"] .ih-photo { opacity: 1; transform: none; }
.ih.s2 .ih-photo { opacity: 0; transition-delay: 1.4s; transition-duration: .467s; }
.ih-cut { opacity: 0; transition: opacity .4s ease; }
.ih.s2 .ih-cut { opacity: 1; }
.ih-newbg { opacity: 0; filter: hue-rotate(180deg) saturate(1.4); transition: opacity .533s ease, filter 1.6s ease; }
.ih.s2 .ih-newbg { opacity: 1; transition-delay: 2s, 0s; }
.ih.s7 .ih-newbg { filter: hue-rotate(230deg) saturate(1.7) brightness(1.08); transition: opacity .533s ease, filter 1.133s ease-in-out; transition-delay: 0s, .48s; }
.ih-vig { inset: 0; background: radial-gradient(120% 90% at 40% 40%, transparent 50%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .533s ease; pointer-events: none; }
.ih.s2 .ih-vig { opacity: 1; transition-delay: 2.067s; }
.ih-box { left: 7%; top: 2%; width: 50%; height: 97%; border: .28cqw dashed #fff; outline: .28cqw dashed var(--ih-acc); outline-offset: -.28cqw;
  opacity: 0; clip-path: inset(0 100% 100% 0); transition: clip-path .533s linear, opacity .2s; }
.ih[data-s="2"] .ih-box { opacity: 1; clip-path: inset(0 0 0 0); transition-delay: .233s; }
.ih-scan { top: 0; bottom: 0; width: 18%; left: -20%; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.55) 50%, rgba(167,139,250,.35) 70%, transparent); mix-blend-mode: screen; }
.ih[data-s="2"] .ih-scan { animation: ihScan .867s ease-in-out .833s 1 both; }
@keyframes ihScan { 0% { left: 2%; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { left: 58%; opacity: 0 } }

/* ---- 3 type & effects ---- */
.ih-create { left: 67.8%; top: 13.4%; font: 6.5cqw/1 "PE Satisfy", cursive; color: #eceae9; text-shadow: 0 .3cqw .6cqw rgba(0,0,0,.5);
  clip-path: inset(-30% 100% -45% -12%); transition: clip-path .733s ease; }
.ih-bold, .ih-bold-fx { left: 60.4%; top: 23.6%; font: 16.9cqw/1 "PE Anton", Impact, sans-serif; letter-spacing: -.5cqw; }
/* BOLD starts as plain cream type; each effect switches on only when its row in
   the fx card is clicked (step 3): gradient fill, stroke, outer glow, extrude, drop shadow */
.ih-bold { color: #f3f1f0; -webkit-text-stroke: .3cqw rgba(255,244,230,0);
  background: linear-gradient(135deg, #ffb347 0%, #f25a07 22%, #ff3333 36%, #f91f40 50%, #ffd166 70%, #ff4fa3 86%, #8b5cf6 100%) 0% 0% / 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  opacity: 0; transform: translateY(2cqw) scale(.9); filter: drop-shadow(0 0 0 rgba(255,120,40,0));
  transition: opacity .333s ease, transform .467s cubic-bezier(.2,1.4,.3,1), filter .533s ease, background-position 1.2s ease, color .45s ease, -webkit-text-stroke-color .3s ease; }
.ih-bold-fx { color: #3a120a; opacity: 0; filter: drop-shadow(0 1.2cqw 1cqw rgba(0,0,0,0)); transition: opacity .4s ease, transform .533s ease, filter .4s ease; }
.ih-designs { left: 66.4%; top: 55.4%; font: 400 5.2cqw/1 Inter, system-ui, sans-serif; color: #f3f1f0; text-shadow: 0 .25cqw .5cqw rgba(0,0,0,.6);
  clip-path: inset(-25% 100% -45% 0); transition: clip-path .5s steps(7, end); }
.ih.s3 .ih-create { clip-path: inset(-30% -12% -45% -12%); transition-delay: .3s; }
/* delays = the cursor's clicks in step 3 (JS beats ÷ SPEED): place 1000 ms, gradient 2200, stroke 2550, glow 2900, extrude 3250, shadow 3600 */
.ih.s3 .ih-bold { opacity: 1; transform: none; color: transparent; -webkit-text-stroke-color: rgba(255,244,230,.9); filter: drop-shadow(0 0 2.4cqw rgba(255,120,40,.55));
  transition-delay: .667s, .667s, 1.933s, 0s, 1.467s, 1.7s; }
.ih.s3 .ih-bold-fx { opacity: 1; transform: translate(.7cqw,.8cqw); filter: drop-shadow(0 1.2cqw 1cqw rgba(0,0,0,.55)); transition-delay: 2.167s, 2.167s, 2.4s; }
.ih.s3 .ih-designs { clip-path: inset(-25% -6% -45% 0); transition-delay: 1s; }
.ih.s4 .ih-create, .ih.s4 .ih-bold, .ih.s4 .ih-bold-fx, .ih.s4 .ih-designs { transition-delay: 0s; }

/* ---- 4 gradient: on-canvas handles, a colour stop slides ---- */
.ih-grad { left: 61.1%; top: 30.6%; width: 30%; height: 0; transform-origin: 0 50%; transform: rotate(16deg); opacity: 0; transition: opacity .267s ease; pointer-events: none; }
.ih-grad::before { content: ""; position: absolute; left: 0; right: 0; top: -.15cqw; height: .3cqw; background: #fff; box-shadow: 0 0 0 .12cqw rgba(0,0,0,.55); }
.ih-grad i { position: absolute; top: 0; width: 1.6cqw; height: 1.6cqw; margin: -.8cqw 0 0 -.8cqw; border-radius: 50%; border: .3cqw solid #fff; box-shadow: 0 0 0 .12cqw rgba(0,0,0,.5), 0 .3cqw .8cqw rgba(0,0,0,.5);
  transition: left 1.2s cubic-bezier(.5,0,.2,1), transform .2s; }
.ih-grad i.end { width: 1.5cqw; height: 1.5cqw; border-radius: .2cqw; transform: rotate(45deg); background: #fff; }
.ih-grad i.a { left: 0; } .ih-grad i.z { left: 100%; }
.ih-grad i.s1 { left: 34%; background: #ff3333; } .ih-grad i.s2 { left: 62%; background: #ffd166; }
.ih[data-s="4"] .ih-grad { opacity: 1; transition-delay: .2s; }
.ih[data-s="4"][data-sub="2"] .ih-grad i.s2 { left: 30%; transform: scale(1.35); }
.ih[data-s="4"][data-sub="2"] .ih-grad i.s1 { left: 16%; }
.ih[data-s="4"][data-sub="2"] .ih-bold, .ih.s5 .ih-bold { background-position: 72% 72%; filter: drop-shadow(0 0 2.4cqw rgba(255,90,170,.5)); }

/* ---- 5 circular text ---- */
.ih-ring { left: 2.5%; top: 4%; width: 17%; aspect-ratio: 1; opacity: 0; transform: rotate(-200deg) scale(.4); transition: opacity .333s ease, transform 1.2s cubic-bezier(.2,.9,.2,1); }
.ih-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ih.s5 .ih-ring { opacity: 1; transform: none; transition-delay: .5s; }
.ih.s6 .ih-ring { transition-delay: 0s; }

/* ---- 6 buttons: one layer, three styles ---- */
.ih-btn-l { left: 66.5%; top: 81.5%; display: inline-flex; align-items: center; gap: .9cqw; padding: 1.05cqw 1.8cqw 1.05cqw 1.1cqw; border-radius: 99cqw;
  font: 800 2.15cqw/1 Inter, system-ui, sans-serif; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg,#3b82f6,#1d4ed8); box-shadow: 0 .6cqw 1.4cqw rgba(29,78,216,.55), inset 0 .15cqw 0 rgba(255,255,255,.35);
  opacity: 0; transform: translateY(2cqw) scale(.85); transition: opacity .267s ease, transform .4s cubic-bezier(.2,1.5,.3,1), background .333s, box-shadow .333s, color .333s, border-color .333s; border: .15cqw solid transparent; }
.ih-btn-l b { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); font-size: 1.5cqw; transition: background .333s; }
.ih.s6 .ih-btn-l { opacity: 1; transform: none; transition-delay: .2s, .2s, 0s, 0s, 0s, 0s; }
.ih.s7 .ih-btn-l { transition-delay: 0s; }
.ih[data-s="6"][data-sub="2"] .ih-btn-l { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); color: #fff;
  box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.35), inset 0 .2cqw .6cqw rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.ih[data-s="6"][data-sub="3"] .ih-btn-l, .ih.s7 .ih-btn-l { background: linear-gradient(135deg,#ff9b3d,#f25a07 45%,#f91f40); box-shadow: 0 .6cqw 1.6cqw rgba(249,31,64,.5), inset 0 .15cqw 0 rgba(255,255,255,.4); }
.ih[data-s="6"][data-sub="3"] .ih-btn-l b, .ih.s7 .ih-btn-l b { background: #fff; color: #f25a07; }

/* ---- 8 export: the sample's own torn-stamp button ---- */
.ih-tag { left: 66.5%; top: 65.6%; width: 19.3%; height: auto; opacity: 0; transform: translateY(-3cqw) rotate(-6deg); transition: opacity .267s ease, transform .4s cubic-bezier(.2,1.5,.3,1); }
.ih.s8 .ih-tag { opacity: 1; transform: none; transition-delay: .133s; }

/* ---- floating cards over the canvas ---- */
.ih-card { position: absolute; z-index: 3; background: rgba(16,21,30,.9); border: 1px solid rgba(120,150,210,.28); border-radius: 12px;
  backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0,0,0,.45); padding: 9px 11px; font-size: 11px; color: var(--ih-ink);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.ih-card .h { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #93b4f8; text-transform: uppercase; margin-bottom: 6px; }
.ih-card.bl { left: 4%; bottom: 7%; width: 44%; max-width: 220px; }
.ih-file { left: 8%; top: 8%; display: flex; align-items: center; gap: 9px; }
.ih-file .ico { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,#2563eb,#38bdf8); display: grid; place-items: center; font-weight: 800; font-size: 9px; color: #fff; }
.ih-file b { display: block; font-size: 11.5px; } .ih-file small { color: var(--ih-mute); font-size: 10px; }
.ih[data-s="1"][data-sub="2"] .ih-file { opacity: 1; transform: none; transition-delay: .233s; }

/* effects list */
.ih-fx .it { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: #7f8ca0; transition: color .2s; }
.ih-fx .it::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid currentColor; flex: 0 0 auto; transition: background .2s, box-shadow .2s; }
.ih[data-s="3"] .ih-fx { opacity: 1; transform: none; transition-delay: .2s; }
.ih[data-s="3"] .ih-fx .it { color: #e8eef8; transition-delay: 1.467s; }
.ih[data-s="3"] .ih-fx .it::before { transition-delay: 1.467s; background: #5b8ef0; border-color: #5b8ef0; box-shadow: 0 0 0 3px rgba(91,142,240,.22); }
.ih[data-s="3"] .ih-fx .it:nth-child(3), .ih[data-s="3"] .ih-fx .it:nth-child(3)::before { transition-delay: 1.7s; }
.ih[data-s="3"] .ih-fx .it:nth-child(4), .ih[data-s="3"] .ih-fx .it:nth-child(4)::before { transition-delay: 1.933s; }
.ih[data-s="3"] .ih-fx .it:nth-child(5), .ih[data-s="3"] .ih-fx .it:nth-child(5)::before { transition-delay: 2.167s; }
.ih[data-s="3"] .ih-fx .it:nth-child(6), .ih[data-s="3"] .ih-fx .it:nth-child(6)::before { transition-delay: 2.4s; }

/* gradient editor */
.ih-ramp { position: relative; height: 14px; border-radius: 7px; margin: 4px 0 14px;
  background: linear-gradient(90deg, #ffb347 0%, #f25a07 22%, #ff3333 36%, #f91f40 50%, #ffd166 70%, #ff4fa3 86%, #8b5cf6 100%); }
.ih-ramp i { position: absolute; top: 100%; width: 12px; height: 12px; margin-left: -6px; margin-top: 3px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.6); transition: left 1.2s cubic-bezier(.5,0,.2,1); }
.ih-ramp i:nth-child(1) { left: 0; background: #ffb347; } .ih-ramp i:nth-child(2) { left: 36%; background: #ff3333; }
.ih-ramp i:nth-child(3) { left: 70%; background: #ffd166; } .ih-ramp i:nth-child(4) { left: 100%; background: #8b5cf6; }
.ih[data-s="4"][data-sub="2"] .ih-ramp i:nth-child(3) { left: 40%; } .ih[data-s="4"][data-sub="2"] .ih-ramp i:nth-child(2) { left: 18%; }
.ih-grow { display: flex; gap: 6px; flex-wrap: wrap; color: #c6d2e3; font-size: 10.5px; }
.ih-grow span { padding: 2px 7px; border-radius: 6px; border: 1px solid #2c3746; }
.ih-grow span.on { border-color: #5b8ef0; background: rgba(37,99,235,.22); color: #fff; }
.ih[data-s="4"] .ih-gcard { opacity: 1; transform: none; transition-delay: .267s; }

/* text warp */
.ih-warp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ih-warp span { display: grid; place-items: center; gap: 2px; padding: 5px 2px 4px; border-radius: 7px; border: 1px solid #2c3746; font-size: 9.5px; color: #c6d2e3; transition: background .2s, border-color .2s, color .2s; }
.ih-warp svg { width: 26px; height: 12px; }
.ih[data-s="5"] .ih-warp span.circ { border-color: #5b8ef0; background: rgba(37,99,235,.28); color: #fff; transition-delay: .467s; }
.ih[data-s="5"] .ih-wcard { opacity: 1; transform: none; transition-delay: .133s; }

/* button styles */
.ih-bstyles { display: flex; gap: 6px; margin-bottom: 7px; }
.ih-bstyles span { flex: 1; height: 20px; border-radius: 10px; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; }
.ih-bstyles span:nth-child(1) { background: linear-gradient(180deg,#3b82f6,#1d4ed8); }
.ih-bstyles span:nth-child(2) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.ih-bstyles span:nth-child(3) { background: linear-gradient(135deg,#ff9b3d,#f91f40); }
.ih-bstyles span:nth-child(4) { background: linear-gradient(135deg,#10b981,#0ea5e9); }
.ih[data-s="6"][data-sub="1"] .ih-bstyles span:nth-child(1),
.ih[data-s="6"][data-sub="2"] .ih-bstyles span:nth-child(2),
.ih[data-s="6"][data-sub="3"] .ih-bstyles span:nth-child(3) { box-shadow: 0 0 0 2px #0b0f15, 0 0 0 4px #5b8ef0; }
.ih-brow { display: flex; justify-content: space-between; color: var(--ih-mute); font-size: 10px; }
.ih-brow b { color: #fff; font-weight: 700; }
.ih[data-s="6"] .ih-bcard { opacity: 1; transform: none; transition-delay: .133s; }

/* adjust */
.ih-adj .r { display: grid; grid-template-columns: 58px 1fr 30px; align-items: center; gap: 8px; padding: 3px 0; color: #c6d2e3; }
.ih-adj .t { position: relative; height: 4px; border-radius: 2px; background: #2a3442; }
.ih-adj .t i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--a); border-radius: 2px; background: linear-gradient(90deg,#2563eb,#38bdf8); transition: width 1.333s ease .267s; }
.ih-adj .t i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ih-adj .hue { background: linear-gradient(90deg,#f43f5e,#f59e0b,#84cc16,#22d3ee,#6366f1,#d946ef,#f43f5e); }
.ih-adj .hue i { background: transparent; }
.ih-adj .r:nth-child(3) .t i { width: 70%; transition: none; } .ih-adj .r:nth-child(4) .t i { width: 54%; transition: none; }
.ih[data-s="7"] .ih-adj { opacity: 1; transform: none; transition-delay: .133s; }
/* only the Hue slider moves — under the cursor, in step with its drag (JS beats 720 ms → +1700 ms, ÷ SPEED);
   the backdrop's hue shifts over exactly the same time */
.ih[data-s="7"] .ih-adj .r:nth-child(2) .t i { width: 74%; transition: width 1.133s ease-in-out .48s; }
.ih-blend { right: 4%; bottom: 8%; display: flex; align-items: center; gap: 8px; }
.ih-blend b { padding: 3px 9px; border-radius: 999px; background: var(--ih-acc); color: #fff; font-size: 10.5px; }
.ih[data-s="7"] .ih-blend { opacity: 1; transform: none; transition-delay: .667s; }

/* export */
.ih-export .fmts { display: flex; flex-wrap: wrap; gap: 5px; }
.ih-export .fmts span { padding: 4px 8px; border-radius: 7px; font-weight: 800; font-size: 10px; color: #fff; background: #1d2633; border: 1px solid #2c3746;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.ih-export .fmts span:nth-child(1) { background: #2563eb; border-color: #2563eb; }
.ih[data-s="8"] .ih-export { opacity: 1; transform: none; transition-delay: .4s; }
.ih[data-s="8"] .ih-export .fmts span { opacity: 1; transform: none; }
.ih[data-s="8"] .ih-export .fmts span:nth-child(1) { transition-delay: .6s } .ih[data-s="8"] .ih-export .fmts span:nth-child(2) { transition-delay: .7s }
.ih[data-s="8"] .ih-export .fmts span:nth-child(3) { transition-delay: .8s } .ih[data-s="8"] .ih-export .fmts span:nth-child(4) { transition-delay: .9s }
.ih[data-s="8"] .ih-export .fmts span:nth-child(5) { transition-delay: 1s } .ih[data-s="8"] .ih-export .fmts span:nth-child(6) { transition-delay: 1.1s }
.ih-toast { right: 4%; top: 3%; transform: translateY(-8px); white-space: nowrap; display: flex; align-items: center; gap: 8px; border-color: rgba(52,211,153,.45); }
.ih-toast::before { content: "\2713"; width: 18px; height: 18px; border-radius: 50%; background: #10b981; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.ih[data-s="8"] .ih-toast { opacity: 1; transform: none; transition-delay: 1.467s; }

/* ---- scripted cursor ---- */
.ih-cur { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; transform: translate(-60px, -60px);
  transition: transform .467s cubic-bezier(.45,.05,.25,1), opacity .2s; opacity: 0; }
.ih.playing .ih-cur { opacity: 1; }
.ih-cur svg { display: block; width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transform-origin: 2px 2px; transition: transform .12s ease; }
.ih-cur.down svg { transform: scale(.82); }
.ih-cur em { position: absolute; left: 16px; top: 18px; padding: 3px 8px; border-radius: 7px 7px 7px 2px; background: #2563eb; color: #fff;
  font: 700 10.5px/1.2 Inter, system-ui, sans-serif; font-style: normal; white-space: nowrap; box-shadow: 0 4px 12px rgba(37,99,235,.45); }
.ih-cur.flip em { top: -24px; border-radius: 7px 7px 7px 7px; }
.ih-cur .file { position: absolute; left: 14px; top: -4px; width: 30px; height: 36px; border-radius: 5px; background: linear-gradient(160deg,#ff9b5a,#7c2d12); border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.45); opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .133s, transform .167s; }
.ih-cur.carry .file { opacity: 1; transform: rotate(-8deg); }
.ih-rip { position: absolute; z-index: 29; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #93c5fd; background: rgba(147,197,253,.18);
  pointer-events: none; animation: ihRip .367s ease-out forwards; }
@keyframes ihRip { from { transform: scale(.2); opacity: 1 } to { transform: scale(1.5); opacity: 0 } }
.ih-sp { position: absolute; z-index: 28; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; background: var(--c); pointer-events: none;
  animation: ihSp .567s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes ihSp { from { transform: translate(0,0) rotate(0) scale(1); opacity: 1 } to { transform: translate(var(--dx), var(--dy)) rotate(220deg) scale(.3); opacity: 0 } }

/* ---- right panel: layers ---- */
.ih-panel { background: var(--ih-panel); border-left: 1px solid var(--ih-line); padding: 10px 9px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.ih-panel .h { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--ih-mute); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.ih-panel .h::before { content: ""; width: 3px; height: 11px; background: var(--ih-acc); border-radius: 2px; }
.ih-rows { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }
.ih-row { display: flex; align-items: center; gap: 7px; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #dfe7f3; white-space: nowrap; overflow: hidden;
  max-height: 0; opacity: 0; flex: 0 0 auto; transition: max-height .267s ease, opacity .267s ease, padding .267s ease, background .2s; }
.ih-row i { width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.12); }
.ih-row small { margin-left: auto; padding: 1px 6px; border-radius: 999px; font-size: 9px; color: #93b4f8; border: 1px solid rgba(91,142,240,.45); }
.ih-row.act { background: rgba(37,99,235,.2); box-shadow: inset 2px 0 0 #5b8ef0; }
.ih-row.show { max-height: 32px; opacity: 1; padding-top: 4px; padding-bottom: 4px; }
.ih-panel .foot { margin-top: auto; font-size: 10px; color: var(--ih-mute); line-height: 1.4; padding-top: 6px; border-top: 1px solid var(--ih-line); }

/* ---- Pause: small icon button in the window's top-right (WCAG 2.2.2 pause control) ---- */
.ih-bar em { margin-right: 30px; }
.ih-mini { position: absolute; top: 4px; right: 10px; z-index: 6; display: flex; gap: 4px; }
.ih-mini button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: 7px; cursor: pointer;
  border: 1px solid #2a3442; background: #161d27; color: #c6d2e3; transition: background .15s, color .15s, border-color .15s; }
.ih-mini button:hover { background: #1f2834; color: #fff; }
.ih-mini button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.ih-mini svg { width: 13px; height: 13px; }
.ih-mini .i-play { display: none; }
.ih-mini [data-ih-play][aria-pressed="true"] .i-play { display: block; }
.ih-mini [data-ih-play][aria-pressed="true"] .i-pause { display: none; }
.ih-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ih-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .ih-body { grid-template-columns: 30px minmax(0,1fr) 26%; }
  .ih-panel { padding: 8px 6px; }
  .ih-row { font-size: 10px; gap: 5px; padding: 0 4px; }
  .ih-row i { width: 16px; height: 16px; }
  .ih-row small { font-size: 8px; padding: 1px 4px; }
  .ih-panel .foot { font-size: 9px; }
  .ih-card { font-size: 10px; padding: 7px 9px; }
  .ih-card.bl { max-width: 180px; }
}
@media (max-width: 520px) {
  .ih-bar span { display: none; }
  .ih-body { grid-template-columns: 30px minmax(0,1fr); }
  .ih-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ih *, .ih *::before, .ih *::after { transition: none !important; animation: none !important; }
  .ih-cur, .ih-rip, .ih-sp { display: none !important; }
  .ih-cam, .ih-win { transform: none !important; }
}