/* Construct PDF — «Возможности»: живые схемы функций (ред. 5.3). Только для vozmozhnosti.html. */
.fx { position: relative; height: 250px; border-radius: 18px; overflow: hidden; background: var(--fxb, #F3E7DA); --fxc: #C8202A; }
.fx[hidden] { display: none; }
.fx .st { position: absolute; inset: 0; }
.fx * { box-sizing: border-box; }
.fx .pg { position: absolute; left: 50%; top: 18px; width: 170px; height: 214px; margin-left: -85px; background: var(--paper, #FBF5EA); border-radius: 2px; padding: 16px 14px; box-shadow: 0 1px 2px rgba(60,40,30,.12), 0 8px 22px rgba(60,40,30,.14); font: 9.5px/1.55 var(--doc, Georgia, serif); color: #3A2C27; overflow: hidden; }
.fx .pg p { margin: 0 0 6px; }
.fx .ln { display: block; height: 3px; width: var(--w, 80%); margin: 0 0 7px; background: rgba(47,36,32,.22); border-radius: 2px; }
.fx .ln.t { height: 4px; background: rgba(47,36,32,.55); margin: 0 auto 12px; }
.fx .tg { position: absolute; right: 14px; bottom: 14px; background: #fff; color: #2E6B3A; font: 700 13px/1 var(--font, sans-serif); padding: 9px 13px 9px 30px; border-radius: 999px; box-shadow: 0 6px 18px rgba(42,29,25,.14); opacity: 0; }
.fx .tg::before { content: "✓"; position: absolute; left: 12px; top: 8px; }
.fx.play .tg { animation: fxTag 6s var(--ease, ease) infinite; }
@keyframes fxTag { 0%, 45% { opacity: 0; transform: translateY(8px); } 52%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* замена слова */
.fx .sw { position: relative; display: inline-grid; padding: 0 3px; border-radius: 2px; background: rgba(240,190,80,.3); }
.fx .sw > span { grid-area: 1 / 1; white-space: nowrap; }
.fx .sw .n { opacity: 0; }
.fx.play .sw { animation: fxSwB 6s infinite; animation-delay: calc(var(--k, 0) * .35s); }
.fx.play .sw .o { animation: fxSwO 6s infinite; animation-delay: calc(var(--k, 0) * .35s); }
.fx.play .sw .n { animation: fxSwN 6s infinite; animation-delay: calc(var(--k, 0) * .35s); }
@keyframes fxSwO { 0%, 30% { opacity: 1; filter: none; } 38%, 90% { opacity: 0; filter: blur(3px); } 98% { opacity: 1; filter: none; } }
@keyframes fxSwN { 0%, 30% { opacity: 0; transform: translateY(4px); } 38%, 90% { opacity: 1; transform: none; } 98% { opacity: 0; } }
@keyframes fxSwB { 0%, 30% { background: rgba(240,190,80,.3); } 38%, 90% { background: rgba(120,170,90,.3); } }

/* редактировать: картинка сдвигается */
.fx .pic { display: block; width: 46px; height: 32px; margin: 6px 0 8px; background: linear-gradient(160deg, #C9B9A0, #8E7B63); border-radius: 2px; }
.fx.play .pic { animation: fxPic 6s var(--ease, ease) infinite; }
@keyframes fxPic { 0%, 40% { transform: none; outline: 0 dashed transparent; } 50% { outline: 1.5px dashed var(--fxc); } 60%, 88% { transform: translateX(68px); outline: 1.5px dashed var(--fxc); } 96% { transform: none; outline: 0; } }

/* добавить текст: печатается */
.fx .type { font: 600 11px/1.3 var(--font, sans-serif); color: #23336E; white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid #23336E; }
.fx.play .type { animation: fxType 6s steps(24) infinite; }
@keyframes fxType { 0%, 15% { width: 0; } 55%, 90% { width: 100%; } 96%, 100% { width: 0; } }

/* поля формы */
.fx .fd { display: inline-block; vertical-align: -3px; width: 82px; height: 13px; border-bottom: 1px solid rgba(47,36,32,.5); position: relative; font: 600 9.5px/13px var(--font, sans-serif); color: #1F4E9E; }
.fx .fd em { font-style: normal; padding-left: 4px; opacity: 0; }
.fx .cb { display: inline-block; width: 9px; height: 9px; border: 1px solid rgba(47,36,32,.6); vertical-align: -1px; margin-left: 4px; }
.fx.play .fd, .fx.play .cb { animation: fxFld 6s infinite; animation-delay: calc(var(--i) * .25s); }
.fx.play .fd em { animation: fxFill 6s infinite; }
@keyframes fxFld { 0%, 15% { background: transparent; box-shadow: none; } 22%, 88% { background: rgba(47,125,204,.16); box-shadow: 0 0 0 1.5px rgba(47,125,204,.55); } 96% { background: transparent; box-shadow: none; } }
@keyframes fxFill { 0%, 50% { opacity: 0; } 56%, 88% { opacity: 1; } 96% { opacity: 0; } }

/* пометки */
.fx .mk { position: relative; background-repeat: no-repeat; }
.fx .mk.hl { background-image: linear-gradient(rgba(255,214,90,.75), rgba(255,214,90,.75)); background-size: 0 100%; }
.fx .mk.ul { background-image: linear-gradient(#C8202A, #C8202A); background-size: 0 1.5px; background-position: 0 100%; }
.fx .mk.st { background-image: linear-gradient(#5E4A40, #5E4A40); background-size: 0 1.2px; background-position: 0 55%; }
.fx.play .mk { animation: fxMk 6s var(--ease, ease) infinite; }
.fx.play .mk.ul { animation-delay: .5s; } .fx.play .mk.st { animation-delay: 1s; }
.fx.play .mk.hl { animation-name: fxMkH; }
@keyframes fxMk { 0%, 15% { background-size: 0 1.5px; } 35%, 88% { background-size: 100% 1.5px; } 96% { background-size: 0 1.5px; } }
@keyframes fxMkH { 0%, 15% { background-size: 0 100%; } 35%, 88% { background-size: 100% 100%; } 96% { background-size: 0 100%; } }

/* штамп */
.fx .stp { position: absolute; right: 12px; bottom: 18px; border: 2px solid #3D4FB0; color: #3D4FB0; font: 800 11px/1.1 var(--font, sans-serif); padding: 6px 8px; border-radius: 4px; text-align: center; transform: rotate(-8deg); opacity: 0; }
.fx .stp small { display: block; font-size: 9px; font-weight: 600; }
.fx.play .stp { animation: fxStamp 6s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes fxStamp { 0%, 20% { opacity: 0; transform: rotate(-8deg) scale(1.8); } 30%, 88% { opacity: 1; transform: rotate(-8deg) scale(1); } 96% { opacity: 0; } }

/* скрыть данные */
.fx .rd { position: relative; }
.fx .rd::after { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 0; background: #1D1517; }
.fx.play .rd::after { animation: fxRd 6s var(--ease, ease) infinite; }
.fx.play .rd.d2::after { animation-delay: .4s; }
@keyframes fxRd { 0%, 18% { width: 0; } 32%, 88% { width: calc(100% + 4px); } 96% { width: 0; } }

/* найти и заменить: строка поиска */
.fx .find { position: absolute; left: 14px; top: 14px; background: #fff; border-radius: 10px; padding: 8px 12px; font: 600 12px/1 var(--font, sans-serif); color: var(--ink, #2A1D19); box-shadow: 0 4px 14px rgba(42,29,25,.12); z-index: 2; }
.fx .pg ~ .find, .fx .find + .pg { left: 58%; }

/* сканы */
.fx .scan { background: #EFE9DE; filter: contrast(.95); }
.fx .scan p { color: #4A3E38; }
.fx .tilt { transform: rotate(-7deg); }
.fx.play .tilt { animation: fxTilt 6s var(--ease, ease) infinite; }
@keyframes fxTilt { 0%, 25% { transform: rotate(-7deg); } 40%, 88% { transform: none; } 96% { transform: rotate(-7deg); } }
.fx .ocrbar { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(transparent, color-mix(in srgb, var(--fxc) 35%, transparent)); border-bottom: 2px solid var(--fxc); opacity: 0; }
.fx.play .ocrbar { animation: fxOcr 6s linear infinite; }
@keyframes fxOcr { 0% { top: -26px; opacity: 1; } 40% { top: 100%; opacity: 1; } 41%, 100% { opacity: 0; } }
.fx .scan mark { background: transparent; color: inherit; }
.fx.play .scan mark { animation: fxMark 6s infinite; }
@keyframes fxMark { 0%, 42% { background: transparent; } 48%, 88% { background: rgba(255,214,90,.8); } 96% { background: transparent; } }
.fx .scanbed { position: absolute; left: 50%; top: 10px; width: 210px; height: 230px; margin-left: -105px; border: 2px solid rgba(47,36,32,.2); border-radius: 10px; }
.fx .scanbed .beam { position: absolute; left: 6px; right: 6px; height: 4px; top: 8px; background: color-mix(in srgb, var(--fxc) 60%, #fff); box-shadow: 0 0 14px color-mix(in srgb, var(--fxc) 70%, transparent); border-radius: 2px; }
.fx.play .scanbed .beam { animation: fxBeam 6s ease-in-out infinite; }
@keyframes fxBeam { 0%, 20% { top: 8px; opacity: 0; } 22% { opacity: 1; } 50% { top: 214px; opacity: 1; } 52%, 100% { opacity: 0; } }
.fx.play .scanin { animation: fxIn 6s var(--ease, ease) infinite; }
@keyframes fxIn { 0% { transform: translateY(-260px); opacity: 1; } 18%, 88% { transform: none; opacity: 1; } 100% { transform: translateY(260px); opacity: 0; } }
.fx .mini { position: absolute; right: 18px; width: 34px; height: 44px; background: var(--paper, #FBF5EA); box-shadow: 0 2px 6px rgba(60,40,30,.15); opacity: 0; }
.fx .m1 { top: 30px; } .fx .m2 { top: 86px; } .fx .m3 { top: 142px; }
.fx.play .mini { animation: fxPop 6s infinite; } .fx.play .m2 { animation-delay: .25s; } .fx.play .m3 { animation-delay: .5s; }
@keyframes fxPop { 0%, 52% { opacity: 0; transform: scale(.6); } 58%, 88% { opacity: 1; transform: none; } 96% { opacity: 0; } }

/* печати: перелёт */
.fx .left2 { left: 28%; } .fx .right2 { left: 72%; }
.fx .seal { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(47,88,200,.8); color: rgba(47,88,200,.85); font: 800 7px/1.15 var(--font, sans-serif); text-align: center; box-shadow: inset 0 0 0 4px rgba(47,88,200,.12); }
.fx .seal.fly { left: calc(28% - 30px); top: 150px; }
.fx.play .seal.fly { animation: fxFly 6s var(--ease, ease) infinite; }
@keyframes fxFly { 0%, 20% { transform: none; } 30% { transform: translateY(-14px) scale(1.08); } 55%, 88% { transform: translate(calc(var(--fxw, 210px)), 0); } 96% { transform: none; } }
.fx .ghost { position: absolute; left: 30px; top: 132px; width: 54px; height: 54px; border-radius: 50%; border: 1.5px dashed rgba(47,36,32,.25); opacity: 0; }
.fx.play .ghost { animation: fxPop 6s infinite; animation-delay: -1.5s; }

/* электронная подпись */
.fx .sgb { position: absolute; left: 10px; right: 10px; bottom: 16px; border: 1.5px solid #2B47B8; border-radius: 6px; padding: 7px 8px; font: 500 8px/1.4 var(--font, sans-serif); color: #2B47B8; background: rgba(43,71,184,.04); opacity: 0; }
.fx .sgb b { display: block; font-weight: 800; font-size: 8px; margin-bottom: 2px; }
.fx.play .sgb { animation: fxStamp2 6s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes fxStamp2 { 0%, 18% { opacity: 0; transform: translateY(-40px) scale(1.1); } 30%, 88% { opacity: 1; transform: none; } 96% { opacity: 0; } }

/* файлы-карточки */
.fx .fl { display: grid; gap: 2px; background: #fff; border-radius: 10px; padding: 9px 12px; font: 600 12px/1.2 var(--font, sans-serif); color: var(--ink, #2A1D19); box-shadow: 0 3px 10px rgba(42,29,25,.08); position: relative; }
.fx .fl small { font-weight: 500; font-size: 11px; color: var(--ink-2, #6B5B54); }
.fx .row4 { position: absolute; inset: 24px 18px 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fx .fl.bt::after { content: "ЭП ✓"; position: absolute; right: 10px; top: 50%; translate: 0 -50%; font: 800 11px/1 var(--font, sans-serif); color: #fff; background: #3D4FB0; padding: 5px 7px; border-radius: 6px; opacity: 0; }
.fx.play .fl.bt::after { animation: fxPop 6s infinite; animation-delay: calc(var(--i) * .3s - 1.2s); }

/* подпись картинкой */
.fx .sigline { position: absolute; left: 14px; right: 14px; bottom: 20px; display: flex; align-items: flex-end; gap: 6px; }
.fx .scr { width: 92px; height: 34px; fill: none; stroke: #23336E; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.fx.play .scr { animation: fxDraw 6s ease-in-out infinite; }
@keyframes fxDraw { 0%, 15% { stroke-dashoffset: 320; } 55%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 320; } }

/* проверить подписи */
.fx .vf { position: absolute; left: 50%; top: 20px; width: 270px; margin-left: -135px; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(42,29,25,.1); font: 500 12px/1.3 var(--font, sans-serif); }
.fx .vh { display: block; font-weight: 800; margin-bottom: 6px; }
.fx .vf p { display: grid; grid-template-columns: 18px 82px 1fr; gap: 6px; margin: 0; padding: 4px 0; align-items: center; }
.fx .vf p::before { content: "✓"; color: #fff; background: #2E8A4E; border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; font-size: 10px; transform: scale(0); }
.fx .vf p span { color: var(--ink-2, #6B5B54); }
.fx.play .vf p::before { animation: fxTick 6s infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes fxTick { 0%, 15% { transform: scale(0); } 22%, 88% { transform: scale(1); } 96% { transform: scale(0); } }

/* страницы: объединить, извлечь, разделить */
.fx .mg { width: 110px; height: 140px; margin-left: -55px; top: 50px; padding: 12px 10px; }
.fx .mg0 { --x: -150px; } .fx .mg1 { --x: 0px; } .fx .mg2 { --x: 150px; }
.fx .mg0 .ln.t { background: #7A8A3A; } .fx .mg1 .ln.t { background: #2F6FB8; } .fx .mg2 .ln.t { background: #C8202A; }
.fx .mg { transform: translateX(var(--x)); }
.fx.play .mg { animation: fxMerge 6s var(--ease, ease) infinite; }
.fx.play .mg1 { z-index: 2; } .fx.play .mg2 { z-index: 3; }
@keyframes fxMerge { 0%, 18% { transform: translateX(var(--x)); } 40%, 88% { transform: translate(calc(var(--x) * .04), calc(var(--x) * .02)); } 96%, 100% { transform: translateX(var(--x)); } }
.fx .stk { width: 120px; height: 150px; margin-left: -150px; top: 40px; padding: 12px 10px; }
.fx .s1 { transform: translate(8px, 8px); } .fx .s2 { transform: translate(4px, 4px); }
.fx .dst { width: 120px; height: 150px; margin-left: 40px; top: 40px; padding: 12px 10px; outline: 1.5px dashed rgba(47,36,32,.25); }
.fx .lift .ln.t { background: var(--fxc); }
.fx.play .lift { animation: fxLift 6s var(--ease, ease) infinite; z-index: 3; }
@keyframes fxLift { 0%, 18% { transform: none; } 30% { transform: translateY(-24px) rotate(-3deg); } 55%, 88% { transform: translate(190px, 8px); } 96% { transform: none; } }
.fx .sp { width: 120px; height: 160px; margin-left: -60px; top: 36px; padding: 12px 10px; }
.fx .spl .ln.t { background: #7A8A3A; } .fx .spr .ln.t { background: #C8202A; }
.fx.play .spl { animation: fxSplL 6s var(--ease, ease) infinite; } .fx.play .spr { animation: fxSplR 6s var(--ease, ease) infinite; }
@keyframes fxSplL { 0%, 18% { transform: translate(3px, 3px); } 40%, 88% { transform: translateX(-80px) rotate(-3deg); } 96% { transform: translate(3px, 3px); } }
@keyframes fxSplR { 0%, 18% { transform: none; } 40%, 88% { transform: translateX(80px) rotate(3deg); } 96% { transform: none; } }

/* три маленьких листа */
.fx .row3 { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 18px; }
.fx .pg.sm { position: relative; left: auto; top: auto; margin: 0; width: 96px; height: 128px; padding: 10px 9px; }
.fx .pn { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 9px/1 var(--font, sans-serif); font-style: normal; color: var(--fxc); opacity: 0; }
.fx.play .pn { animation: fxPop 6s infinite; animation-delay: calc(var(--i) * .3s - 1.5s); }
.fx .a4.w1 { width: 74px; height: 96px; } .fx .a4.w2 { width: 112px; height: 150px; } .fx .a4.w3 { width: 130px; height: 96px; }
.fx.play .a4 { animation: fxA4 6s var(--ease, ease) infinite; }
@keyframes fxA4 { 0%, 22% { } 40%, 88% { width: 96px; height: 128px; } }

/* колонтитул и надпись */
.fx .hdr { display: block; font: 600 7.5px/1 var(--font, sans-serif); font-style: normal; color: var(--ink-2, #6B5B54); border-bottom: 1px solid rgba(47,36,32,.3); padding-bottom: 4px; margin-bottom: 10px; opacity: 0; }
.fx .wmk { position: absolute; left: 50%; top: 50%; font: 800 30px/1 var(--font, sans-serif); color: rgba(200,32,42,.0); transform: translate(-50%, -50%) rotate(-38deg); letter-spacing: .08em; }
.fx.play .hdr { animation: fxPop 6s infinite; animation-delay: -2.4s; }
.fx.play .wmk { animation: fxWm 6s infinite; }
@keyframes fxWm { 0%, 35% { color: rgba(200,32,42,0); } 45%, 88% { color: rgba(200,32,42,.28); } 96% { color: rgba(200,32,42,0); } }

/* проверка перед отправкой */
.fx .fls { position: absolute; left: 16px; right: 16px; top: 22px; display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: center; }
.fx .fls > div { display: grid; gap: 8px; }
.fx .fl.bad { color: #9C2A22; } .fx .fl.bad small { color: #C0392B; }
.fx .fl.good { opacity: 0; } .fx .fl.good small { color: #2E8A4E; font-weight: 700; }
.fx.play .fl.good { animation: fxPop 6s infinite; animation-delay: calc(var(--i, 0) * .3s - 1.6s); }
.fx .arr { display: block; height: 3px; background: var(--fxc); position: relative; border-radius: 2px; }
.fx .arr::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left-color: var(--fxc); border-right: 0; }
.fx .arr.mid { position: absolute; left: 50%; top: 122px; width: 34px; margin-left: -17px; }
.fx .meter { position: absolute; left: 16px; right: 16px; bottom: 18px; height: 34px; background: #fff; border-radius: 10px; font: 600 12px/34px var(--font, sans-serif); padding-left: 12px; overflow: hidden; color: #2E6B3A; }
.fx .meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(46,138,78,.15); }
.fx.play .meter i { animation: fxMeter 6s var(--ease, ease) infinite; }
@keyframes fxMeter { 0%, 40% { width: 0; } 60%, 88% { width: 25%; } 96% { width: 0; } }

/* преобразования: лист → лист */
.fx .cv { width: 130px; height: 170px; top: 40px; padding: 12px 10px; }
.fx .cvl { margin-left: -165px; } .fx .cvr { margin-left: 35px; }
.fx .bd { position: absolute; font: 800 11px/1 var(--font, sans-serif); color: #fff; padding: 5px 8px; border-radius: 6px; }
.fx .bd.b1 { left: calc(50% - 160px); top: 28px; background: #C8202A; } .fx .bd.b2 { left: calc(50% + 40px); top: 28px; background: #2F6FB8; opacity: 0; }
.fx.play .bd.b2 { animation: fxPop 6s infinite; animation-delay: -2s; }
.fx.play .cvr { animation: fxPop 6s infinite; animation-delay: -1.8s; }
.fx .ed { font: 700 10px/1.3 var(--font, sans-serif); }
.fx .caret { display: inline-block; width: 1.5px; height: 11px; background: #2F6FB8; margin-left: 2px; vertical-align: -1px; animation: fxBlink 1s steps(1) infinite; }
@keyframes fxBlink { 50% { opacity: 0; } }
.fx .tb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 6px; }
.fx .tb i { height: 14px; border: 1px solid rgba(47,36,32,.3); }
.fx .grid { position: absolute; left: calc(50% + 30px); top: 40px; width: 160px; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 14px rgba(42,29,25,.1); font: 600 10px/1 var(--font, sans-serif); }
.fx .grid i { font-style: normal; padding: 7px 6px; border: .5px solid rgba(47,36,32,.12); opacity: 0; }
.fx .grid i:nth-child(-n+3) { background: #E3F0E6; color: #1E6B3A; text-align: center; }
.fx .grid .sum { grid-column: 1 / -1; background: #1E8C4E; color: #fff; font-weight: 800; }
.fx.play .grid i { animation: fxPop 6s infinite; animation-delay: calc(var(--i, 6) * .08s - 2s); }

/* сжатие */
.fx .big { position: absolute; left: 50%; top: 34px; width: 150px; height: 120px; margin-left: -75px; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(42,29,25,.1); display: grid; place-items: center; }
.fx .big::before { content: "PDF"; position: absolute; top: 12px; left: 12px; font: 800 11px/1 var(--font, sans-serif); color: #fff; background: #C8202A; padding: 4px 7px; border-radius: 5px; }
.fx .sz { grid-area: 1 / 1; font: 800 28px/1 var(--font, sans-serif); color: var(--ink, #2A1D19); font-variant-numeric: tabular-nums; }
.fx .sz.n { color: #2E8A4E; opacity: 0; }
.fx.play .sz.o { animation: fxSwO 6s infinite; } .fx.play .sz.n { animation: fxSwN 6s infinite; }
.fx .bar { position: absolute; left: 30px; right: 30px; bottom: 30px; height: 14px; background: rgba(255,255,255,.7); border-radius: 7px; }
.fx .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #C0392B; border-radius: 7px; }
.fx .bar::after { content: ""; position: absolute; left: 26%; top: -8px; bottom: -8px; width: 2px; background: var(--ink, #2A1D19); }
.fx .bar em { position: absolute; left: 26%; top: -26px; transform: translateX(-50%); font: 600 11px/1 var(--font, sans-serif); font-style: normal; white-space: nowrap; }
.fx.play .bar i { animation: fxBar 6s var(--ease, ease) infinite; }
@keyframes fxBar { 0%, 30% { width: 100%; background: #C0392B; } 40%, 88% { width: 6%; background: #2E8A4E; } 96% { width: 100%; background: #C0392B; } }

/* картинками */
.fx .src { margin-left: -150px; width: 130px; height: 170px; top: 40px; }
.fx .im { position: absolute; left: calc(50% + 10px); top: calc(36px + var(--i) * 62px); width: 120px; height: 52px; background: #fff; border-radius: 8px; box-shadow: 0 3px 10px rgba(42,29,25,.1); display: flex; align-items: center; gap: 8px; padding: 6px; font: 800 11px/1 var(--font, sans-serif); color: var(--fxc); opacity: 0; }
.fx .im i { width: 40px; height: 40px; border-radius: 4px; background: linear-gradient(160deg, #EADBC4, #B9A487); }
.fx.play .im { animation: fxFan 6s var(--ease, ease) infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes fxFan { 0%, 20% { opacity: 0; transform: translateX(-90px) scale(.6); } 32%, 88% { opacity: 1; transform: none; } 96% { opacity: 0; } }

/* замок */
.fx .lk { position: absolute; left: 50%; top: 82px; width: 64px; height: 76px; margin-left: -32px; }
.fx .lk b { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #B02018; border-radius: 10px; box-shadow: 0 6px 16px rgba(176,32,24,.3); }
.fx .lk b::after { content: ""; position: absolute; left: 50%; top: 14px; width: 8px; height: 14px; margin-left: -4px; background: #fff; border-radius: 4px; }
.fx .lk i { position: absolute; left: 12px; right: 12px; top: 0; height: 44px; border: 7px solid #8A1712; border-bottom: 0; border-radius: 22px 22px 0 0; transform: translateY(-14px); }
.fx.play .lk i { animation: fxShut 6s cubic-bezier(.3,1.4,.5,1) infinite; }
.fx .lk.open i { transform: none; }
.fx.play .lk.open i { animation-name: fxOpen; }
.fx .lk.open b { background: #4F8A3A; box-shadow: 0 6px 16px rgba(79,138,58,.3); }
@keyframes fxShut { 0%, 30% { transform: translateY(-14px); } 40%, 88% { transform: none; } 96% { transform: translateY(-14px); } }
@keyframes fxOpen { 0%, 30% { transform: none; } 40%, 88% { transform: translateY(-14px) rotate(-18deg); transform-origin: 0 100%; } 96% { transform: none; } }
.fx .pw { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); background: #fff; border-radius: 8px; padding: 6px 12px; font: 800 14px/1 var(--font, sans-serif); letter-spacing: .1em; color: #B02018; }
.fx.play .dim { animation: fxDim 6s infinite; } .fx.play .undim { animation: fxDim 6s infinite reverse; }
@keyframes fxDim { 0%, 30% { filter: none; } 40%, 88% { filter: blur(1.5px) grayscale(.4); } 96% { filter: none; } }

/* сравнить */
.fx .cmp { width: 140px; height: 190px; top: 28px; padding: 14px 12px; }
.fx .cmp.l { margin-left: -150px; } .fx .cmp.r { margin-left: 10px; }
.fx .cmp s, .fx .cmp u { text-decoration: none; padding: 0 2px; }
.fx.play .dl { animation: fxDel 6s infinite; } .fx.play .ad { animation: fxAdd 6s infinite; }
.fx.play .d2 { animation-delay: .4s; }
@keyframes fxDel { 0%, 25% { background: transparent; text-decoration: none; } 33%, 88% { background: rgba(200,32,42,.18); text-decoration: line-through; color: #A0241C; } 96% { background: transparent; } }
@keyframes fxAdd { 0%, 25% { background: transparent; } 33%, 88% { background: rgba(46,138,78,.2); color: #1E6B3A; } 96% { background: transparent; } }

/* папки */
.fx .fold { position: absolute; left: 50%; top: 86px; width: 120px; height: 86px; margin-left: -60px; background: #E9B96E; border-radius: 4px 10px 10px 10px; box-shadow: 0 6px 16px rgba(160,110,30,.25); }
.fx .fold::before { content: ""; position: absolute; left: 0; top: -12px; width: 50px; height: 14px; background: #E9B96E; border-radius: 6px 6px 0 0; }
.fx .fold i { position: absolute; inset: 14px 0 0; background: #F2CB86; border-radius: 6px 10px 10px 10px; }
.fx .drop { position: absolute; left: calc(50% - 14px + var(--i) * 12px - 12px); top: 10px; width: 28px; height: 36px; background: var(--paper, #FBF5EA); box-shadow: 0 2px 6px rgba(60,40,30,.2); opacity: 0; }
.fx.play .drop { animation: fxDrop 6s ease-in infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes fxDrop { 0% { opacity: 0; transform: translateY(-20px); } 5% { opacity: 1; } 25% { opacity: 1; transform: translateY(90px); } 28%, 100% { opacity: 0; transform: translateY(96px); } }
.fx .fl.out { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
.fx.play .fl.out { animation: fxPop 6s infinite; animation-delay: -1s; }
.fx .fold.sm { left: 24%; top: 80px; width: 90px; height: 66px; margin-left: -45px; }
.fx .lens { position: absolute; left: calc(24% + 10px); top: 66px; width: 38px; height: 38px; border: 5px solid var(--ink, #2A1D19); border-radius: 50%; }
.fx .lens::after { content: ""; position: absolute; right: -14px; bottom: -12px; width: 16px; height: 5px; background: var(--ink, #2A1D19); transform: rotate(45deg); border-radius: 3px; }
.fx.play .lens { animation: fxLens 6s ease-in-out infinite; }
@keyframes fxLens { 0%, 100% { transform: none; } 25% { transform: translate(-16px, 14px); } 50% { transform: translate(12px, 20px); } 75% { transform: translate(-6px, 4px); } }
.fx .res { position: absolute; left: 44%; right: 14px; top: 40px; display: grid; gap: 8px; }
.fx .res i { font-style: normal; background: #fff; border-radius: 10px; padding: 8px 10px; font: 600 11px/1.3 var(--font, sans-serif); box-shadow: 0 3px 10px rgba(42,29,25,.08); opacity: 0; }
.fx .res em { display: block; font-style: normal; font-weight: 500; color: var(--ink-2, #6B5B54); }
.fx .res em::first-letter { color: inherit; }
.fx.play .res i { animation: fxPop 6s infinite; animation-delay: calc(var(--i) * .35s - 2s); }

/* принтер */
.fx .prn { position: absolute; left: 50%; top: 40px; width: 150px; height: 64px; margin-left: -75px; background: #5C6E80; border-radius: 12px; z-index: 2; box-shadow: 0 6px 16px rgba(60,70,90,.3); }
.fx .prn .slot { position: absolute; left: 22px; right: 22px; bottom: 12px; height: 6px; background: #2D3A48; border-radius: 3px; }
.fx .print { width: 100px; height: 130px; margin-left: -50px; top: 30px; padding: 12px 10px; z-index: 1; }
.fx.play .print { animation: fxPrint 6s var(--ease, ease) infinite; }
@keyframes fxPrint { 0%, 15% { transform: translateY(0); opacity: 1; } 50%, 88% { transform: translateY(80px); opacity: 1; } 94% { opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.fx .bd.in { position: absolute; right: 6px; bottom: 6px; background: #C8202A; }

/* закладки */
.fx .bm { position: absolute; left: 16px; top: 22px; width: 150px; display: grid; gap: 4px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 4px 14px rgba(42,29,25,.08); }
.fx .bm i { font-style: normal; font: 600 10.5px/1.2 var(--font, sans-serif); padding: 6px 8px; border-radius: 6px; }
.fx.play .bm i { animation: fxBm 6s steps(1) infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes fxBm { 0%, 24% { background: color-mix(in srgb, var(--fxc) 16%, transparent); color: var(--fxc); } 25%, 100% { background: transparent; color: inherit; } }
.fx .bmp { left: auto; right: 24px; margin: 0; width: 150px; }
.fx .scrl { display: block; }
.fx.play .scrl { animation: fxScroll 6s steps(4) infinite; }
@keyframes fxScroll { from { transform: translateY(0); } to { transform: translateY(-400px); } }

/* вложения */
.fx .att { margin-left: -120px; }
.fx .clip { position: absolute; right: 10px; top: -4px; width: 14px; height: 36px; border: 2.5px solid #5C6E80; border-radius: 8px; }
.fx .ch { position: absolute; left: calc(50% + 60px); top: calc(50px + var(--i) * 52px); background: #fff; border-radius: 10px; padding: 10px 14px; font: 800 12px/1 var(--font, sans-serif); color: var(--fxc); box-shadow: 0 3px 10px rgba(42,29,25,.1); opacity: 0; }
.fx.play .ch { animation: fxFan 6s var(--ease, ease) infinite; animation-delay: calc(var(--i) * .25s); }

@media (max-width: 600px) { .fx { height: 230px; } .fx .pg { transform-origin: top center; } .fx .st { transform: scale(.86); transform-origin: top center; } }
@media (prefers-reduced-motion: reduce) { .fx.play *, .fx.play *::before, .fx.play *::after { animation: none !important; } .fx .n, .fx .tg, .fx .fl.good, .fx .stp, .fx .sgb, .fx .grid i, .fx .res i, .fx .im, .fx .ch { opacity: 1 !important; } .fx .o { opacity: 0; } }