/* Элементы страницы (одинаково на сайте, в предпросмотре и в редакторе). */
.page { position: relative; overflow: hidden; transform-origin: 0 0; }
.el { position: absolute; display: block; color: inherit; text-decoration: none; }
.el-lp, .el-rot { width: 100%; height: 100%; }
.el-text .el-lp, .el-text .el-rot { height: auto; }
.tx { white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; min-height: 1em; }
.img { width: 100%; height: 100%; }
.img img { display: block; width: 100%; height: 100%; box-sizing: border-box; user-select: none; }
.img-wait { background: repeating-linear-gradient(135deg, #eef2f7 0 12px, #e2e8f0 12px 24px); border-radius: 6px; }
.img-wait img { visibility: hidden; }
.shp, .ln, .ico { display: block; overflow: visible; }
.ln { position: absolute; left: 0; top: 0; }
a.el { cursor: pointer; }
a.el:focus-visible { outline: 3px solid #2f6bff; outline-offset: 4px; }

/* ---------- Анимации появления (при прокрутке до элемента) ---------- */
.an { opacity: 0; }
.an.in { animation-duration: var(--ad, 800ms); animation-delay: var(--dl, 0ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.an.in.no-anim { animation: none !important; opacity: 1; }
.an-fade.in { animation-name: a-fade; }
.an-up.in { animation-name: a-up; }
.an-down.in { animation-name: a-down; }
.an-left.in { animation-name: a-left; }
.an-right.in { animation-name: a-right; }
.an-zoom.in { animation-name: a-zoom; }
.an-pop.in { animation-name: a-pop; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.an-flip.in { animation-name: a-flip; }
.an-rotate.in { animation-name: a-rotate; }
.an-blur.in { animation-name: a-blur; }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes a-down { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes a-left { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes a-right { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes a-zoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes a-pop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes a-flip { from { opacity: 0; transform: perspective(800px) rotateX(80deg); } to { opacity: 1; transform: none; } }
@keyframes a-rotate { from { opacity: 0; transform: rotate(-25deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes a-blur { from { opacity: 0; filter: blur(18px); } to { opacity: 1; filter: none; } }

/* ---------- Постоянные анимации ---------- */
.lp-pulse { animation: l-pulse 2.2s ease-in-out infinite; }
.lp-float { animation: l-float 3.2s ease-in-out infinite; }
.lp-spin { animation: l-spin 8s linear infinite; }
.lp-swing { animation: l-swing 2.6s ease-in-out infinite; transform-origin: 50% 0; }
.lp-shake { animation: l-shake 3s ease-in-out infinite; }
.lp-beat { animation: l-beat 1.4s ease-in-out infinite; }
@keyframes l-pulse { 50% { transform: scale(1.06); } }
@keyframes l-float { 50% { transform: translateY(-14px); } }
@keyframes l-spin { to { transform: rotate(360deg); } }
@keyframes l-swing { 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } }
@keyframes l-shake { 0%, 84%, 100% { transform: none; } 87% { transform: translateX(-6px) rotate(-2deg); } 90% { transform: translateX(6px) rotate(2deg); } 93% { transform: translateX(-4px); } 96% { transform: translateX(4px); } }
@keyframes l-beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } 60% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .an { opacity: 1 !important; animation: none !important; }
  [class*="lp-"] { animation: none !important; }
}

/* Масштаб страницы под ширину окна */
.view-outer { position: relative; width: 100%; overflow: hidden; }
.view-scale { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ---------- Ещё постоянные анимации ---------- */
.lp-blink { animation: l-blink 1.4s steps(2, end) infinite; }
.lp-drift { animation: l-drift 18s ease-in-out infinite alternate; }
.lp-ping { animation: l-ping 2.6s ease-out infinite; }
@keyframes l-blink { 50% { opacity: .2; } }
@keyframes l-drift { 33% { transform: translate(40px, 24px) scale(1.06); } 66% { transform: translate(-24px, 36px) scale(.97); } 100% { transform: translate(16px, -20px) scale(1.04); } }
@keyframes l-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Готовая графика ---------- */
.art { display: block; overflow: visible; }
.art-txt { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 600; letter-spacing: .06em; }
.art .spin { transform-box: fill-box; transform-origin: center; }
.art.mv .spin { animation: l-spin .45s linear infinite; }
.art.mv .spin.rev { animation-direction: reverse; }
.art.mv .sweep { animation: art-sweep 7s linear infinite; }
.art.mv .ping { animation: art-ping 3.4s ease-out infinite; }
.art.mv .scan { animation: art-scan 3.6s ease-in-out infinite alternate; }
.art.mv .slide { animation: art-slide 2.4s ease-in-out infinite; }
.art.mv .blink { animation: art-blink 1.4s steps(2, end) infinite; }
.art:not(.mv) .ping { display: none; }
@keyframes art-sweep { to { transform: rotate(360deg); } }
@keyframes art-ping { from { transform: scale(.5); opacity: .7; } to { transform: scale(3.7); opacity: 0; } }
@keyframes art-scan { from { transform: translateX(0); } to { transform: translateX(var(--len)); } }
@keyframes art-slide { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
@keyframes art-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .art.mv * { animation: none !important; }
}

/* ---------- Действия и скрипты ---------- */
.rt-hide { visibility: hidden; pointer-events: none; }
.rt-click { cursor: pointer; }
.rt-click:focus-visible { outline: 3px solid #2f6bff; outline-offset: 4px; }
.page-edit .el-hd { opacity: .38; outline: 1.5px dashed rgba(47, 107, 255, .7); outline-offset: 2px; }
.rt-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.rt-fx, .rt-flash, .rt-tint { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rt-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(560px, 92vw);
  padding: 12px 18px; border-radius: 12px; background: rgba(15, 23, 42, .92); color: #fff; font: 600 15px/1.45 Montserrat, system-ui, sans-serif;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3); animation: rt-in .25s ease-out both; text-align: center; white-space: pre-wrap;
}
.rt-toast + .rt-toast { bottom: max(84px, calc(env(safe-area-inset-bottom) + 60px)); }
.rt-back { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .45); pointer-events: auto; animation: rt-fade .2s ease-out both; }
.rt-modal {
  width: min(440px, 100%); padding: 22px 22px 18px; border-radius: 16px; background: #fff; color: #0f172a;
  font: 16px/1.5 Montserrat, system-ui, sans-serif; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: rt-in .25s ease-out both;
}
.rt-modal p { margin: 0 0 16px; white-space: pre-wrap; overflow-wrap: break-word; }
.rt-input { width: 100%; box-sizing: border-box; height: 42px; margin: -4px 0 16px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }
.rt-btns { display: flex; justify-content: flex-end; gap: 8px; }
.rt-btn { height: 40px; padding: 0 18px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font: 600 15px Montserrat, system-ui, sans-serif; cursor: pointer; }
.rt-btn.pri { background: #2f6bff; border-color: #2f6bff; color: #fff; }
@keyframes rt-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.rt-modal { animation-name: rt-pop; }
@keyframes rt-pop { from { opacity: 0; transform: scale(.94); } }
@keyframes rt-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rt-toast, .rt-back, .rt-modal { animation: none; }
}