.manim, .manim * { box-sizing: border-box; }
.pillar-preview:has(.manim) {
background: #fff;
}
.manim {
position: absolute;
inset: 0;
overflow: hidden;
background: #fff;
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.manim-stage {
position: absolute;
inset: 7.3% 4.1%;
font-size: 9px;
font-size: calc(4px + 1.78cqw);
color: #2B292D;
--sp-1: .5em;
--manim-card: 40%;
--manim-x: 60%;
--manim-y1: 30%;
--manim-y2: 50%;
--manim-y3: 70%;
--manim-dot: .75em;
--manim-text: calc(var(--manim-x) + var(--manim-dot) / 2 + var(--sp-1));
}
.manim-shot {
position: absolute; top: 50%; left: 0; width: var(--manim-card); aspect-ratio: 16 / 9;
transform: translateY(-50%);
overflow: hidden; border-radius: .3em; background: rgba(43, 41, 45, .08);
}
.manim-frame {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
}
.manim .dw-live { top: 8.9%; left: 5%; z-index: 2; font-size: .8em; }
.manim .dw-live .dw-live-dot { animation: dw-pulse 2.25s ease-in-out infinite; }
.manim-wires {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
overflow: visible;
}
.manim-wires-ink { fill: none; stroke: #2B292D; stroke-width: 4.5; opacity: .16; }
.manim-pulse {
fill: none; stroke: #00ffff; stroke-width: 9; stroke-linecap: round;
stroke-dasharray: 16 200;
stroke-dashoffset: 17;
}
.manim .manim-head { position: absolute; top: 10%; left: var(--manim-text); transform: translateY(-50%); }
.manim-dest {
position: absolute; left: var(--manim-x); margin-left: calc(var(--manim-dot) / -2);
display: flex; align-items: center; gap: var(--sp-1);
transform: translateY(-50%);
white-space: nowrap;
}
.manim-dest--1 { top: var(--manim-y1); }
.manim-dest--2 { top: var(--manim-y2); }
.manim-dest--3 { top: var(--manim-y3); }
.manim-dot {
position: relative; flex: 0 0 auto;
width: var(--manim-dot); height: var(--manim-dot); border-radius: 50%;
background: #00ffff; box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .2);
}
.manim-ring {
position: absolute; inset: 0; display: block; border-radius: 50%;
background: #00ffff; opacity: 0;
}
.manim-name { font-size: 1.25em; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.manim-more {
position: absolute; top: 90%; left: var(--manim-text); transform: translateY(-50%);
font-size: .95em; font-weight: 700; line-height: 1.2; color: rgba(43, 41, 45, .45);
white-space: nowrap;
}
.manim-pulse--1 { animation: manim-pulse-1 9s linear infinite; }
.manim-pulse--2 { animation: manim-pulse-2 9s linear infinite; }
.manim-pulse--3 { animation: manim-pulse-3 9s linear infinite; }
.manim-dest--1 .manim-dot { animation: manim-beat-1 9s ease-in-out infinite; }
.manim-dest--2 .manim-dot { animation: manim-beat-2 9s ease-in-out infinite; }
.manim-dest--3 .manim-dot { animation: manim-beat-3 9s ease-in-out infinite; }
.manim-dest--1 .manim-ring { animation: manim-ping-1 9s linear infinite; }
.manim-dest--2 .manim-ring { animation: manim-ping-2 9s linear infinite; }
.manim-dest--3 .manim-ring { animation: manim-ping-3 9s linear infinite; }
@keyframes manim-pulse-1 {
0%, 3%       { stroke-dashoffset: 17;   animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
17%, 100%    { stroke-dashoffset: -101; }
}
@keyframes manim-pulse-2 {
0%, 36.33%   { stroke-dashoffset: 17;   animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
50.33%, 100% { stroke-dashoffset: -101; }
}
@keyframes manim-pulse-3 {
0%, 69.67%   { stroke-dashoffset: 17;   animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
83.67%, 100% { stroke-dashoffset: -101; }
}
@keyframes manim-beat-1 {
0%, 16%      { transform: scale(1); }
19%          { transform: scale(1.4); }
26%, 100%    { transform: scale(1); }
}
@keyframes manim-beat-2 {
0%, 49.33%   { transform: scale(1); }
52.33%       { transform: scale(1.4); }
59.33%, 100% { transform: scale(1); }
}
@keyframes manim-beat-3 {
0%, 82.67%   { transform: scale(1); }
85.67%       { transform: scale(1.4); }
92.67%, 100% { transform: scale(1); }
}
@keyframes manim-ping-1 {
0%, 16%      { opacity: 0;  transform: scale(1); }
16.01%       { opacity: .5; transform: scale(1);   animation-timing-function: cubic-bezier(0, 0, .3, 1); }
30%, 100%    { opacity: 0;  transform: scale(2.8); }
}
@keyframes manim-ping-2 {
0%, 49.33%   { opacity: 0;  transform: scale(1); }
49.34%       { opacity: .5; transform: scale(1);   animation-timing-function: cubic-bezier(0, 0, .3, 1); }
63.33%, 100% { opacity: 0;  transform: scale(2.8); }
}
@keyframes manim-ping-3 {
0%, 82.67%   { opacity: 0;  transform: scale(1); }
82.68%       { opacity: .5; transform: scale(1);   animation-timing-function: cubic-bezier(0, 0, .3, 1); }
96.67%, 100% { opacity: 0;  transform: scale(2.8); }
}
.pillar-panel:not(.is-active) .manim,
.pillar-panel:not(.is-active) .manim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.manim *, .manim *:before, .manim *:after { animation: none !important; }
}