.yubl-case .migration-hero { background:var(--paper); }
.yubl-hero-art { position:absolute; right:6%; top:50%; width:39%; max-width:36rem; transform:translateY(-43%) rotate(-7deg); }
.yubl-canvas { position:relative; aspect-ratio:1; border:1px solid #ad99c7; border-radius:.3rem; background:linear-gradient(140deg,#e7e6fb77,#f3def155); }
.yubl-canvas-type { position:absolute; left:8%; top:4%; font-size:clamp(6rem,16vw,16rem); font-weight:750; letter-spacing:-.09em; line-height:1.2; background:linear-gradient(110deg,#4f86ff,#ef91e5,#f7358b,#ff665d,#ff8a21,#f4c84b,#4f86ff); background-size:250% 100%; background-clip:text;-webkit-background-clip:text;color:transparent;animation:yubl-colour 6s ease-in-out infinite alternate; }
.yubl-play-button { position:absolute; display:grid; place-items:center; width:43%; aspect-ratio:1; border:5px solid var(--paper); border-radius:50%; box-shadow:0 8px 0 #11111111; transition:transform .25s,box-shadow .25s; }
.yubl-play-button svg { width:60%;fill:none;stroke:white;stroke-width:6;stroke-linejoin:round; }
.yubl-heart { left:2%;bottom:5%;background:linear-gradient(135deg,#ef91e5,#f7358b);transform:rotate(-8deg);animation:yubl-press 4s ease-in-out infinite; }
.yubl-heart svg { fill:white;stroke:none; }
.yubl-pin { right:-5%;top:35%;background:linear-gradient(135deg,#4f86ff,#7540b0);transform:rotate(12deg);animation:yubl-press 4s ease-in-out 2s infinite; }
.yubl-canvas-dot { position:absolute;right:14%;bottom:8%;width:11%;aspect-ratio:1;border-radius:50%;background:#f4c84b;border:4px solid var(--paper); }
.yubl-selection-corner { position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(#9664df,#9664df) left top/7px 7px no-repeat,linear-gradient(#9664df,#9664df) right top/7px 7px no-repeat,linear-gradient(#9664df,#9664df) left bottom/7px 7px no-repeat,linear-gradient(#9664df,#9664df) right bottom/7px 7px no-repeat; }
@keyframes yubl-colour { to { background-position:100% 50%; } }
@keyframes yubl-press { 0%,35%,65%,100% { translate:0 0;scale:1; } 45%,55% { translate:0 5px;scale:.94;box-shadow:0 2px 0 #11111111; } }
.yubl-canvas:hover .yubl-play-button { animation-play-state:paused; }
.yubl-play-button:hover { transform:translateY(-6px) rotate(0deg);box-shadow:0 12px 0 #11111111; }
.yubl-copy { max-width:none; }
.yubl-media { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:clamp(1rem,3vw,2.5rem); }
.yubl-media img,.yubl-media video { display:block;width:100%;height:auto;min-width:0; }
.yubl-media-1 { grid-template-columns:repeat(2,minmax(0,1fr));max-width:48rem;margin-inline:auto; }
.yubl-media-2 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.yubl-media-3 { grid-template-columns:1fr;max-width:64rem;margin-inline:auto; }
@media(max-width:760px) {
 .yubl-case .migration-hero { min-height:56rem;padding-bottom:30rem; }
 .yubl-hero-art { top:auto;bottom:3rem;right:14%;width:72%;max-width:25rem;transform:rotate(-7deg); }
 .yubl-canvas-type { font-size:clamp(7rem,30vw,12rem); }
 .yubl-media,.yubl-media-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .yubl-media-0 > :last-child { grid-column:1/-1;width:calc(50% - .5rem);justify-self:center; }
 .yubl-media-3 { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .yubl-hero-art * { animation:none !important;transition:none !important; } }

/* Remove the white GIF panel against the paper without altering its animation. */
.yubl-media-1 img[src$="Button.gif"] { mix-blend-mode:multiply; }

/* A warm, bright canvas with a quick stream of reactions. */
.yubl-canvas { background:#f5e6ab; }
.yubl-heart-stream { position:absolute; left:23.5%; bottom:26.5%; width:0; height:0; z-index:3; pointer-events:none; }
.yubl-heart-stream > span { position:absolute; left:0; bottom:0; color:#f7358b; font-family:Arial,sans-serif; font-size:var(--size); line-height:1; opacity:0; will-change:transform,opacity; animation:yubl-heart-rise var(--flight) linear var(--delay) infinite; }
.yubl-heart-stream > span:nth-child(3n) { color:#b43e94; }
.yubl-heart-stream > span:nth-child(4n) { color:#ff665d; }
@keyframes yubl-heart-rise {
 0% { transform:translate(-50%,0) scale(.3) rotate(0deg);opacity:0; }
 10% { opacity:.95; }
 75% { opacity:.85; }
 100% { transform:translate(calc(-50% + var(--drift)),calc(clamp(28rem,50vw,44rem) * -1)) scale(1.1) rotate(var(--sway));opacity:0; }
}
@media(prefers-reduced-motion:reduce) { .yubl-heart-stream { display:none; } }

/* Let reactions clear the canvas; keep the source button pressed. */
.yubl-canvas,.yubl-hero-art { overflow:visible; }
.yubl-canvas-type { background:none; color:#ff665d; animation:none; }
.yubl-heart,.yubl-heart:hover { animation:none; translate:0 5px; scale:.94; transform:rotate(-8deg); box-shadow:0 2px 0 #11111111; }