.hero-content{padding-top:30px}
.character-stage{width:100%;max-width:224px;aspect-ratio:2/3;position:relative;margin:14px auto 0;overflow:hidden;isolation:isolate}
.character-stage .sprite{position:absolute;inset:0;background:url('assets/couple-cartoon-equal.png') no-repeat 0 0/400% 200%;transform-origin:50% 85%;will-change:transform;mix-blend-mode:multiply}
.character-stage .heart{position:absolute;opacity:0;z-index:2;pointer-events:none;color:var(--wine);font-size:20px;left:43%;top:27%}
.character-stage .heart-two{left:62%;top:19%;font-size:13px}
.character-stage.heart-pose .heart{animation:couple-heart 1.4s ease-out infinite}
.character-stage.heart-pose .heart-two{animation-delay:.4s}
.character-stage.paused .heart,.character-stage.offstage .heart{animation-play-state:paused}
@keyframes couple-heart{0%{transform:translateY(8px) scale(.5);opacity:0}35%{opacity:.75}100%{transform:translateY(-28px) scale(1.1);opacity:0}}
.couple-actions{width:100%;max-width:350px;position:relative;margin:4px auto 0;font-family:var(--sans)}
.couple-actions .action-hint{font-size:11px;letter-spacing:.06em;color:var(--muted);margin:0 0 9px}
.couple-actions .modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.couple-actions .mode{min-height:44px;padding:9px 2px;font-size:12px;border:1px solid var(--line);border-radius:3px;background:#fffdfa;color:var(--muted)}
.couple-actions .mode.active{background:var(--wine);color:var(--paper);border-color:var(--wine)}
.couple-actions .playback{display:flex;gap:16px;justify-content:center;margin-top:5px}
.couple-actions .playback button{font-size:11px;min-height:32px;padding:3px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--wine)}
.couple-actions .status{font-size:10px;color:var(--muted);line-height:1.5;margin-top:5px;min-height:15px}
.hero-content .couple-names{margin-top:18px}
.hero-content .fine-divider{margin:15px 0}
.hero-content .letter-note{font-size:.9rem}
.hero-content .letter-heading{font-size:.9rem;margin-bottom:6px}
.hero-content .text-next{margin-top:14px}
@media(max-height:740px){.character-stage{max-width:200px}.hero-content{padding-top:28px}}
@media(max-width:360px){.couple-actions .modes{gap:4px}.couple-actions .mode{font-size:11px}}
@media(prefers-reduced-motion:reduce){.character-stage .heart{animation:none!important}.character-stage .sprite{will-change:auto}}