.scene { aspect-ratio: 4 / 3; border-radius: 16px; background: rgba(255, 255, 255, .35); border: 1px solid rgba(255, 255, 255, .6); position: relative; overflow: hidden; font-size: 11px; color: var(--ink55); }
.scene:not(.play) * { animation-play-state: paused !important; }
.scene .row { position: absolute; left: 14px; right: 14px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .55); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--ink); font-size: 10.5px; }
.scene .row i { font-style: normal; color: var(--ink40); font-variant-numeric: tabular-nums; }
.scene .cnt { position: absolute; font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: -.02em; }
.scene .cap { position: absolute; left: 14px; bottom: 10px; font-size: 10px; color: var(--ink40); }

.sc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-ring circle { fill: none; stroke-width: 14; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 0 400; animation: ring-draw 7s cubic-bezier(.2, .8, .2, 1) infinite; }
.sc-ring .cnt { left: 0; right: 0; top: 50%; text-align: center; transform: translateY(-50%); font-size: 22px; color: var(--ink); }
.sc-ring .cnt small { display: block; font-size: 9.5px; color: var(--ink40); letter-spacing: 0; }
@keyframes ring-draw { 0% { stroke-dasharray: 0 400; } 25%, 80% { stroke-dasharray: var(--len) 400; } 95%, 100% { stroke-dasharray: 0 400; } }

.sc-drop .zone { position: absolute; left: 20px; right: 20px; top: 18px; height: 64px; border: 1.5px dashed rgba(30, 30, 45, .25); border-radius: 12px; }
.sc-drop .icon { position: absolute; left: calc(50% - 20px); top: 30px; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #f6a3c2, #8b6bff); box-shadow: 0 6px 14px rgba(var(--shadow), .25); animation: fly 9s ease-in-out infinite; }
.sc-drop .icon::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); border-right-color: transparent; }
.sc-drop .row { top: calc(96px + var(--i) * 26px); opacity: 0; animation: tail 9s ease-in-out infinite; animation-delay: calc(.2s + var(--i) * .15s); }
.sc-drop .cap { opacity: 0; animation: freed 9s ease-in-out infinite; color: var(--ink); }

.sc-scan .row { top: calc(16px + var(--i) * 30px); font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.sc-scan .row.orphan { animation: orphan 6s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * .25s); }
.sc-scan .row.orphan::after { content: "нет владельца"; font-size: 9px; color: var(--warn); opacity: 0; animation: orphan-tag 6s ease-in-out infinite; animation-delay: calc(1.4s + var(--i) * .25s); }
.sc-scan .beam { position: absolute; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, transparent, rgba(78, 134, 199, .28), transparent); top: -60px; animation: beam 6s ease-in-out infinite; }
@keyframes beam { 0% { top: -60px; } 45%, 100% { top: 100%; } }
@keyframes orphan { 0%, 20% { background: rgba(255, 255, 255, .55); } 30%, 80% { background: rgba(255, 215, 140, .45); } 100% { background: rgba(255, 255, 255, .55); } }
@keyframes orphan-tag { 0%, 25% { opacity: 0; } 35%, 80% { opacity: 1; } 100% { opacity: 0; } }

