/* ================= 第四幕 沉默的半年 ================= */
.sl-stage { touch-action: pan-y; }
.sl-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sl-head { position: absolute; top: calc(30% + var(--st)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sl-head .kicker { color: rgba(255, 248, 236, .7); border-color: rgba(255, 248, 236, .35); background: transparent; }
.sl-title { font-size: clamp(30px, 8.6vw, 46px); color: rgba(255, 248, 236, .86); letter-spacing: .12em; text-shadow: 0 0 30px rgba(120, 120, 220, .35); }
.sl-lines p { position: absolute; left: 26px; right: 26px; top: 66%; text-align: center; font-size: clamp(16.5px, 4.7vw, 23px); line-height: 1.9; color: #fff8ec; letter-spacing: .05em; opacity: 0; text-shadow: 0 0 18px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.sl-prompt { position: absolute; left: 0; right: 0; top: 70%; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 16px; color: var(--pink3); opacity: 0; transform: translateY(10px); transition: all .6s; pointer-events: none; }
.sl-prompt.on { opacity: 1; transform: none; }
.sl-prompt.gone { opacity: 0 !important; }
.sl-hand { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--pink3); position: relative; animation: hand 2.2s ease-in-out infinite; }
.sl-hand::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--pink3); }
@keyframes hand { 0%, 100% { transform: translateX(26px); opacity: .4; } 50% { transform: translateX(-26px); opacity: 1; } }
.sl-handle { position: absolute; left: 0; top: 0; width: 68px; height: 68px; border-radius: 50%; touch-action: none; pointer-events: none; }
.sl-handle.live { pointer-events: auto; cursor: grab; }
.sl-handle.live.him::after, .sl-handle.live.her::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(255, 220, 235, .7); animation: ring 1.8s ease-out infinite; }
.sl-handle.live.her::after { animation-delay: .9s; border-color: rgba(255, 170, 210, .6); }
@keyframes ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.sl-after { position: absolute; inset: 0; pointer-events: none; }
.sl-date { position: absolute; left: 0; right: 0; top: 42%; transform-origin: 50% 50%; margin-top: -26px; line-height: 52px; text-align: center; font-size: clamp(30px, 8.4vw, 44px); color: #fff4cc; opacity: 0; letter-spacing: .04em;
  text-shadow: 2.4px 0 var(--ink), -2.4px 0 var(--ink), 0 2.4px var(--ink), 0 -2.4px var(--ink), 1.7px 1.7px var(--ink), -1.7px -1.7px var(--ink), 1.7px -1.7px var(--ink), -1.7px 1.7px var(--ink), 0 0 30px rgba(255, 200, 120, .9); }
.sl-al { position: relative; opacity: 0; text-align: center; font-size: clamp(15.5px, 4.4vw, 20px); line-height: 1.8; color: var(--txt); text-shadow: 0 2px 0 rgba(90, 30, 60, .35), 0 0 18px rgba(120, 40, 90, .45); padding: 0 24px; }
.sl-als { position: absolute; left: 0; right: 0; top: 66%; }
.sl-al.big { font-size: clamp(22px, 6.4vw, 32px); color: #fff2c4; margin-bottom: 8px; text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 0 4px 0 rgba(90, 30, 60, .4); }