.sc-bars .bar { position: absolute; left: 14px; right: 14px; top: calc(18px + var(--i) * 30px); height: 18px; }
.sc-bars .bar i { position: absolute; left: 0; top: 0; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--c-a), var(--c-b)); width: 0; animation: burn 9s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
.sc-bars .bar span { position: absolute; left: calc(var(--w) + 8px); top: 2px; font-size: 10px; color: var(--ink55); animation: label-fade 9s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes label-fade { 0%, 12% { opacity: 0; } 32%, 62% { opacity: 1; } 82%, 90% { opacity: .35; } 100% { opacity: 0; } }
.sc-bars .cnt { right: 14px; bottom: 10px; font-size: 20px; color: var(--ink); animation: bars-cnt 9s ease-in-out infinite; opacity: 0; }
@keyframes bars-cnt { 0%, 62% { opacity: 0; transform: translateY(6px); } 72%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes burn { 0%, 8% { width: 0; opacity: 1; } 38%, 58% { width: var(--w); opacity: 1; } 82% { width: 4px; opacity: 1; } 90%, 100% { width: 4px; opacity: 0; } }
@keyframes cnt-in { 0%, 70% { opacity: 0; transform: translateY(6px); } 80%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.sc-tree { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; }
.sc-tree .line { position: absolute; left: 14px; right: 14px; top: calc(14px + var(--i) * 24px); display: flex; justify-content: space-between; color: var(--ink); white-space: nowrap; opacity: 0; animation: line-in 7s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
.sc-tree .line i { font-style: normal; color: var(--ink40); }
.sc-tree .line.heavy i { color: #C65D7B; }
@keyframes line-in { 0% { opacity: 0; transform: translateX(-8px); } 8%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateX(20px); } }

.sc-log { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; }
.sc-log .feed { position: absolute; left: 14px; right: 14px; top: 12px; bottom: 34px; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.sc-log .feed div { animation: feed 8s linear infinite; }
.sc-log .feed p { margin: 0 0 5px; color: var(--ink55); white-space: nowrap; }
.sc-log .feed b { color: #C65D7B; font-weight: 500; }
.sc-log .wipe { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(255, 255, 255, .6); animation: wipe 8s ease-in-out infinite; }
@keyframes feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wipe { 0%, 78% { height: 0; } 86%, 92% { height: 100%; } 100% { height: 0; } }

.sc-bubbles .b { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .85), var(--c)); box-shadow: 0 6px 14px rgba(var(--shadow), .15); display: grid; place-items: center; color: var(--ink); font-size: 10px; animation: drift-b var(--dur) ease-in-out infinite alternate; animation-delay: var(--d); will-change: transform; }
.sc-bubbles .b.big { animation: drift-big var(--dur) ease-in-out infinite alternate; }
@keyframes drift-b { 0% { transform: translate(0, 0); } 33% { transform: translate(10px, -14px); } 66% { transform: translate(-8px, -6px); } 100% { transform: translate(6px, 10px); } }
@keyframes drift-big { 0% { transform: translate(0, 0) scale(1); box-shadow: 0 6px 14px rgba(var(--shadow), .15); } 50% { transform: translate(8px, -10px) scale(1.06); box-shadow: 0 12px 28px rgba(198, 93, 123, .38); } 100% { transform: translate(-6px, 6px) scale(1); box-shadow: 0 6px 14px rgba(var(--shadow), .15); } }

.sc-dupes .file { position: absolute; top: 46%; width: 62px; height: 72px; margin-top: -36px; border-radius: 8px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(var(--shadow), .12); animation: merge 5s ease-in-out infinite; }
.sc-dupes .file::before { content: ""; position: absolute; left: 10px; right: 10px; top: 12px; height: 4px; border-radius: 2px; background: rgba(30, 30, 45, .2); box-shadow: 0 10px 0 rgba(30, 30, 45, .14), 0 20px 0 rgba(30, 30, 45, .1); }
.sc-dupes .file.l { left: 18%; --to: 40px; z-index: 2; } .sc-dupes .file.r { right: 18%; --to: -40px; z-index: 1; --tilt: 6; }
.sc-dupes .file span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 9px; color: var(--ink55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.sc-dupes .file::after { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; text-align: center; font-size: 9.5px; color: var(--ink40); white-space: nowrap; }
.sc-dupes .glow { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 93, 123, .35), transparent 65%); opacity: 0; animation: glow 5s ease-in-out infinite; }
.sc-dupes .cap { right: 14px; left: auto; animation: cnt-in 5s ease-in-out infinite; opacity: 0; color: var(--ink); }
@keyframes merge { 0%, 25% { transform: translateX(0) rotate(0); opacity: 1; } 50%, 62% { transform: translateX(var(--to)) rotate(calc(var(--tilt, 0) * 1deg)); opacity: 1; } 78%, 100% { transform: translateX(var(--to)) rotate(calc(var(--tilt, 0) * 1deg)); opacity: var(--o, 1); } }
@keyframes glow { 45%, 60% { opacity: 1; } }

.sc-time .axis { position: absolute; left: 14px; right: 14px; bottom: 26px; height: 1px; background: rgba(30, 30, 45, .25); }
.sc-time .tick { position: absolute; bottom: 8px; left: var(--x); transform: translateX(-50%); font-size: 9px; color: var(--ink40); }
.sc-time .tick::before { content: ""; position: absolute; left: 50%; bottom: 14px; width: 1px; height: 6px; background: rgba(30, 30, 45, .25); }
.sc-time .f { position: absolute; left: var(--x); bottom: 40px; width: 26px; height: 32px; margin-left: -13px; border-radius: 5px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 3px 8px rgba(var(--shadow), .12); animation: stale 7s ease-in-out infinite; animation-delay: var(--d); }
.sc-time .f::before { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 3px; border-radius: 2px; background: rgba(30, 30, 45, .22); box-shadow: 0 7px 0 rgba(30, 30, 45, .16), 0 14px 0 rgba(30, 30, 45, .1); }
.sc-time .f.up { bottom: 82px; }
.sc-time .th { position: absolute; top: 12px; bottom: 26px; width: 1.5px; background: var(--warn); left: 88%; animation: threshold 7s ease-in-out infinite; }
.sc-time .th::after { content: "старше года"; position: absolute; top: -2px; right: 8px; white-space: nowrap; font-size: 9.5px; color: var(--warn); }
.sc-time .cnt { right: 14px; top: 12px; font-size: 20px; color: var(--ink); opacity: 0; animation: cnt-in 7s ease-in-out infinite; }
@keyframes threshold { 0%, 12% { left: 88%; } 60%, 88% { left: 36%; } 100% { left: 88%; } }
@keyframes stale { 0%, 12% { filter: none; opacity: 1; transform: none; } 22%, 85% { filter: sepia(.9) saturate(.4); opacity: .4; transform: translateY(4px); } 100% { filter: none; opacity: 1; transform: none; } }

.sc-monitor svg { position: absolute; left: 14px; right: 14px; bottom: 14px; width: calc(100% - 28px); height: 55%; }
.sc-monitor path { fill: none; stroke: #3FA796; stroke-width: 2; stroke-linejoin: round; }
.sc-monitor .fill { fill: rgba(63, 167, 150, .18); stroke: none; }
.sc-monitor .cnt { left: 14px; top: 12px; font-size: 24px; color: var(--ink); }
.sc-monitor .cnt small { font-size: 10px; color: var(--ink40); margin-left: 4px; }
.sc-monitor .proc { position: absolute; right: 14px; top: 16px; text-align: right; font-size: 10px; line-height: 1.6; }
.sc-monitor .proc b { display: block; font-weight: 500; color: var(--ink); }

.sc-toggles .row { top: calc(16px + var(--i) * 32px); }
.sc-toggles .sw { width: 30px; height: 17px; border-radius: 9px; background: #3FA796; position: relative; animation: sw-off 7s ease-in-out infinite; animation-delay: calc(1s + var(--i) * .5s); }
.sc-toggles .sw::after { content: ""; position: absolute; top: 2px; left: 15px; width: 13px; height: 13px; border-radius: 50%; background: #fff; animation: sw-knob 7s ease-in-out infinite; animation-delay: calc(1s + var(--i) * .5s); }
.sc-toggles .row.keep .sw, .sc-toggles .row.keep .sw::after { animation: none; }
@keyframes sw-off { 0%, 20% { background: #3FA796; } 30%, 80% { background: rgba(30, 30, 45, .22); } 100% { background: #3FA796; } }
@keyframes sw-knob { 0%, 20% { left: 15px; } 30%, 80% { left: 2px; } 100% { left: 15px; } }

.sc-snap .row { top: calc(16px + var(--i) * 34px); height: 26px; }
.sc-snap .row b { font-weight: 500; }
.sc-snap .row span { color: var(--ink55); }
.sc-snap .row span b { color: var(--ink); margin-right: 6px; }
.sc-snap .row.out { animation: snap-out 7s ease-in-out infinite; }
.sc-snap .row:not(.out) { animation: snap-up 7s ease-in-out infinite; }
.sc-snap .cap { opacity: 0; animation: cnt-in 7s ease-in-out infinite; color: var(--ink); }
@keyframes snap-out { 0%, 30% { transform: none; opacity: 1; background: rgba(255, 255, 255, .55); } 38% { background: rgba(255, 215, 140, .5); transform: none; opacity: 1; } 55%, 92% { transform: translateX(120%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes snap-up { 0%, 55% { transform: none; } 65%, 92% { transform: translateY(-34px); } 100% { transform: none; } }

.sc-ops .op { position: absolute; left: 14px; right: 14px; top: calc(16px + var(--i) * 40px); height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .55); display: flex; align-items: center; gap: 10px; padding: 0 10px; color: var(--ink); font-size: 10.5px; }
.sc-ops .op svg { width: 20px; height: 20px; flex: none; }
.sc-ops .op circle { fill: none; stroke: #3FA796; stroke-width: 2.5; stroke-dasharray: 50; stroke-dashoffset: 50; transform: rotate(-90deg); transform-origin: 50% 50%; animation: op-ring 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.sc-ops .op path { fill: none; stroke: #3FA796; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 12; stroke-dashoffset: 12; animation: op-check 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes op-ring { 0% { stroke-dashoffset: 50; } 12%, 100% { stroke-dashoffset: 0; } }
@keyframes op-check { 0%, 13% { stroke-dashoffset: 12; } 20%, 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } .sc-ring circle { stroke-dasharray: var(--len) 400; } .sc-tree .line, .sc-drop .row { opacity: 1; } .sc-time .th { left: 36%; } .sc-time .f { filter: sepia(.9) saturate(.4); opacity: .4; } }

@keyframes fly { 0% { transform: translate(-220px, -90px) rotate(-14deg) scale(.7); opacity: 0; } 8% { opacity: 1; } 22% { transform: translate(0, 0) rotate(0) scale(1); } 28% { transform: scale(.92); } 32% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 88%, 100% { transform: scale(.4); opacity: 0; } }
@keyframes tail { 0%, 30% { opacity: 0; transform: translateX(-14px); } 36%, 76% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: translateX(36px); } }
@keyframes freed { 0%, 86% { opacity: 0; transform: translateY(8px); } 91%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }